Azione secondaria: il respiro

Movimento minore che accompagna l’azione principale e la rende più credibile, senza distogliere l’attenzione. Qui l’azione principale è lo spostamento lento del cerchio, guidato da noise(); il respiro è un’oscillazione regolare del diametro, e ogni tanto, a caso, un breve sussulto lo gonfia.

    let sussulto = 0;   // ampiezza del sussulto, che si spegne poco a poco

function setup() {
    createCanvas( 670, 240 );
}

function draw() {
    background( 255 );
    let x = noise( frameCount * 0.004 ) * width;
    let y = noise( 100 + frameCount * 0.004 ) * height;
    let respiro = sin( frameCount * 0.06 ) * 5;
    if (random() < 0.005) {
        sussulto = 15;
    }
    sussulto *= 0.85;
    circle( x, y, 50 + respiro + sussulto );
}

Algoritmo

a ogni fotogramma:                                                draw()
    calcolare la posizione con il rumore di Perlin                noise()
    calcolare il respiro, un'oscillazione di pochi pixel          sin()
    ogni tanto, a caso, far partire un sussulto                   random()
    ridurre il sussulto un po' a ogni fotogramma
    disegnare il cerchio, ingrandito dal respiro e dal sussulto   circle()

Istruzioni

noise() restituisce valori fra 0 e 1 che cambiano gradualmente: letti in due punti lontani, 0 e 100, danno due andamenti indipendenti per la x e la y.

Il diametro cresce e cala di 5 pixel, con un ciclo completo ogni 105 fotogrammi, poco meno di due secondi.

random() senza parametri restituisce un numero fra 0 e 1, che è minore di 0.005 in media una volta ogni 200 fotogrammi, circa ogni tre secondi.

A ogni fotogramma il sussulto scende all'85% del valore precedente, e in una ventina di fotogrammi è quasi sparito.

Variazioni

Con 0.15 al posto di 0.06 in sin() il respiro diventa affannato.

Con 0.05 al posto di 0.005 i sussulti diventano frequenti, e il cerchio sembra agitato.

Approfondimenti: