2) Les formes "primitives" en 2D

Loin des grottes de Lascaux, les formes primitives sont le point, la ligne, l’arc, le rectangle, l’ellipse et les polygones divers. On t peut les créer simplement à travers des fonctions offertes par Processing.

Précédent | 3/16 | Suivant

Les primitives sont en 2D par opposition avec le cube et la sphère qui appartiennent à l’univers de la 3D.

Logique cohérente des fonctions

Les fonctions permettant de dessiner des formes primitives suivent la même logique :
- Elles portent un nom sémantique reconnaissable : triangle() permet de dessiner un triangle.
- Elles doivent recevoir logiquement de coordonnées liées aux paramètres du dessin : un point à besoin de deux coordonnées pour être situé dans un espace 2D, un triangle 6 coordonnées. Le rectangle 4 coordonnées pour le situer dans l’espace et lui donner une largeur et hauteur, etc.
- Les coordonnées sont toujours données dans l’ordre X,Y : on définit la position sur l’axe horizontal puis sur l’axe vertical.
- Elles ne comportent pas d’indications de couleur de remplissage ou de trait, épaisseur de trait, etc. qui sont définie par d’autres fonctions.

point()

Le point se définit comme évoqué par une position dans l’espace en deux dimensions

point(100,100);

Dessine un point à la position X 100, Y 100.

line()

La ligne comporte un point de départ et un point d’arrivée, soit 4 coordonnées :

line(100,100, 150, 200);

Soit une ligne partant des points X 100, Y 100 pour arriver en X 150, Y 200, en diagonale donc.

Rect() et ellipse()

Ces deux fonctions dessine respectivement un rectangle et une ellipse (cercle ou ovale).
4 paramètres doivent être donnés : les deux premiers sont la position dans l’espace et des 2 suivants sont la largeur et la hauteur.

rect(100,100,200,250);
ellipse(100, 100, 200,250);

Attention : les coordonnées en X et Y (les deux premiers paramètres) sont les coordonnés du coin supérieur gauche dans le cas du rectangle et le centre dans le cas de l’ellipse. On peut modifier ce comportement par défaut des fonctions en utilisant

rectMode(CENTER); // les coordonnées 100,100 sont maintenant le centre du rectangle
rect(100,100,200,250);

ou

ellipseMode(CORNER); // les coordonnées 100, 100 sont maintenant le coin supérieur gauche de la boite dans laquelle est dessinée le cercle
ellipse(100,100,200,250);

quad() et triangle()

Dans le cas de quad(), on trouvera 8 coordonnées puisqu’on définit un quadrilatère par ses quatre coins.

quad(38, 31, 86, 20, 69, 63, 30, 76);

Le triangle comporte trois points donc 6 coordonnées.

triangle(30, 75, 58, 20, 86, 75);

fill(), stroke() et strokeWeight()

La couleur de remplissage des formes se définit par la fonction fill(). Elle peut comporter 1 argument, ou 2, 3, ou encore 4.

fill(128); // remplit la forme avec un gris moyen
fill(30,100); // remplit avec un gris sombre partiellement transparent
fill(255,0,0); // remplit la forme avec du rouge
fill(0,255,0,30); // remplit la forme avec un vert partiellement transparent

Stroke() détermine quant à lui la couleur du trait de contour.

stroke(128); // trait de couleur grise
stroke(30,100); // trait gris sombre partiellement transparent
stroke(255,0,0); // trait rouge
stroke(0,255,0,30); // trait vert partiellement transparent

L’épaisseur du trait se détermine par strokeWheight(). La valeur peut être un chiffre entier ou un chiffre avec virgule, mais ne peux jamais évidemment être inférieur à 0.

strokeWeight(3); // épaisseur du trait de 3 pixels
strokeWeight(0.5); // epaisseur du trait d'un demi pixel

Dans l’ordre

Ces trois commandent agissent sur les formes primitives dessinées qui les suivent.

strokeWeight(3); // trait de 3 pixels d'épaisseur
line(0,0,100,100); // un trait de 3 px noir (par défaut) est dessiné

stroke(255,0,0); // trait rouge
line(0,0,150,100); // un trait de 3 px rouge est dessiné

stroke(128); // trait gris
line(0,0,100,150); // un trait de 3 px gris est dessiné