2. Primers passos: formes i colors

2.4. Formes bàsiques i coordenades

El primer que hem de fer per començar a dibuixar és crear el nostre canvas o llenç. Per a això, dins de la funció setup() podem utilitzar el mètode createCanvas() de la manera següent:

createCanvas(400, 200);

El mètode createCanvas() entre els parèntesis accepta dos paràmetres: la mida del llenç en la dimensió x i la seva mida en la dimensió y o, cosa que és el mateix, l’amplària i l’alçària. En el cas del codi anterior, el canvas tindrà 400 px d’amplària i 200 px d’alçària.

Una vegada que tenim el nostre llenç, podem començar a dibuixar algunes formes dins d’aquest. P5.js compta amb mètodes per dibuixar formes bàsiques com línies, quadrats, rectangles o cercles. Podem escriure aquests mètodes dins del draw(). Depenent de la forma que vulguem dibuixar, haurem d’incloure uns paràmetres o uns altres. Per exemple, per dibuixar una línia necessitem especificar les coordenades dels dos punts que la defineixen, mentre que per dibuixar un rectangle especifiquem les coordenades de la cantonada superior esquerra, l’amplària i l’alçària, en lloc de les coordenades dels seus quatre punts.

Quan dibuixem en el nostre canvas, la coordenada x és la distància des de la vora esquerra del canvas i la coordenada y és la distància des de la part superior. Si definim una coordenada com un punt (x, y) i el nostre canvas té 400 × 400 px, la cantonada superior esquerra serà la coordenada (0, 0), el centre del canvas serà la coordenada (200, 200) i la cantonada inferior dreta serà la coordenada (399, 399). Per què no (400, 400)? Perquè el punt (0, 0) és part del nostre canvas, comencem a comptar des del zero, alguna cosa que programant és molt comuna.