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…
Malgré l’extension .lib, c’est un simple fichier .js, assez lisible qui plus est.
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();
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.
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).
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).
…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 !