4.4. Bucles imbricats
Una tècnica que s’utilitza amb molta freqüència en projectes de computació creativa és la de crear un bucle imbricat dins d’un altre per tenir, no una successió lineal d’elements com hem fet fins ara, sinó un patró bidimensional, amb elements que es repeteixen tant a l’eix horitzontal com al vertical.
Font: elaboració pròpia.
Un primer acostament per dibuixar el patró de la figura 48 podria ser crear un bucle per a una fila (o columna) i repetir-lo totes les vegades que necessitem:
// Fila 0 (0px en Y)
for (let i = 0; i <= width; i += 50) {
circle(i, 0, 25);
}
// Fila 1 (50px en Y)
for (let i = 0; i <= width; i += 50) {
circle(i, 50, 25);
}
// ...i així per a la resta de les files
No obstant això, ja sereu capaços de detectar que segurament hi hagi una manera més eficient i flexible de fer aquesta tasca. És aquí on entren en joc els bucles imbricats:
Font: elaboració pròpia.
Centrem-nos en com hem construït el set de bucles imbricats:
let separation = 50;
let circleSize = separation * 0.5;
for (let i = 0; i <= width; i += separation) {
for (let j = 0; j <= height; j += separation) {
circle(i, j, circleSize);
}
}
Primer, hem definit un parell de variables que emmagatzemen la distància entre els cercles i la seva mida. A continuació, hem creat un bucle de la mateixa manera que ho vam fer abans per dibuixar una fila de cercles: donem un valor d’inici, una condició que aquest valor ha de complir per executar el cos del bucle i una actualització del valor cada vegada que el bucle es completi.
La novetat consisteix en el fet que en el cos del bucle hem creat un altre bucle. En aquest nou bucle creem una nova variable, una nova condició i una nova actualització, que ens ajudaran a dibuixar les columnes del nostre patró.
En el cos d’aquest segon bucle és on aquesta vegada escriurem el codi que dibuixarà els cercles. Per definir les coordenades x i y dels cercles, utilitzarem els valors de les variables i i j que hem definit en els bucles respectius.
D’aquesta manera, entrem en el primer bucle i immediatament entrem en el segon. A la primera iteració i val 0 i j també val 0, per la qual cosa ens dibuixarà el primer cercle a les coordenades (0, 0). A continuació, actualitza el valor de j i, com que es compleix que j <= height, entrem de nou en el segon bucle. Ara j val 50 i i continua valent 0, per la qual cosa ens dibuixarà el segon cercle a les coordenades (0, 50). La variable j es continuarà incrementant fins que j <= height no es compleixi, moment en el qual sortirà del segon bucle i passarà a la fase d’actualització del primer bucle, incrementant i, per la qual cosa passarem a tenir una i amb valor 50 i entrarem de nou en el segon bucle amb una j amb valor 0. D’aquesta manera, ens crearà la segona columna. Aquest procés es repetirà fins a emplenar tot el canvas.
De nou, podem usar la nostra funció eye() per dibuixar els ulls dins dels bucles imbricats:
Font: elaboració pròpia.