Color i transparència

El problema del RGB per als artistes

Fins ara hem fet servir colors barrejant Vermell (Red), Verd (Green) i Blau (Blue). Si et demano que programis un color "blau marí apagat", quant de vermell i verd necessites? És molt poc intuïtiu!

En disseny i art fem servir un model molt millor: HSB (Hue, Saturation, Brightness).

• H (Hue / To): Quin color és? (0-360 com els graus d'un cercle cromàtic).
• S (Saturation / Saturació): És molt viu o grisós? (0-100%).
• B (Brightness / Brillantor): És clar o fosc? (0-100%).

La funció colorMode()

Per dir-li a p5.js que volem treballar en HSB en lloc de RGB, utilitzem la funció colorMode() dins del setup(). Li indiquem els valors màxims per H, S i B (normalment 360, 100, 100).

function setup() {
  createCanvas(400, 400);
  // Activem HSB: To(0-360), Saturació(0-100), Brillantor(0-100)
  colorMode(HSB, 360, 100, 100); 
}

Exemple: L'espectre de colors

Fixa't com de fàcil és dibuixar un arc de Sant Martí variant només el primer número (el To) dins d'un bucle!

for (let i = 0; i < width; i++) {
  // Mapegem la posició X (0 a width) a graus de color (0 a 360)
  let h = map(i, 0, width, 0, 360);
  fill(h, 80, 90); // To variable, saturació 80%, brillantor 90%
  rect(i, 0, 2, height);
}

Transparència: El canal Alfa

Tant si treballes en RGB com en HSB, sempre pots afegir un quart número a les funcions fill() o stroke(). Aquest número controla l'opacitat (Alfa).

colorMode(HSB, 360, 100, 100, 100); // 4t paràmetre: alfa màxim (100)

fill(0, 80, 90, 50);   // Vermell transparent (50%)
ellipse(120, 100, 100, 100);

fill(120, 80, 90, 50); // Verd transparent (50%)
ellipse(180, 100, 100, 100);

fill(240, 80, 90, 50); // Blau transparent (50%)
ellipse(150, 150, 100, 100);

Ajuntant-ho tot: Color Generatiu

Quan combines els bucles (Tema 3) amb els colors HSB i la transparència, els resultats semblen professionals gairebé sense esforç. Al modificar el "Hue" (To) seqüencialment, garantim transicions de color perfectes.

translate(width/2, height/2);
noStroke();
for(let i=0; i<30; i++){
  fill(i*12, 80, 90, 40);
  ellipse(0, 40, 70, 90);
  rotate(TWO_PI/30);
}

noFill();
for(let i=0; i<50; i++){
  let h = map(i,0,50, 200,300);
  stroke(h, 70, 80, 30);
  strokeWeight(3);
  let x = width/2 + sin(i*0.2)*40;
  let y = 20 + i*4;
  ellipse(x, y, 100, 40);
}