Campi di flusso con noise()

Direzioni assegnate a ogni punto della tela, qui calcolate con noise(). Un punto in movimento avanza a piccoli passi, ognuno nella direzione del luogo in cui si trova: nello schema le frecce indicano le direzioni, le linee i percorsi che ne risultano.

    let punti = [];
let scala = 0.004;

function setup() {
    createCanvas( 670, 320 );
    for (let i=0;  i<800;  ++i) {
        punti[i] = createVector( random(width), random(height) );
    }

    background( 255 );
    stroke( 0, 25 );
}

function draw() {
    for (let i=0;  i<punti.length;  ++i) {
        let punto = punti[i];
        let angolo = noise( punto.x*scala, punto.y*scala ) * 12;
        let passo = p5.Vector.fromAngle( angolo );
        line( punto.x, punto.y, punto.x + passo.x, punto.y + passo.y );
        punto.add( passo );
    }
}
  

  punti[i] = createVector( random(width), random(height) );

Ogni punto è un vettore con le coordinate x e y, in una posizione iniziale casuale.

  let angolo = noise( punto.x*scala, punto.y*scala ) * 12;

In ogni punto della tela noise() restituisce un valore che viene usato come angolo, in radianti: punti vicini hanno direzioni simili.

  let passo = p5.Vector.fromAngle( angolo );

p5.Vector.fromAngle() crea un vettore lungo un pixel nella direzione indicata dall’angolo: è lo spostamento del punto.

  line( punto.x, punto.y, punto.x + passo.x, punto.y + passo.y );
punto.add( passo );

Ognuno degli 800 punti traccia il proprio spostamento e poi lo somma alla propria posizione: le linee seguono le stesse correnti e finiscono per addensarsi.

Provare a cambiare scala e il moltiplicatore 12, che decide quante volte le direzioni possono girare su sé stesse.