Les principales commandes Processing pour dessiner un tableau (dessin statique)

Découvrez un programme qui dessine un tableau

Voici le code d'un dessin statique qui résume les différentes instructions décrite sur cette page. Appuyez sur le bouton Run pour exécuter le programme et visualiser le tableau dont le code est écrit ci-dessous.

Décrivez votre toile

la toile
Avant de dessiner un tableau, il faut décrire la toile sur laquelle nous allons dessiner en indiquant sa taille, ainsi que sa couleur de fond. La taille de la toile est définie à l'aide de l'instruction suivante :
size(largeur, hauteur) : taille de la toile en pixels

Les figures dessinées sur la toile sont placées à l'aide de coordonnées (x, y) où x est la position horizontale (abscisse) de 0 (à gauche) à largeur (à droite) et y la position verticale (ordonnée) de 0 (en haut) à hauteur (en bas)

La couleur de fond de la toile peut être définie soit en intensité de gris, soit en couleur (voir partie suivante pour plus de détails) :
background(intensité_de_gris) : couleur de fond en intensité de gris, définie par un entier compris 0 (noir) et 255 (blanc)
background(rouge, vert, bleu) : couleur de fond exprimée comme un mélange d'intensités des 3 couleurs rouge, vert et bleu, exprimées entre 0 et 255.

Jouez avec les couleurs

Les couleurs peuvent être exprimées soit en intensité de gris (un entier compris entre 0 pour le noir et 255 pour le blanc), soit en mélange d'intensités de rouge, vert et bleu (RGV pour red, green, blue en anglais) aussi exprimées par des entiers compris entre 0 (absence de la couleur) et 255 (présence maximale de la couleur). Des exemples d'intensités et les couleurs correspondantes sont données ci-dessous.

Intensités de gris :  niveaux de gris Combinaisons d'intensités de rouge, vert, bleu (RGB) :  couleurs RGB

Dessinez des formes géométriques

les formes
Des instructions permettent de dessiner des formes géométriques sur la toile. Pour cela, il faut indiquer à la fois où placer la forme et ses dimensions. Voici les instructions pour dessiner des formes basiques :
point(x, y) dessine un point aux coordonnées x, y, qui sont x = 200 et y = 60 dans l'illustration ci-dessus.
line(xdeb, ydeb, xfin, yfin) dessine une ligne depuis les coordonnées xdeb, ydeb, qui sont 160, 200 dans l'illustration, jusqu'aux coordonnées xfin, yfin, soit 240, 260 dans l'illustration.
rect(x, y, largeur, hauteur) dessine un rectangle dont le coin supérieur gauche se trouve à la coordonnée x, y, soit 20, 40 dans l'illustration, et dont la taille des côtés horizontaux est largeur et celle des côtés verticaux est hauteur, soit une largeur de 60 et une hauteur de 80 dans l'illustration.
ellipse(x, y, largeur, hauteur) dessine une ellipse (un ovale) dont le centre se trouve à la coordonnée x, y, soit 120, 140 dans l'illustration, et dont le diamètre horizontal est largeur et le diamètre vertical est hauteur, soit des diamètres de taille 40 et 80 dans l'illustration.

Changez l'épaisseur des contours et les couleurs des formes

Comme pour un tableau peint à l'aide de pinceaux, il est possible de définir l'épaisseur du trait utilisé pour dessiner une forme, ainsi que la couleur de ce trait et de remplissage de la forme.

strokeWeight(epaisseur) définit l'épaisseur des contours des formes qui seront dessinées par la suite

stroke(intensité_de_gris) définit l'intensité de gris des contours des formes qui seront dessinées par la suite

stroke(rouge, vert, bleu) définit la couleur (en intensité de rouge, vert et bleu) des contours des formes qui seront dessinées par la suite

noStroke() indique que les formes n'ont pas de contour visible

fill(intentité_de_gris) définit l'intensité de gris de remplissage des formes qui seront dessinées par la suite

fill(rouge, vert, bleu) définit la couleur (en intensité de rouge, vert et bleu) de remplissage des formes qui seront dessinées par la suite

noFill() indique que les formes qui seront dessinées par la suite ne seront pas remplies par une couleur. La couleur de fond sera donc visible.

En plus des variations d'intensité de gris ou de couleurs, il est possible d'indiquer un degré de transparence (ou opacité) pour les contours et remplissages. Pour cela une 2ème (dans le cas des intensités de gris) ou 4ème (dans le cas d'une couleur RGB) valeur peut être ajoutée aux instructions stroke ou fill pour préciser si la couleur est totalement transparente (valeur de 0) ou totalement opaque (valeur de 255).

Testez si vous avez compris !

Expérimentez par vous-même

Si vous ne l'avez pas déjà fait, changez les valeurs des paramètres des fonctions du programme donné au début de la page pour mieux comprendre comment elles fonctionnent.

Explorez les couleurs des contours et du remplissage

Vous avez ci-dessous un tableau dans lequel il semble manquer une forme puisque nous avons dessiné deux ellipses et une seule est visible. Que faut-il changer dans le programme afin de voir apparaître l'ellipse au sein du disque ? Plusieurs solutions sont possibles.

Que pouvez-vous en déduire sur la couleur de remplissage par défaut des formes ? Et sur la couleur par défaut du contour ?

Explorez la transparence des couleurs

De nouveau, dans le programme ci-dessous, une seule ellipse est visible alors que 2 sont dessinées. Comment jouer sur la transparence pour faire apparaître l'ellipse au sein du disque ?

Explorez les coordonnées des formes et les couleurs

On souhaite maintenant réaliser une seconde œuvre en jouant sur les couleurs et représentant un quadrillage 2×2. Pour cela, on se propose de dessiner 4 carrés de tailles identiques et de couleurs différentes comme l'illustre la figure ci-contre.

Pour réaliser cela, il faut penser aux coordonnées des différents coins supérieurs et inférieurs de chaque carré : un petit schéma peut grandement vous faciliter la tâche ;)

Ensuite, il faut s'attaquer aux couleurs. Les trois premières correspondent aux couleurs primaires, cela signifie que seule une des composantes RVB est au maximum et les autres au minimum. Pour la dernière couleur, il peut être utile de revenir au petit schéma qui expliquait le principe des couleurs RVB ;)