Les Couleurs

🎯 Objectif : Maîtriser le système de couleurs de p5.js, 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 p5.js : 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... D'ailleurs, c'est exactement le même système que les couleurs CSS en rgb() !

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 ! Tu peux utiliser n'importe quel color picker en ligne, ou même celui intégré aux DevTools de ton navigateur. Tape "color picker" dans Google et il t'en affiche un directement.

Le lien avec CSS#

Tu connais déjà les couleurs en CSS ? Bonne nouvelle, c'est le même système RGB :

CSS	p5.js	Résultat
color: rgb(255, 0, 0);	fill(255, 0, 0);	🟥 Rouge
background-color: rgb(0, 0, 0);	background(0, 0, 0);	⬛ Noir
border-color: rgb(0, 0, 255);	stroke(0, 0, 255);	🟦 Contour bleu

Les valeurs sont exactement les mêmes — seule la syntaxe change !

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

Stocker une couleur dans une variable#

p5.js possède une fonction color() pour créer des couleurs et les stocker dans des variables. C'est pratique quand tu utilises souvent la même couleur :

let rouge = color(255, 0, 0);
let 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 :

function setup() {
  createCanvas(500, 400);
}

function 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	let nom = color(r, g, b)	let c = color(255, 0, 0);
Sélecteur de couleurs	Color picker Google / DevTools	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