Valentin Dupas

💡 If this is the first course you read from me, please read this small thing : about my courses

Mouvement

On va faire un truc plus intéressant (avant que vous commenciez à me demander pourquoi on ne ferait pas tout ça sur Figma ou Affinity Designer).

On va changer la valeur de distance pendant que le code tourne.

let distance = 150;

function draw() {
  let diameter = 100;

  circle(width / 2 + distance, height / 2, diameter);
  circle(width / 2 - distance, height / 2, diameter);

  circle(width / 2, height / 2 + distance, diameter);
  circle(width / 2, height / 2 - distance, diameter);
}

Si je bouge distance tout en haut du programme, alors on va d'abord créer distance puis créer draw() et enfin espress va exécuter draw() dessinant ainsi 4 cercles basés sur la valeur de distance et de diameter.

En soi, peu de choses changent, distance est maintenant disponible à tout le script et pas juste l'intérieur de draw().

Ce qui est important est qu'avant on créeait distance avec une valeur de 150 à chaque fois qu'on exécutait draw() et elle était détruite à la fin de draw(). Alors que maintenant on créer distance une seule fois et on la garde pour toute la durée du programme.

Donc si j'y ajoute 5 dans draw()...

let distance = 150;

function draw() {
  let diameter = 100;

  distance = distance + 5;
  // equivalent à: "`distance` prend la valeur `distance + 5`"
  // ...ouais je sais, ça agresse les yeux des matheux

  console.log(distance);

  circle(width / 2 + distance, height / 2, diameter);
  circle(width / 2 - distance, height / 2, diameter);

  circle(width / 2, height / 2 + distance, diameter);
  circle(width / 2, height / 2 - distance, diameter);
}

... les cercles sont un poil plus éloignés les uns des autres, mais le truc rigolo avec espress c'est que vous pouvez appuyer sur Ctrl + Espace (ou Cmd + Espace) pour dessiner une nouvelle image en exécutant draw() une nouvelle fois sans pour autant relancer le programme de zéro.

Vous constaterez que distance augmente bien de 5 à chaque fois, prouvant que la variable persiste bien à chaque nouvelle exécution de la fonction draw(). Et vu que notre dessin dépend de la distance on voit les cercles s'écarter de 5 pixels à chaque nouvelle image.

Et on peut même faire mieux!

p5 nous fournit une variable mouseX qui contient le nombre de pixels entre le point (0,0) et la position sur l'axe X de la souris.

mouseX comme distance, elle est créée une fois au tout début et continuellement mise à jour (mais pas par votre code).

Je vous laisse essayer ce que ça donne si on remplace distance par mouseX:

function draw() {
  circle(width / 2 + mouseX, height / 2, diameter);
  circle(width / 2 - mouseX, height / 2, diameter);

  circle(width / 2, height / 2 + mouseX, diameter);
  circle(width / 2, height / 2 - mouseX, diameter);
}

N'oubliez pas de faire Ctrl/Cmd + Espace pour rafraichir le dessin...

... quoique, si vous avez bien pris le temps de comprendre, vous pouvez maintenant utiliser Ctrl/Cmd + L pour rendre votre dessin "live". Ce qui fait que draw() sera exécuté 60 fois par seconde (ou plus, en fonction de votre écran).

Et voilà pourquoi on ne le fait pas sur Figma ou Affinity Designer. On a programmé un comportement que la machine à exécuté, liant une action utilisateur à une conséquence, une interaction.

À partir de là, je vous invite à regarder les fonctions suivantes pour étoffer vos capacités et de jouer un peu avec tout ça pour créer des proposition de motion interactif. D'ailleurs, sachez que l'espace de dessin prend actuellement toute la page, mais il est possible que l'espace de dessin ne soit qu'un élément de la page, comme une banière interactive au fond de la première section de votre portfolio.

Ces pages de doc' incluent des exemples.