El poder de la repetició

Per què necessitem repetir?

Imagina que vols dibuixar 50 cercles en fila. Sense bucles hauries d'escriure 50 línies de codi, una per a cada cercle. Amb un bucle, ho fas en 3 línies. La repetició no només estalvia feina, sinó que obre la porta a crear patrons complexos i art generatiu.

El bucle for

L'estructura bàsica d'un bucle for en JavaScript té tres parts:

• Inicialització: let i = 0; – crea una variable comptador.
• Condició: i < 10; – mentre sigui certa, el bucle continua.
• Actualització: i++ – incrementa el comptador a cada volta.

for (let i = 0; i < 10; i++) {
  // aquest codi s'executa 10 vegades
  // i val 0, 1, 2, ... , 9
}

Exemple pràctic: dibuixem 10 cercles en fila horitzontal.

for (let i = 0; i < 10; i++) {
  let x = 30 + i * 45;  // espaiat de 45 píxels
  fill(100, 150, 255);
  ellipse(x, 60, 35, 35);
}

La variable i pren valors 0, 1, 2... fins a 9. Multiplicant per 45 obtenim posicions separades uniformement.

Graelles: bucles niats

Per crear una graella (files i columnes), posem un bucle dins d'un altre. El bucle exterior controla les files (eix Y) i l'interior les columnes (eix X).

for (let fila = 0; fila < 5; fila++) {
  for (let col = 0; col < 7; col++) {
    let x = 30 + col * 40;
    let y = 30 + fila * 40;
    fill(col * 35, 100, fila * 50);
    rect(x, y, 30, 30);
  }
}

Truc: Utilitza els índexs fila i col per variar el color, la mida o la forma de cada casella. Així cada element és únic!

Patrons circulars

Amb una mica de trigonometria podem col·locar formes al llarg d'un cercle. La fórmula màgica per a un angle a (en radians) i un radi r és:

• x = centreX + cos(a) * r
• y = centreY + sin(a) * r

let cx = width / 2, cy = height / 2;
for (let i = 0; i < 12; i++) {
  let angle = map(i, 0, 12, 0, TWO_PI);
  let x = cx + cos(angle) * 100;
  let y = cy + sin(angle) * 100;
  fill(255, 150, 0);
  ellipse(x, y, 25, 25);
}

map(i, 0, 12, 0, TWO_PI) converteix l'índex 0..11 en un angle de 0 a 2π radians (volta completa).

Variar paràmetres amb el comptador

La veritable potència dels bucles rau en fer servir la variable comptador per modificar propietats visuals a cada iteració: color, mida, rotació, transparència...

for (let i=0; i<10; i++) {
  let mida = map(i,0,9,10,80);
  ellipse(100,100,mida,mida);
}

for (let i=0; i<20; i++) {
  let x = 10 + i*9;
  fill(i*12, 255-i*10, 200);
  rect(x, 50, 8, 100);
}

Experimenta: Canvia els valors multiplicadors dins del fill() per obtenir paletes de colors completament diferents.

Transparència i superposició creativa

Quan dibuixem moltes formes amb transparència (alfa al fill), la superposició crea nous colors i efectes visuals molt interessants.

noStroke();
for (let i = 0; i < 15; i++) {
  let x = 30 + i * 18;
  fill(255, 0, 0, 80);    // vermell transparent
  ellipse(x, 70, 50, 50);
  fill(0, 0, 255, 80);    // blau transparent
  ellipse(x + 10, 100, 50, 50);
  fill(0, 255, 0, 80);    // verd transparent
  ellipse(x - 5, 130, 50, 50);
}

Exemples creatius pas a pas

for (let i=0; i<30; i++) {
  let angle = map(i,0,30,0,TWO_PI);
  let r1=20, r2=120;
  let x1=cx+cos(angle)*r1, y1=cy+sin(angle)*r1;
  let x2=cx+cos(angle)*r2, y2=cy+sin(angle)*r2;
  stroke(255,200,0,180); strokeWeight(2);
  line(x1,y1,x2,y2);
}

let cols=8, rows=6;
let w=width/cols, h=height/rows;
for (let i=0; i

colorMode(HSB, 360, 100, 100, 100);
let cx=width/2, cy=height/2;
noFill();
for (let i=0; i<30; i++) {
  let r = i*8;
  let hue = map(i,0,30,0,360);
  strokeWeight(2);
  stroke(hue, 80, 60, 150);
  ellipse(cx, cy, r*2, r*2);
}