Les animations avec p5.js

Afin de rendre plus vivant votre article de blog, vous pouvez ajouter du code dont l'affichage apparaîtra sur la page. WordPress permet d'ajouter des blocs de code p5.js dans un article.

Le langage Processing et p5.js

Le langage de programmation Processing a été développé pour faciliter la conception de contenus visuels et d'animations, et p5.js est une librairie JavaScript qui permet de programmer dans l'esprit du langage Processing. Les scripts p5.js peuvent être facilement ajoutés à une page WordPress dans des blocs dédiés.

Comment programmer en p5.js

Installer Processing et p5.js

Pour développer du code p5.js, ils est vivement conseillé d'utiliser l'application Processing pour faire le développement avant de porter les scripts sur le blog. L'application fournit un environnement de programmation qui facilite le débogage.

  1. télécharger l'application Processing sur le site https://processing.org/download/
  2. Dans le menu en haut à droite de l'application où vous voyez initialement apparaître le mode java, ajouter le mode p5.js.
  3. Sélectionner le mode p5.js (Attention, la syntaxe de Processing est différente de la syntaxe de p5.js qui est une extension de javascript.)

Apprendre à programmer en p5.js

Le site Processing.org contient plusieurs tutoriels sous forme de vidéos et de texte. Prenez soin de regarder les tutoriels de p5.js et non de Processing.

Le principe de base de la programmation Processing (et de p5.js) est le suivant. Votre programme comporte 2 fonctions essentielles: setup(), qui permet d'initialiser l'environnement visuel, et draw(), qui fait l'affichage. La fonction setup() est appelée une fois au début de l'exécution du programme. La fonction draw est ensuite appelée à intervalle régulier, dans une boucle infinie. A chaque appel de votre fonction draw(), votre code mettra à jour les données (coordonnées et paramètres d'affichage de chaque objet...) et puis fera l'affichage correspondant au nouvel état. Des variables globales peuvent être utilisées pour stocker l'état courant; on peut aussi utiliser les objets en JavaScript pour gérer les comportements des objets à afficher.

D'autres fonctions sont appelées automatiquement lorsque certains évènements se produisent: clic ou déplacement de souris, touche enfoncée, etc. Il suffit d'écrire la fonction qui correspond, par exemple mouseClicked() pour un clic de souris, et dont le code définira le comportement lorsque l'évènement se produit.

Insérer un bloc de code dans une page WordPress

Lorsque votre code a été testé dans l’environnement de programmation de l'application Processing, vous pouvez insérer le code dans une page WordPress. Créez un nouveau bloc, choisissez le type de bloc p5.js, et collez votre code dans le bloc. Pour voir le résultat, cliquez Prévisualiser.

Exemple de code p5.js

Vous trouverez ci-dessous le code de l'application qui s'exécute en haut de la page. Celui-ci permet de voir quelques particularités du langage p5.js : comment mettre en place l'application avec la fonction setup(), comment mettre à jour l'affichage à chaque itération dans draw(); comment gérer un évènement de souris avec la fonction mouseClicked(); comment créer une classe simple (Bubble), etc.

let bubbles=[];
let colors=['pink','mediumpurple','orange','turquoise','violet',];

function setup() {
  createCanvas(600, 300); noFill();
  frameRate(30);
}
function draw() {
  clear();
  let t=random(0,100);
  if (t<2){bubbles.push(new Bubble(300,150,0,'grey'));}  
  for (b of bubbles){
    b.grow();
    if (b.r>60){b.pop();}
    b.move();
    b.display();
  }
}
function mouseClicked(){
  bubbles.push(new Bubble(mouseX,mouseY,0,random(colors)));//
}

class Bubble{
   constructor(x,y,r,c){
   this.x=x; this.y=y; this.r=r; this.c=c;
 }
 display(){
  stroke(this.c);
  circle(this.x,this.y,this.r);
 }
 move(){
   this.x+=random(-10, 10);
   this.y+=random(-10, 10);   
 }
 grow(){
   this.r+=random(0,1);
 }
 pop(){
   this.r=0; this.c='white';
 }
}

Pour aller plus loin

Les structures de données et types de p5.js sont ceux de javascript. On peut utiliser des listes, des tableaux associatifs, écrire des fonctions, définir des classes, le tout avec la syntaxe qui relève de javascript.

ATTENTION. Une particularité de l'approche Processing est qu'elle est fondamentalement itérative. En effet, à chaque appel de draw() on effectue un seul affichage. Pour illustrer un algorithme, il faut donc programmer un peu différemment pour n'exécuter qu'une étape à la fois dans une exécution de la fonction draw(). Pour les algorithmes naturellement itératifs ça peut se faire relativement facilement. Pour les algorithmes récursifs, on doit s'y prendre autrement. Une possibilité est d'exécuter l'algorithme dans setup() sans faire d'affichage, mais en stockant toutes les étapes à afficher dans une liste ; puis à chaque appel de draw(), on effectue l'affichage en suivant les informations dans un élément de la liste.

0 Cliquer pour recommander cet article