Documentation

Couleurs

Remplissage, contour, transparence.

Remplissage et contour

fill(255, 0, 0);     // intérieur rouge
stroke(0);           // contour noir
strokeWeight(3);     // épaisseur du trait en pixels
circle(300, 300, 100);

noFill();            // aucun remplissage ; seulement le contour
noStroke();          // aucun contour ; seulement le remplissage

Ces réglages sont persistants : une fois posés, ils s'appliquent à toutes les formes suivantes jusqu'au prochain changement.

Les notations

fill(255, 0, 0);        // RVB ; trois valeurs de 0 à 255
fill(128);              // niveau de gris
fill(0);                // noir
fill(255);              // blanc
fill('turquoise');      // couleur nommée CSS
fill('#c35272');        // hexadécimal
fill(255, 0, 0, 127);   // RVB + alpha
fill(255, 127);   // niveau de gris + alpha

Toutes ces notations fonctionnent avec fill(), stroke() et background() indifféremment.

Liste des couleurs nommées : CSS Color List.

Variable de couleur

let fond;
let accent;

function setup() {
  createCanvas(600, 600);
  fond = color(20, 20, 30);
  accent = color('#e8543f');
}

function draw() {
  background(fond);
  fill(accent);
  circle(300, 300, 200);
}

color() doit être appelé après la création du canvas ; le déclarer en haut du fichier mais l'assigner dans setup().

HSB ; teinte, saturation, luminosité

function setup() {
  createCanvas(600, 600);
  colorMode(HSB, 360, 100, 100);   // teinte 0–360, saturation 0–100, luminosité 0–100
}

function draw() {
  background(0, 0, 95);
  noStroke()
  for (let i = 0; i < 12; i++) {
    fill(i * 30, 70, 90);          // seule la teinte change
    rect(i * 50, 0, width/12, height);
  }
}

Hteinte ; position sur la roue chromatique (0–360)

Ssaturation ; du gris à la couleur pure

Bluminosité ; du noir à la couleur pleine

← formes boucles →