Dessiner avec p5.js

A faire vous-même 1	projet2-1
“Copier-coller” le dossier “projet0” et renommez-le en “projet2-1”. Vous allez travailler avec ce dossier “projet1”. Dans la suite, vous devrez effectuer ce “copier-coller-renommer” pour chaque nouvel exemple sans que j'ai besoin de le préciser.

Le système de coordonnées de la zone de dessin

L'origine du repère se trouve en haut et à gauche de la fenêtre de la zone de dessin.

Dessiner un point

Pour dessiner un point sur l'écran, il faut utiliser la fonction point() en passant en argument les deux coordonnées x et y.

Exemple : pour placer le point comme sur le schéma ci-dessous, le code serait :

point(3,2);

Dessiner une ligne

line(x1, y1, x2, y2);

Dessiner un triangle

triangle(x1, y1, x2, y2, x3, y3);

Dessiner un quadrilatère

quad(x1, y1, x2, y2, x3, y3, x4, y4);

Dessiner un rectangle

rect(x, y, width, height);

D'autres options pour les rectangles :
https://p5js.org/reference/#/p5/rect

Dessiner une ellipse ou un cercle

ellipse(x, y, width, height);

Dessiner un arc

arc(x, y, width, height, α1, α2);

D'autres options pour les arcs :
https://p5js.org/reference/#/p5/arc

Modifier la couleur du contour d'un élément

La fonction stroke permet de définir la couleur des contours de tous les éléments dessinés après elle.
Elle prend comme paramètre un nom, un code hexadécimal, un code RVB ou HLS.

stroke('red');
rect(20, 20, 60, 60);  // un rectangle rouge
 
stroke(0,255,0);
rect(20, 20, 60, 60);  // un rectangle vert
 
stroke('#0729FF');
rect(20, 20, 60, 60);  // un rectangle bleu

Pour gérer la transparence, vous pouvez ajouter un quatrième paramètre au code RVB pour définir le canal alpha : 0 pour transparent et 255 pour opaque.

D'autres paramètres sont utilisables : https://p5js.org/reference/#/p5/stroke

Modifier la taille du contour d'un élément

La fonction strokeWeight() permet de modifier la taille, en pixel, d'un élément dessiné.

strokeWeight(5); // bordure de 5 pixels
stroke('red');
rect(20, 20, 60, 60);  // un rectangle rouge

Pour supprimer le contour, il suffit d'utiliser la fonction noStroke().

Modifier la couleur de remplissage

La fonction fill() permet de modifier la couleur de remplissage. Elle prend les mêmes paramètres que pour le contour.

stroke('blue');
fill('red');
rect(20, 20, 60, 60);  // un rectangle rouge avec une bordure bleue

Pour supprimer la couleur de remplissage, il suffit d'utiliser la fonction noFill().

A faire vous-même 2	projet2-2
Reproduire le drapeau Français et la cocarde tricolore.

A faire vous-même 3	projet2-3
L'étoile ci-contre est dessinée en utilisant deux triangles pleins sans bordure. Reproduire cette étoile !