2. Primers passos: formes i colors

2.3. Estructura d’un programa en P5.js

L’estructura bàsica d’un programa escrit en P5.js és la següent:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(200);
  ellipse(200, 200, 50, 50);
}

Podem observar que el codi està organitzat en dues funcions: setup() i draw(). La funció setup() s’executa una única vegada en iniciar-se el programa. En aquesta escriurem el codi que s’ocupi d’establir l’estat inicial del nostre programa, com per exemple definir la mida del nostre canvas (l’àrea on crearem els nostres dibuixos).

D’altra banda, tot el codi que realment s’ocupi de dibuixar el posarem dins de la funció draw(). Dins d’aquesta dibuixarem les nostres formes, textos o imatges. A diferència de setup(), la funció draw() s’executa en bucle contínuament, tret que li indiquem el contrari. Per defecte, s’executa a 60 FPS (fotogrames per segon).

Dins de les funcions setup() i draw() tenim diferents mètodes, com createCanvas(), background() o ellipse().Aquests mètodes són propis de P5.js i dins dels parèntesis reben paràmetres la finalitat dels quals depèn de quin mètode utilitzem.

Haureu pogut observar la peculiar sintaxi que té el nostre codi, amb parèntesis, claus o punts i coma. En el cas de setup() i draw(), en ser funcions es defineixen amb la paraula clau function seguida del nom de la funció, uns parèntesis i unes claus que tanquen el contingut de la funció. Més endavant, a l’assignatura, veurem amb detall les funcions i crearem les nostres pròpies, però de moment les utilitzarem tal com es mostren a l’exemple.

Amb la finalitat de mantenir el nostre codi ordenat, és important que tot el codi que vagi dins d’una funció el tabulem (en programació s’usa molt l’anglicisme indentar en lloc de tabular) perquè visualment siguem capaços de distingir d’un cop d’ull on comença i on acaba una funció.

També haureu observat que cadascuna de les instruccions dins de les funcions acaben amb un punt i coma. En JavaScript, i per extensió també en P5.js, els punts i coma són opcionals, però és molt recomanable que els posem, ja que no fer-ho pot ser font de maldecaps més endavant.