Art generatiu amb condicions

Què són les condicions i per què les necessitem?

Fins ara, els nostres sketches feien sempre el mateix o canviaven de manera contínua. Però l'art generatiu sovint necessita prendre decisions: "si el ratolí és a l'esquerra, pinta de blau; si no, de vermell". Les estructures condicionals permeten bifurcar el flux del programa segons si es compleix o no una condició.

• if – executa un bloc si la condició és certa.
• else if – comprova una altra condició si la primera és falsa.
• else – executa un bloc si cap condició anterior s'ha complert.

La sintaxi d'if, else if i else

Una condició s'escriu amb un operador de comparació (===, >, <, >=, <=, !==) i retorna true o false.

if (condició) {
  // codi si la condició és certa
} else if (altraCondició) {
  // codi si la primera és falsa i aquesta és certa
} else {
  // codi si cap condició anterior és certa
}

Exemple bàsic: canviar el color d'un cercle segons la posició X del ratolí.

function draw() {
  background(245);
  if (mouseX < width/3) { fill(255, 0, 0); }
  else if (mouseX < 2*width/3) { fill(0, 255, 0); }
  else { fill(0, 0, 255); }
  ellipse(width/2, height/2, 80, 80);
}

Condicions amb el ratolí: botons i zones

A p5.js v2, mouseButton és un objecte amb propietats booleanes (.left, .right, .center).

function draw() {
  if (mouseIsPressed) {
    if (mouseButton.left) { stroke(0, 0, 255); strokeWeight(4); }
    else if (mouseButton.right) { stroke(255, 0, 0); strokeWeight(10); }
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

Condicions amb el teclat: keyIsDown()

Amb keyIsDown(codiTecla) podem comprovar si una tecla concreta està premuda en aquell instant.

if (keyIsDown(LEFT_ARROW)) { x -= 2; }
else if (keyIsDown(RIGHT_ARROW)) { x += 2; }
if (keyIsDown(SHIFT)) { colorCercle = color(255, 100, 100); }
else { colorCercle = color(100, 150, 255); }

Condicions amb el temps: frameCount i intervals

frameCount compta els fotogrames des de l'inici. Podem utilitzar-lo amb l'operador mòdul (%) per activar coses cada cert temps.

function draw() {
  background(colorFons);
  if (frameCount % 120 === 0) {
    colorFons = color(random(255), random(255), random(255));
  }
}

Exemples creatius pas a pas

if (mouseX < width/3) { /* Pluja */ }
else if (mouseX < 2*width/3) { /* Ennuvolat */ }
else { /* Sol */ }

if (mouseIsPressed && mouseButton.left) { /* Mode explosió */ }
else if (keyIsDown(32)) { /* Mode calma: esborrar */ }
// Mode normal: les partícules es mouen sense intervenció

Consells per dominar les condicions

• Utilitza operadors lògics: && (i), || (o), ! (no) per combinar condicions.
• Evita condicions massa complexes: si un if té moltes branques, considera usar una variable d'estat.
• Pensa en els límits: assegura't que totes les situacions possibles estiguin cobertes per alguna branca.
• Prova les condicions límit: què passa si mouseX === width/2 exactament?
• Utilitza constrain() per assegurar que valors es mantenen dins de rangs abans d'avaluar condicions.