Randomització controlada

L'atzar pur vs l'atzar limitat

La funció random() és una de les més utilitzades en art generatiu. Ens permet generar números impredictibles. Tot i això, si la fem servir de manera absolutament lliure en tots els paràmetres (mida, color RGB, posició), el resultat acostuma a semblar un televisor espatllat.

La clau de l'estètica generativa és restringir els paràmetres de l'atzar.

• random() (sense arguments): retorna un valor entre 0 i 1.
• random(max): retorna un valor entre 0 i el número màxim.
• random(min, max): retorna un valor dins d'un rang específic (Molt útil!).

Aturar l'epilèpsia: noLoop()

Per defecte, la funció draw() s'executa 60 vegades per segon. Si hi poses un random(), la pantalla parpellejarà frenèticament. Per generar una imatge fixa aleatòria, tenim dues opcions:

1. Dibuixar tota la imatge dins del setup() i deixar el draw() buit.
2. Posar la instrucció noLoop() dins del setup(). Això farà que el draw() s'executi només una vegada.

Exemple: Bosc de línies (Atzar limitat al rang Y)

function setup() {
  createCanvas(400, 200);
  noLoop(); // Dibuixa només un cop!
}

function draw() {
  background(245);
  stroke(0, 50);
  strokeWeight(2);
  
  for(let i = 0; i < 300; i++) {
    let x = random(width);
    let y1 = random(height/2, height); // Comença sempre a la meitat inferior
    let y2 = y1 - random(20, 80);      // Longitud controlada
    line(x, y1, x, y2);
  }
}

Limitar els colors amb Llistes (Arrays)

La millor manera de tenir atzar en el color sense crear "fang" visual és crear una paleta tancada. Podem fer-ho utilitzant un Array (una llista entre claudàtors []). Si li passem una llista al random(), escollirà un element a l'atzar.

// Definim una paleta de colors (en format hexadecimal)
let paleta = ['#FF595E', '#FFCA3A', '#8AC926', '#1982C4', '#6A4C93'];

function setup() {
  createCanvas(320, 200);
  noLoop();
  noStroke();
}

function draw() {
  background(30);
  for(let x = 20; x < width; x += 40) {
    for(let y = 20; y < height; y += 40) {
      fill(random(paleta)); // Tria un color de la llista
      let mida = random(10, 35); // Mida entre 10 i 35 píxels
      circle(x, y, mida);
    }
  }
}

Atzar orgànic: noise()

Mentre que random() fa salts completament impredictibles, p5.js ens ofereix la funció noise() (Perlin Noise). Aquesta funció genera números aleatoris però que estan suaument connectats entre ells. És ideal per simular fenòmens naturals com el contorn de les muntanyes, l'onatge o la textura de la fusta.

// Codi per generar el terreny amb noise()
let temps = 0; // Variable per avançar pel 'paisatge' de noise

for(let x = 0; x < width; x += 5) {
  // noise() sempre retorna un valor entre 0 i 1. 
  // Fem servir map() per convertir-ho al rang d'alçada (50 a 150)
  let y = map(noise(temps), 0, 1, 50, 150);
  rect(x, y, 4, height - y);
  
  temps += 0.08; // Si puges aquest número, el terreny serà més abrupte
}