E1. Materia dal caos

Inigo Quilez, Domain warping, 2002

Obiettivo

Far generare un’immagine e la sua animazione attraverso la definizione dei calcoli necessari per ottenere le componenti di rosso, verde e blu di tutti i pixel, lasciando che il caso o il rumore ne determinino l’aspetto.

Modalità

L’esercitazione si svolge con l’assistenza di OpenCode: il lavoro principale è decidere come calcolare il rosso, il verde e il blu di ogni pixel a partire dai quattro parametri e dai valori casuali, da cui dipendono le richieste all’agente. I valori numerici conviene invece modificarli direttamente nel codice.

Per iniziare, creare la cartella con il comando /crea es1 e sostituire il codice di “sketch.js”, lasciando il commento iniziale, con il codice di base riportato più avanti.

I calcoli potranno usare i quattro parametri definiti nel progetto tixy di Martin Kleppe. Per adattarsi all’immagine di riferimento e rendere la risoluzione indipendente da quella del canvas (come succede nel linguaggio GLSL usato dagli shader) le caratteristiche dei parametri saranno:

• t: scorrere del tempo in secondi (e frazioni di secondo);
• i: indice del pixel da 0 (in alto a sinistra) a, riga dopo riga, 39'999 (in basso a destra);
• x: coordinate del pixel da 0.0 (sinistra) a 1.0 (destra);
• y: coordinate del pixel da 0.0 (alto) a 1.0 (basso).

Risoluzione del canvas

La risoluzione dell’immagine elaborata, ritenuta un buon compromesso fra qualità e velocità di rendering, sarà di 200x200 pixel. Le dimensioni del canvas, su cui l’immagine verrà mostrata, saranno invece di 600x600 pixel.

Codice di base

Il codice dello sketch dovrà essere strutturato in questo modo:

  function tixy(t, i, x, y) {
    // t = secondi (con decimali)
    // i = indice del pixel
    // x = coordinata x da 0.0 a 1.0
    // y = coordinata y da 0.0 a 1.0

    let r = ... // calcolo del rosso  
    let g = ... // calcolo del verde  
    let b = ... // calcolo del blu    

    return [r, g, b];
}

let risoluzione = 200;
let bitmap;

function setup() {
    createCanvas(600, 600);
    pixelDensity(1);
    noSmooth();
    bitmap = createImage(risoluzione, risoluzione);
    bitmap.loadPixels();
    bitmap.pixels.fill(255);
}

function draw() {
    background(0);
    let i = 0;
    let t = millis()/1000;
    let iPix = 0;
    for (let y = 0; y < risoluzione; y++) {
        let yn = y/risoluzione; 
        for (let x = 0; x < risoluzione; x++, i++) {
            let xn = x/risoluzione;
            let col = tixy(t, i, xn, yn);
            bitmap.pixels[iPix++] = col[0];
            bitmap.pixels[iPix++] = col[1];
            bitmap.pixels[iPix++] = col[2];
            iPix++;
        }
    }
    bitmap.updatePixels();
    image(bitmap, 0, 0, width, height);
}

Le uniche parti da modificare saranno quelle evidenziate in bianco, relative ai calcoli delle variabili r, g e b. Almeno una volta dovrà essere usata la variabile t per poter ottenere un’animazione attraverso cambiamenti progressivi di un parametro e quindi dell’immagine, e almeno una volta una delle funzioni random(), randomGaussian() e noise(), per introdurre una componente casuale. Potranno ovviamente essere utilizzate anche ulteriori variabili che semplifichino la comprensione e i calcoli di r, g e b.

Tutto il resto dovrà essere lasciato così com’è.

Vincoli

• tela di 600x600 pixel e immagine elaborata di 200x200 pixel, come nel codice di base;
• codice di base invariato, tranne i calcoli di r, g e b nella funzione tixy(), dove si possono aggiungere altre variabili;
• variabile t usata almeno una volta nei calcoli, per animare l’immagine;
• almeno una delle funzioni random(), randomGaussian() e noise(), con il risultato usato nel calcolo di r, g o b;
• anteprima “preview.png” con un fotogramma rappresentativo del risultato.

Consigli

Un parametro alla volta

Meglio partire con i calcoli di un singolo parametro cromatico, al limite impostando gli altri con lo stesso valore ottenuto:

  let r = (x+y)*128;
let g = r;
let b = r;

Mappatura dei valori

È sempre possibile utilizzare la funzione map() ma, visto che la funzione tixy() viene chiamata 40'000 volte a ogni fotogramma, si consiglia di usare direttamente gli operatori aritmetici tenendo presente che alcuni valori vanno da 0.0 a 1.0 e può quindi essere sufficiente una semplice moltiplicazione:

  let r = x*255;  // rosso da 0 a 255

oppure, al limite, una somma e una moltiplicazione:

  let r = 128 + x*127;  // rosso da 128 a 255

Animazione

Per introdurre variazioni progressive dei valori di rosso, verde o blu, i calcoli devono utilizzare il valore di t che, a differenza di frameCount, contiene sempre i secondi effettivamente trascorsi, anche quando le difficoltà di rendering fanno perdere qualche fotogramma.

Visto che il valore di t tende all’infinito, si consiglia di utilizzare il parametro all’interno di funzioni che restituiscono valori finiti, come sin() e cos(), con un’eventuale moltiplicazione o divisione per aumentare o ridurre la velocità:

  let s = sin(t/3);     // oscillazione rallentata (t/3) fra -1 e 1
let r = 128 + s*128;  // rosso fra 0 (128 + -128) e 256 (128 + 128)

Tenendo conto che i valori restituiti da sin() e cos() vanno da un valore negativo (-1) a uno positivo (1), il risultato può essere usato anche per far oscillare un parametro inizialmente fisso:

  let s = sin(t)*0.1;  // oscillazione da -0.1 a 0.1 
let d = dist(x, y, 0.5, 0.5+s);

Con noise() il tempo può essere passato direttamente come terzo parametro, ad esempio noise(x*5, y*5, t/3), senza bisogno di sin() o cos(): i valori restano comunque fra 0 e 1.

Caso, rumore e caos

Seguendo il percorso della lezione 1, l’immagine può evocare una materia ancora senza forma, come nebbie, fumi, magmi o superfici in movimento, più che figure riconoscibili.

Le funzioni random() e randomGaussian() restituiscono un valore diverso per ogni pixel e a ogni fotogramma: da sole producono la neve dei vecchi televisori, ma sommate a un valore calcolato diventano una grana (Rumore e grana sui pixel) e, confrontate con un valore calcolato, una retinatura (Retinatura stocastica), come nell’esempio più avanti.

La funzione noise() varia invece con continuità, nello spazio e nel tempo: con t come terzo parametro l’immagine si anima, e un valore di noise() usato per spostare le coordinate di un altro deforma le macchie in venature (Rumore che deforma il rumore).

Ogni chiamata a noise() pesa però circa dieci volte più di sin() o di random(), e la funzione tixy() viene chiamata 40'000 volte a ogni fotogramma: con più di due o tre chiamate per pixel l’animazione comincia a rallentare.

Esempi di codici di base

Lo schema per il calcolo dei valori RGB e il sistema tixy si trovano nella lezione 1, nel capitolo Colori e pixel casuali, insieme agli esempi di rumore, grana e retinatura.

Solo per avere qualche punto di partenza, o calcoli da integrare nei propri codici, seguono un po’ di esempi mantenuti prevalentemente statici per semplificarne la comprensione:

  let r = x*255;  // oppure: lerp(0, 255, x)
let g = y*255;
let b = 128;

  let r = (1-x) * 255;  // oppure: lerp(255, 0, x)
let g = x*255;
let b = 0;

  let r = 0;
if (i % 20 < 3) {  // 20px distanza  3px spessore
    r = 255;
}
let g = 0;
let b = 0; 

  let colonne = 20;
let righe = 40;
let s = int(x*colonne) + int(y*righe);
let r = (s % 2) * 255;
let g = 0;
let b = 0;

  let r = random(255);
let g = random(128, 255);
let b = 0;

  let r = (x > random()) ? 255 : 0;  // più bianco a destra
let g = r;
let b = r;

  let n = noise(x*5, y*5, t/3);  // animato grazie a t
let r = n * 255;
let g = 128;
let b = r;

  let n = noise(x*5, y*5, t/3);
let r = (n > 0.5) ?  255 : 0;  // 255 se n>0.5 altrimenti 0
let g = 128;
let b = r;

  let n1 = noise(x*5, y*5, t/3);
let n2 = noise(x*5.2, y*5.2, t/3);  // sfasato
let r = n1*255;
let g = n2*255;
let b = 0;

  let d = dist(x, y, 0.5, 0.5);  // distanza da centro
let r = d * 400;
let g = 0;
let b = 0; 

  let dp1 = dist(x, y, 0.7, 0.3);  // distanza da punto 1
let dp2 = dist(x, y, 0.3, 0.7);  // distanza da punto 2
let r1 = log(1/dp1) * 60;        // luminosità da punto 1
let r2 = log(1/dp2) * 60;        // luminosità da punto 2
let r = (r1 + r2) / 2;           // media fra r1 e r2
let g = 0;  
let b = 0;

  let distCentro = dist(x, y, 0.5, 0.5);
let onde = cos(distCentro * 50);
let r = map(onde, -1,1, 0,255);
let g = 0;
let b = 0;

  let raggio = 0.4;
let distCentro = dist(x, y, 0.5, 0.5);
let r = 0;                              // fuori dal cerchio
if (distCentro < raggio) {              // dentro il cerchio
    r = 255;
} 
let g = 0;
let b = 0; 

  let raggio = 0.4;
let alone = 0.02;                       // alone
let distCentro = dist(x, y, 0.5, 0.5);
let r = 0;                             
if (distCentro < raggio) {              
    r = 255;
} else if (distCentro < raggio+alone) { // sul bordo
    r = map( distCentro-raggio, 0,alone, 255,0);
}
let g = 0;
let b = 0;

  let raggio = 0.4;
let bordo = 0.02;
let distCentro = dist(x, y, 0.5, 0.5);
let distCirconferenza = abs(distCentro - raggio);
let r = 0;                        // fuori o dentro
if (distCirconferenza < bordo) {  // sul bordo
    r = map(distCirconferenza, 0,bordo, 255,0);
}
let g = 0;
let b = 0;

Consegna