Head

[ Article ] dans Processing.JS, le [ 11/01/2012 ]

Content

Edit 2017 : Tout ça c'est dépassé depuis longtemps, maintenant il y a p5js (et c'est super) !

Ah et pour bien démarrer avec p5.js, voici des exemples commentés !

 

* --- *

 

En tant que Flasheur, j’ai pris des habitudes et pu expérimenter la puissance/souplesse des tweens, celles de greensock en particulier.

Je n’envisageais donc pas de me lancer sérieusement dans Pjs si je n’avais pas la possibilité de trouver quelque chose de similaire…

Ca tombe bien, remercions Michael Aufreiter qui a adapté les équations de Robert Penner dans une librairie spécifique à Processing.js : Tween.lib

Malgré l’extension .lib, c’est un simple fichier .js, assez lisible qui plus est.

Voici une petit topo sur leur utilisation côté Javascript, la documentation (par ailleurs très complète) ne s’intéressant qu’à l’utilisation depuis un fichier .pde sans Javascript.

Vous insérez donc

<script type="text/javascript" src="lib/Tween.lib"></script>

dans le header de votre page html, et à vous les tweens dans vos sketch pjs !

C’est une classe, il faut donc créer des occurences de tweens dans votre setup/initialize :

// dans le skecth principal
b1 = new Tween(canvas, "x", Tween.regularEaseInOut, x, x, 0.01);
// dans une classe
this.b1 = new Tween(this, "x", Tween.regularEaseInOut, this.x, this.x, 0.01);

et updater les tweens en question dans votre draw/update :

// dans le sketch principal
b1.tick();
// dans une classe
this.b1.tick();

Par la suite, à tout moment vous pouvez lancer des tweens sur n’importe quelle variable :

positions x et y, vitesses, accélérations, couleurs (un tween pour chacune des 3 valeurs rvb), coefficients en tous genre, etc…

this.b1 = new Tween(this, "x", Tween.regularEaseInOut, this.x, newPos, 2);
this.b1.start(); // pour lancer le tween

Seule contrainte, donc : cette histoire de « canaux » de tweens à créer en amont de leur utilisation… mais ça permet aussi qu’on ne puisse pas avoir en même temps plusieurs tweens sur une seule variable : c’est le dernier appelé qui écrase les autres.

Ainsi, pour stopper un Tween il suffit de faire :

this.b1 = new Tween(this, "x", Tween.regularEaseInOut, this.x, this.x, 0);
this.b1.start()

Vous avez bien lu, on ne passe pas par un this.b1.stop(), on crée simplement un nouveau tween pour faire du « sur-place », qui va naturellement écraser le tween qui était en cours (s’il existait, et sinon ça ne pose pas de pb non-plus).

Vous trouverez un exemple d’utilisation ici, et le code est téléchargeable là.

Et si vous souhaitiez pouvoir générer une infinité de tween à la volée sans vous occuper des superpositions, il reste la possibilité d’utiliser une fonction JS du genre :

listeTweens = new Array();
function newTween(...){
   listeTweens[listeTweens.length] = new Tween(...);
};

et dans le draw/update :

for(i=0;i<listeTweens.length; i++){
   listeTweens[i].tick();
}

ce qui vous donne des appels simplifiés du genre : newTween(…); utilisables depuis n’importe où (classe, sketch principal, clic sur de l’html, etc).

Dernier point : la librairie ne propose pas de delay() sur l’exécution des tweens, et Processing.js ne les propose pas non-plus… ce qui nous amène au prochain article !…

…où le problème est non seulement solutionné, mais avec une solution très intéressante qui offre aussi des possibilités inattendues de « timeline » de code…

A suivre !

Enregistrer