El llenç digital

Què és p5.js?

p5.js és una biblioteca de JavaScript creada per facilitar la programació visual al navegador. Va néixer amb l'objectiu de fer accessible la creació d'art digital, animacions i experiències interactives a tothom, independentment del seu nivell tècnic.

Amb molt poques línies de codi podem dibuixar formes, aplicar colors, respondre al ratolí, crear patrons i fins i tot utilitzar intel·ligència artificial. Nosaltres començarem des de zero: amb el llenç digital.

Les dues funcions màgiques

Tot programa en p5.js gira al voltant de dues funcions especials:

• setup() – S'executa una sola vegada al començar. Aquí configurem el llenç (mida, color de fons).
• draw() – S'executa en bucle continu (normalment 60 vegades per segon). Dins seu dibuixem i actualitzem l'animació.

Exemple mínim: creem un llenç de 400×300 píxels i pintem el fons de gris clar.

function setup() {
  createCanvas(400, 300);  // amplada, alçada
  background(220);         // gris clar (0-255)
}

function draw() {
  // per ara res
}

background(220) pinta tot el llenç d'un color. Si el poses a draw(), esborra el fotograma anterior, útil per animar.

El sistema de coordenades

El llenç digital funciona amb coordenades (x, y). L'origen (0,0) és la cantonada superior esquerra. L'eix X creix cap a la dreta i l'eix Y cap avall. És diferent de les matemàtiques, però fàcil de recordar si penses en com llegeixes un text.

Dibuixar formes bàsiques

p5.js ofereix funcions senzilles per a figures geomètriques. Les més importants al començament:

ellipse(100, 100, 120, 80);

rect(50, 60, 100, 80);

Per defecte, el·lipses i rectangles es posicionen pel seu centre (mode CENTER). Més endavant podrem canviar-ho.

Color, traç i farciment

Controlar l'aparença de les formes és essencial. Utilitzem:

• fill(r, g, b, [alfa]) – color d'ompliment (RGB, de 0 a 255).
• stroke(r, g, b) – color del contorn.
• strokeWeight(gruix) – amplada del traç en píxels.
• noFill() / noStroke() – desactiva farciment o contorn.
• background(r, g, b) – pinta el fons.

fill(255, 200, 0);        // groc
stroke(200, 0, 200);      // magenta
strokeWeight(4);
ellipse(100, 100, 100, 100);

fill(0, 150, 255, 150);   // blau semitransparent
noStroke();
rect(160, 50, 100, 100);

L'ordre importa

Les formes es dibuixen una sobre l'altra segons l'ordre del codi. La darrera forma dibuixada queda al damunt.

fill(200,0,0); ellipse(70,70,100,100);   // vermell al fons
fill(0,0,200); ellipse(130,130,100,100); // blau al mig
fill(0,200,0); ellipse(100,100,80,80);   // verd al davant

Exemples creatius pas a pas

Apliquem tot l'après en petites composicions artístiques.

background(10,10,40);      // cel fosc
fill(255,255,200); noStroke();
ellipse(50,40,4,4);        // estrelles petites
ellipse(120,30,5,5);
...
fill(255,220,50);
ellipse(230,120,60,60);    // lluna
fill(20,20,60);
rect(0,140,300,60);        // terra

// Cap
fill(150); rect(60,20,80,60);
// Ulls
fill(255); ellipse(80,50,20,20);
...
// Boca
fill(255,0,0); rect(85,80,30,10);
// Cames
rect(40,100,30,60);
rect(130,100,30,60);