Les Couleurs

🎯 Objectif : Maîtriser le système de couleurs de Processing, des niveaux de gris jusqu'aux couleurs RGB avec transparence. À la fin de ce chapitre, tu seras capable de colorier n'importe quelle forme avec la couleur exacte que tu veux.

Les niveaux de gris#

La façon la plus simple d'utiliser les couleurs en Processing : une seule valeur entre 0 et 255.

Valeur	Couleur
0	⬛ Noir complet
64	Gris foncé
128	Gris moyen
192	Gris clair
255	⬜ Blanc complet

background(240);        // Fond gris très clair

fill(0);                // Noir
rect(20, 20, 80, 80);

fill(128);              // Gris moyen
rect(120, 20, 80, 80);

fill(255);              // Blanc
rect(220, 20, 80, 80);

💡 Pourquoi 255 et pas 100 ? Parce qu'un octet (8 bits) peut stocker des valeurs de 0 à 255. C'est un standard en informatique que tu retrouveras partout : écrans, images, web...

Les couleurs RGB#

Pour obtenir de vraies couleurs, on utilise le système RGB : Rouge, Vert (Green), Bleu. Chaque composante va de 0 à 255.

fill(rouge, vert, bleu);

Le principe est celui de la synthèse additive : on mélange de la lumière, pas de la peinture ! C'est comme les pixels de ton écran qui combinent trois petites LEDs (rouge, verte, bleue).

Les couleurs primaires#

fill(255, 0, 0);    // 🟥 Rouge pur — que du rouge, pas de vert, pas de bleu
fill(0, 255, 0);    // 🟩 Vert pur
fill(0, 0, 255);    // 🟦 Bleu pur

Les mélanges#

fill(255, 255, 0);  // 🟨 Rouge + Vert = Jaune
fill(0, 255, 255);  //     Vert + Bleu = Cyan
fill(255, 0, 255);  // 🟪 Rouge + Bleu = Magenta/Violet
fill(255, 255, 255); // ⬜ Les trois ensemble = Blanc
fill(0, 0, 0);      // ⬛ Aucun = Noir

⚠️ Attention : mélanger de la lumière, c'est l'inverse de la peinture ! En peinture, rouge + vert = marron. En lumière (RGB), rouge + vert = jaune. C'est surprenant mais c'est comme ça que fonctionnent tous les écrans.

Mémo des couleurs courantes#

Voici les codes RGB des couleurs que tu utiliseras le plus souvent :

Couleur	Code RGB	Astuce pour retenir
⬛ Noir	0, 0, 0	Tout à zéro
⬜ Blanc	255, 255, 255	Tout au max
🟥 Rouge	255, 0, 0	Premier à fond
🟩 Vert	0, 255, 0	Deuxième à fond
🟦 Bleu	0, 0, 255	Troisième à fond
🟨 Jaune	255, 255, 0	Rouge + Vert
🟧 Orange	255, 165, 0	Rouge + un peu de Vert
🟪 Violet	128, 0, 128	Rouge + Bleu (à moitié)
Cyan	0, 255, 255	Vert + Bleu
🦩 Rose	255, 192, 203	Beaucoup de tout, surtout Rouge
🤎 Brun	139, 69, 19	Rouge dominant, peu de Vert
🪨 Gris	128, 128, 128	Les trois égaux (entre noir et blanc)

💡 Astuce : pas besoin de retenir tout ça par cœur ! Processing a un outil intégré pour choisir les couleurs. Va dans Outils > Sélecteur de couleurs et clique sur la couleur que tu veux — il te donne le code RGB.

Où utiliser les couleurs ?#

Les couleurs s'appliquent à trois endroits :

Fonction	Ce qu'elle colorie	Exemple
background(r, g, b)	Le fond du canevas	background(135, 206, 235); → ciel bleu
fill(r, g, b)	L'intérieur des formes	fill(255, 0, 0); → formes rouges
stroke(r, g, b)	Le contour des formes	stroke(0, 0, 255); → contour bleu

Chacune de ces fonctions accepte les mêmes formats :

fill(128);            // 1 valeur  → niveau de gris
fill(255, 0, 0);      // 3 valeurs → couleur RGB
fill(255, 0, 0, 128); // 4 valeurs → couleur RGB + transparence

La transparence#

On peut ajouter un 4e nombre pour la transparence (appelée alpha), de 0 (invisible) à 255 (opaque) :

fill(255, 0, 0, 255);  // Rouge complètement opaque (par défaut)
fill(255, 0, 0, 180);  // Rouge un peu transparent
fill(255, 0, 0, 100);  // Rouge assez transparent
fill(255, 0, 0, 30);   // Rouge presque invisible

C'est très utile pour superposer des formes et créer des effets de profondeur ou de verre :

background(240);

// Cercle bleu
fill(0, 0, 255);
ellipse(180, 150, 150, 150);

// Cercle rouge semi-transparent par-dessus
fill(255, 0, 0, 120);
ellipse(250, 150, 150, 150);

💡 Astuce : la transparence fonctionne aussi avec stroke() :

stroke(0, 0, 0, 100);  // Contour noir semi-transparent

Le type color#

Processing possède un type spécial pour stocker des couleurs dans des variables. C'est pratique quand tu utilises souvent la même couleur :

color rouge = color(255, 0, 0);
color bleuCiel = color(135, 206, 235);

background(bleuCiel);
fill(rouge);
rect(50, 50, 100, 80);

On verra les variables en détail dans un prochain chapitre, mais sache que ça existe !

Mini-exemple : une scène colorée#

Voici un exemple qui combine tout ce qu'on a vu dans les trois chapitres d'introduction — formes, couleurs, remplissage, contour et ordre de dessin :

void setup() {
  size(500, 400);
}

void draw() {
  // Ciel
  background(135, 206, 235);

  // Soleil (jaune, sans contour)
  noStroke();
  fill(255, 220, 50);
  ellipse(420, 60, 80, 80);

  // Sol (vert)
  fill(80, 180, 80);
  rect(0, 300, 500, 100);

  // Maison : mur (marron avec contour)
  stroke(100, 60, 30);
  strokeWeight(2);
  fill(200, 120, 80);
  rect(150, 200, 200, 120);

  // Maison : toit (triangle rouge)
  fill(180, 40, 40);
  triangle(130, 200, 250, 120, 370, 200);

  // Maison : porte (marron foncé)
  fill(100, 60, 30);
  rect(220, 250, 50, 70);

  // Fenêtres (bleu clair)
  fill(180, 220, 255);
  rect(170, 230, 35, 35);
  rect(295, 230, 35, 35);
}

Remarque l'ordre : le ciel en premier (tout derrière), puis le sol, puis la maison, puis les détails par-dessus. Chaque élément recouvre les précédents.

Résumé#

Concept	Syntaxe	Exemple
Niveau de gris	fill(valeur)	fill(128) → gris moyen
Couleur RGB	fill(r, g, b)	fill(255, 0, 0) → rouge
Avec transparence	fill(r, g, b, a)	fill(255, 0, 0, 128) → rouge transparent
Fond du canevas	background(r, g, b)	background(135, 206, 235) → ciel
Stocker une couleur	color nom = color(r, g, b)	color c = color(255, 0, 0);
Sélecteur intégré	Outils > Sélecteur de couleurs	Trouve n'importe quel code RGB

Valeur RGB	Règle
0	Rien de cette composante
128	Moitié
255	Maximum de cette composante
Les 3 égales	Niveau de gris (du noir au blanc)
Les 3 à 255	Blanc
Les 3 à 0	Noir