Les couleurs

Dessiner une image à l'écran, c'est changer la couleur des pixels. Les pixels sont des petites zones, le plus souvent carrées, qui possèdent une couleur. Chaque couleur se définit par trois canaux qui sont le rouge, le vert et le bleu. Une valeur de 100% de chacun de ces trois canaux donne du blanc. Une valeur de 0% de chacun de ces trois canaux donne du noir. Il s'agit de lumière, et non de peinture. Ainsi, plus la valeur de chaque canal sera importante, plus la couleur sera lumineuse.

Par exemple, 100% de rouge, 80% de vert et 20% de bleu vont donner ensemble la couleur orange. La méthode fill() nous permet de spécifier la couleur des prochaines formes à dessiner. Chaque canal d'une couleur peut être donné sur une échelle de 0 à 255. Ainsi, 80% de 255 donne 204, et 20% de 255 donne 51.

La couleur de fond

On peut changer la couleur de fond en appelant la méthode background(). Attention : rajouter background() à la suite d'une composition déjà existante, l'effacerait !

background(0, 0, 0);

La couleur de remplissage

A chaque fois que l'on dessine une forme, on le fait avec la couleur de remplissage qui est choisie à ce moment-là. On le fait en appelant la méthode fill().

noStroke();
fill(255, 204, 51);
rect(25, 25, 50, 50);

Processing nous offre différents formats pour exprimer la couleur. Si vous faites de la programmation Web, vous connaissez sans doute le format hexadécimal. Selon ce procédé, la même couleur orange peut être obtenue en écrivant :

fill(#ffcc33);
rect(25, 25, 50, 50);

Par ailleurs, il est possible de spécifier la valeur du canal alpha de la couleur utilisée, c'est-à-dire son degré de transparence. Pour ce faire, on doit donc préciser quatre paramètres à la méthode fill(). Le quatrième argument est la valeur alpha.

noStroke();
fill(255, 204, 51); // orange
rect(25, 25, 50, 50);
fill(255, 255, 255, 127); // blanc semi-transparent
rect(35, 35, 50, 50);

Si l'on souhaite choisir une couleur qui correspond à un ton de gris, il suffit de donner un seul paramètre à la méthode fill(). C'est la valeur de gris, de 0 à 255.

fill(127);
rect(25, 25, 50, 50);

On peut désactiver le remplissage des formes en appelant la méthode noFill().

La couleur du contour

Pour changer la couleur du contour des formes que l'on dessine, on doit appeler la méthode stroke() avec comme paramètres les canaux de la couleur désirée. Appeler noStroke() désactive la couleur de contour. A titre d'illustration, voici un dessin de masque africain utilisant ces deux instructions :

size(200, 200);
smooth();
background(255); // on dessine un fond blanc

stroke(#000000); // le contour sera noir
fill(#FFCC66);  // le remplissage sera jaune
strokeWeight(3);

translate(width / 2, height / 2);

ellipse(0, 0, 100, 180); // forme elliptique du masque

ellipse(0, 60, 20, 25); // ellipse de la bouche

stroke(255, 0, 0); // le contour sera rouge
ellipse(28, -30, 25, 10);  // ellipse de l'oeil droit

stroke(0, 0, 255); // le contour sera bleu
ellipse(-27, -30, 25, 10); // ellipse de l'oeil gauche

noFill(); // les prochaines formes n'auront pas de remplissage

stroke(#000000);  // le contour des prochaines formes sera noir

bezier(-30, -70, -5, -60, -5, 0, -5, 20); // courbe du sourcil droit

bezier(30, -70, 5, -60, 5, 0, 5, 20); // courbe du sourcil gauche

line(-5, 20, 5, 20); // ligne du nez pour joindre l'extrémité des courbes

La portée des modifications de couleur

Par défaut, toute modification de style (couleur de remplissage ou de contour, épaisseur ou forme de trait) s'appliquera à tout ce que vous dessinerez ensuite. Pour limiter la portée de ces modifications, vous pouvez les encadrer par les commandes pushStyle() et popStyle().

size(100, 100);
background(255);

stroke(#000000);
fill(#FFFF00); 
strokeWeight(1);
rect(10, 10, 10, 10);

pushStyle(); // On ouvre « une parenthèse » de style

stroke(#FF0000);
fill(#00FF00);
strokeWeight(5);
rect(40, 40, 20, 20);

popStyle(); // On ferme notre parenthèse de style

rect(80, 80, 10, 10);

Exercice :

Supprimez les commandes pushStyle() et popStyle() et observez la différence de comportement.

L'espace colorimétrique

Définir des couleurs à partir des canaux rouge, vert et bleu constitue un moyen parmi d'autres de décrire l'espace colorimétrique de votre dessin. Processing supporte également le mode TSV. TSV signifie « teinte, saturation, valeur ». En anglais, on appelle ce mode HSB, pour « hue, saturation, brightness ». On choisit une échelle de 0 à 100 pour chacun de ces 3 canaux. La teinte correspond à un chiffre indiquant la position de la couleur sur l'échelle chromatique, soit un arc-en-ciel. Le rouge est à gauche, puis viens l'orange, le jaune, le vert, le bleu et le violet.

La méthode colorMode() est utile pour changer l'échelle numérique que l'on utilise pour spécifier les couleurs, et pour changer d'espace colorimétrique. Par exemple, appeler colorMode(RGB, 1.0), va changer l'échelle que l'on utilise pour spécifier chaque canal des couleurs afin qu'il aille de zéro à un.

Ici, on change le mode de couleur pour le TSV afin de créer un dégradé de teinte qui ressemble aux couleurs d'un arc-en-ciel.

noStroke();
size(400, 128);

// La teinte sera spécifiée avec un chiffre de 0 à 400
colorMode(HSB, 400, 100, 100);

// On fait quatre cent répétitions
for (int i = 0; i < 400; i++) {
  fill(i, 128, 128);
  rect(i, 0, 1, 128);
}