Valori casuali memorizzati

Conservati in un array, possono cambiare di poco a ogni fotogramma ripartendo ognuno dal valore precedente, quindi senza i salti di un random() ricalcolato da capo in draw(). Il procedimento vale per qualsiasi proprietà geometrica o cromatica.

    let frase = "ogni lettera ha la sua inclinazione";
let angoli = [];  // per ogni lettera, l'angolo attuale

function setup() {
    createCanvas( 670, 120 );
    textFont( "Courier New", 28 );
    textAlign( CENTER, CENTER );
    for (let i = 0; i < frase.length; i++) {
        angoli[i] = random( -0.4, 0.4 );
    }
}

function draw() {
    background( 255 );
    for (let i = 0; i < frase.length; i++) {
        angoli[i] += random( -0.03, 0.03 );
        angoli[i] = constrain( angoli[i], -1.6, 1.6 );
        push();
        translate( 46 + i*17, 60 );
        rotate( angoli[i] );
        text( frase.charAt( i ), 0, 0 );
        pop();
    }
}

Algoritmo

una volta sola, all'avvio:                                        setup()
    per ogni lettera, estrarre a caso un angolo                   random()
    memorizzarlo in un array, con lo stesso indice della lettera

a ogni fotogramma:                                                draw()
    per ogni lettera:                                             for()
        cambiare di poco il suo angolo, a caso                    random()
        tenerlo fra l'angolo minimo e il massimo                  constrain()
        ruotare la lettera intorno al suo centro e disegnarla     rotate()

Istruzioni

L’angolo memorizzato cresce o diminuisce al massimo di 0.03 radianti, poco meno di due gradi, e il risultato prende il suo posto nell’array: il fotogramma successivo riparte da lì.

constrain() restituisce il valore ricevuto se è compreso fra il minimo e il massimo, altrimenti il limite più vicino: gli angoli restano fra -1.6 e 1.6 radianti, poco più di 90 gradi da una parte e dall’altra. All’avvio sono compresi fra -0.4 e 0.4, circa 23 gradi, e poi si allargano col tempo.

L’origine si sposta nel centro della lettera, che rotate() fa ruotare intorno a quel punto e text() disegna in 0, 0. Le lettere sono distanziate di 17 pixel, a partire da 46 pixel dal bordo sinistro della tela.

Variazioni

In rotate(), con random( -0.4, 0.4 ) al posto di angoli[i] le lettere cambiano inclinazione a ogni fotogramma, con salti improvvisi.

Con random( -0.1, 0.1 ) le variazioni diventano più rapide e nervose, e in una decina di secondi molte lettere arrivano all’inclinazione massima.

Gli stessi valori possono controllare anche una proprietà cromatica. Con questa riga prima di text() le lettere inclinate in senso orario diventano più chiare:

Approfondimenti: