Les Outils de Dessin

🎯 Objectif : Maîtriser le système de coordonnées, dessiner toutes les formes de base, et comprendre le fonctionnement du remplissage et du contour. À la fin de ce chapitre, tu seras capable de dessiner n'importe quelle combinaison de formes sur ton canevas.

Le système de coordonnées#

L'origine est en haut à gauche#

C'est différent des maths ! En Processing, le point (0, 0) est en haut à gauche du canevas. L'axe X va vers la droite et l'axe Y va vers le bas.

Quand on écrit ellipse(100, 200, 50, 50), on dessine un cercle dont le centre est à 100 pixels depuis la gauche et 200 pixels depuis le haut.

⚠️ Piège classique : l'axe Y est inversé par rapport aux cours de maths. Plus la valeur de Y est grande, plus on descend !

Direction	Valeur qui augmente
→ Vers la droite	X augmente
↓ Vers le bas	Y augmente
← Vers la gauche	X diminue
↑ Vers le haut	Y diminue

Les formes de base#

Processing met à ta disposition plusieurs fonctions pour dessiner. Voici les principales :

Le point#

point(x, y);

Dessine un seul pixel à la position (x, y). Pas très visible ! Utilise strokeWeight() pour le rendre plus gros.

strokeWeight(8);
point(200, 150);   // Un gros point au centre

La ligne#

line(x1, y1, x2, y2);

Trace une ligne entre le point (x1, y1) et le point (x2, y2).

line(50, 50, 350, 250);  // Ligne diagonale

Le rectangle#

rect(x, y, largeur, hauteur);

Dessine un rectangle. Par défaut, (x, y) est le coin supérieur gauche.

rect(100, 80, 200, 120);  // Rectangle à partir du coin (100, 80)

💡 Pour que (x, y) soit le centre du rectangle au lieu du coin, utilise :

rectMode(CENTER);
rect(200, 150, 200, 120);  // (200, 150) est maintenant le CENTRE

L'ellipse (et le cercle)#

ellipse(x, y, largeur, hauteur);

Dessine une ellipse centrée sur (x, y). Si largeur = hauteur, c'est un cercle.

ellipse(200, 150, 100, 100);  // Cercle de diamètre 100
ellipse(200, 150, 150, 80);   // Ellipse aplatie

Le triangle#

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

Dessine un triangle en reliant trois points.

triangle(200, 50, 100, 250, 300, 250);  // Triangle pointant vers le haut

L'arc (portion de cercle)#

arc(x, y, largeur, hauteur, angleDebut, angleFin);

Dessine un arc de cercle. Les angles sont en radians, pas en degrés.

Angle	Radians	Constante Processing
0°	0	0
90°	π/2	HALF_PI
180°	π	PI
270°	3π/2	PI + HALF_PI
360°	2π	TWO_PI

arc(200, 150, 160, 160, 0, PI);  // Demi-cercle (de 0° à 180°)

Tableau récapitulatif#

Fonction	Paramètres	Dessine...
point(x, y)	Position	Un point
line(x1, y1, x2, y2)	Deux points	Une ligne
rect(x, y, l, h)	Coin + dimensions	Un rectangle
ellipse(x, y, l, h)	Centre + dimensions	Une ellipse/cercle
triangle(x1,y1, x2,y2, x3,y3)	Trois points	Un triangle
arc(x, y, l, h, début, fin)	Centre + dimensions + angles	Un arc
background(couleur)	Couleur	Remplit tout le fond

Le remplissage et le contour#

Processing fonctionne comme si tu avais deux outils dans la main :

🎨 Le pot de peinture : fill()#

fill() définit la couleur de remplissage (l'intérieur) de toutes les formes dessinées après.

fill(200);              // Remplissage gris clair
rect(50, 50, 100, 80);  // Ce rectangle sera gris clair à l'intérieur

Pour désactiver le remplissage (forme "vide", transparente) :

noFill();

✏️ Le stylo : stroke() et strokeWeight()#

stroke() définit la couleur du contour (le trait autour des formes).

strokeWeight() définit l'épaisseur du trait en pixels.

stroke(0);              // Contour noir
strokeWeight(4);         // Trait de 4 pixels d'épaisseur
rect(50, 50, 100, 80);  // Ce rectangle aura un gros contour noir

Pour désactiver le contour :

noStroke();

Les 4 combinaisons possibles#

Combinaison	Code	Résultat
Remplissage + contour	fill(200); stroke(0);	Forme grise avec bord noir
Remplissage seul	fill(200); noStroke();	Forme grise, pas de bord
Contour seul	noFill(); stroke(0);	Juste le contour, intérieur vide
Les deux personnalisés	fill(200); stroke(0); strokeWeight(5);	Forme grise avec gros bord noir

💡 Règle importante : l'effet "feutre"#

fill() et stroke() s'appliquent à tout ce qui est dessiné après, jusqu'au prochain appel. C'est comme si tu changeais de feutre : une fois que tu prends le rouge, tout ce que tu dessines est rouge jusqu'à ce que tu changes.

fill(200);                    // "Je prends le feutre gris"
rect(20, 20, 80, 80);         // Rectangle gris
ellipse(200, 60, 80, 80);     // Cercle gris AUSSI !

fill(100);                    // "Je change pour le feutre gris foncé"
rect(300, 20, 80, 80);        // Rectangle gris foncé

L'ordre des instructions compte !#

En Processing, les formes sont dessinées les unes par-dessus les autres, dans l'ordre du code. La dernière forme dessinée est par-dessus toutes les autres.

// Le cercle sera PAR-DESSUS le rectangle
fill(200);
rect(50, 50, 200, 100);     // Dessiné en premier → en dessous

fill(100);
ellipse(150, 100, 120, 120); // Dessiné en dernier → par-dessus

C'est comme quand tu empiles des feuilles de papier : la dernière posée est celle qu'on voit.

⚠️ Conséquence : si tu veux qu'un fond soit derrière tout, dessine-le en premier ! C'est le rôle de background() qu'on met au début du draw().

Résumé#

Outil	Fonction	Ce que ça fait
🎨 Remplissage	fill(couleur)	Couleur de l'intérieur des formes
🎨 Pas de remplissage	noFill()	Formes transparentes
✏️ Contour	stroke(couleur)	Couleur du trait/bord
✏️ Épaisseur	strokeWeight(pixels)	Épaisseur du trait
✏️ Pas de contour	noStroke()	Pas de trait autour des formes
📐 Mode rectangle	rectMode(CENTER)	Change le point de référence du rectangle
🖼️ Fond	background(couleur)	Remplit tout le canevas

💡 Astuce finale : quand tu te perds, rappelle-toi que chaque forme a besoin de trois choses :

1. Un remplissage (fill() ou noFill())
2. Un contour (stroke() / strokeWeight() ou noStroke())
3. Sa position et taille (les paramètres de la fonction)