Introduction p5.js
Liens utiles
p5.js Editeur
p5.js References
p5.js Cheat sheet
p5.js (ou simplement p5) est une bibliothèque JavaScript permettant de créer des œuvres d'art visuelles et interactives dans les navigateurs web. p5.js fonctionne avec les trois langages web natifs (JavaScript, HTML et CSS) pour créer des œuvres facilement partageables sur Internet.
Dans p5, nous utilisons du code pour dessiner des graphiques sur un "canvas". Le canvas affiche les viseuls de votre code.
Sur un écran d'ordinateur, chaque pixel est une coordonnée. Il possède une valeur "x" (horizontale) et une valeur "y" (verticale) qui déterminent l'emplacement du pixel. Mais les ordinateurs utilisent un système de coordonnées différent de celui auquel vous êtes habitué : l'origine est située en haut à gauche et la valeur "x" augmente vers la droite tandis que la valeur "y" augmente verticalement vers le bas.
Pour dessiner des formes de base, vous utilisez ce système de coordonnées avec des fonctions prédéfinies, comme ceci :
ellipse(50, 100, 50);
line(100, 50, 150, 150);
rect(200, 100, 50, 50);
triangle(300, 100, 350, 150, 400, 100);
En p5, nous pouvons utiliser leur éditeur pour faire des croquis. Il crée automatiquement pour nous l'index.html, le style.css et le sketch.js avec deux fonctions standard de p5 :
setup() est notre code d'initialisation. Il ne s'exécute qu'une seule fois au début.
draw() exécute notre code d'animation. Il s'exécute en boucle toutes les x secondes.
✏️ Mini exercice (15min)
En utilisant uniquement les formes de base que vous venez d'apprendre à créer, essayez de dessiner un visage en code ! Faites-le dans l'éditeur en ligne p5js et assurez-vous de sauvegarder votre croquis.
Rendu un capture d'écran sur Teams
Interactions
La meilleure partie de p5 est que nous pouvons interagir avec elle, et c'est très facile.
Par exemple, nous pouvons utiliser la position de la souris (mouseX et mouseY) pour déterminer la position de notre forme comme ceci :
Si nous supprimons background(220) dans draw(), nous pouvons également voir ce que nous avons dessiné.
Nous pouvons même vérifier si la souris est enfoncée (mouseIsPressed) et ne dessiner que si c'est le cas. Cela en fait un outil de dessin.
Pour contrôler les couleurs de la forme, je peux utiliser fill() et stroke(). Si je souhaite modifier l'épaisseur du trait, j'utilise strokeWeight().
✏️ Mini exercice (20min)
Essayez de créer votre propre pinceau en utilisant les couleurs, en utilisant une forme différente de l'ellipse ou en ajoutant quelque chose d'autre au croquis. Si vous n'êtes pas sûr de ce qu'il faut faire, essayez de changer les chiffres un par un et voyez ce qui se passe !
Rendu le lien sur Teams