Commençons pas les nuances de gris…
p5.js permet d’utiliser 256 nuances de gris. 0 , l’absence de lumière = noir, 255, pleine lumière = blanc.
Toutes les valeurs comprises entre 0 et 255 sont utilisables.

function setup() {
createCanvas(800, 600);
noStroke();
}
function draw() {
background(0);
fill(255);
rect(10, 10, 600, 100);
fill(200);
rect(20, 100, 600, 100);
fill(100);
rect(30, 190, 600, 100);
}

Il est possible d’utiliser les paramètres RVB pour les couleurs.

function setup() {
createCanvas(800, 600);
noStroke();
}
function draw() {
background(0, 26, 51); 
fill(255, 0, 0); 
ellipse(130, 180, 200, 200);
fill(0, 255, 0); 
ellipse(230, 160, 200, 200);
fill(0, 0, 255);
ellipse(280, 220, 200, 200);
}

Ajouter un 4e paramètre permet d’utiliser la transparence

function setup() {
createCanvas(800, 600);
noStroke();
}
function draw() {
background(0, 26, 51); 
fill(255, 0, 0, 200); 
ellipse(130, 180, 200, 200);
fill(0, 255, 0, 100); 
ellipse(230, 160, 200, 200);
fill(0, 0, 255, 100);
ellipse(280, 220, 200, 200);
}

Exercice Robot

Exo 1