Lettere sfasate

Oscillazione dei singoli caratteri di una frase, tutti con la stessa velocità e ciascuno in un punto diverso del movimento: la posizione nella stringa diventa uno sfasamento, e la riga di testo prende la forma di un’onda.

    let frase = "ogni lettera oscilla con il suo sfasamento";
let velocita = 0.05;    // quanto cresce l'angolo a ogni fotogramma
let sfasamento = 0.3;   // differenza di angolo fra due lettere vicine
let ampiezza = 40;      // scarto massimo dalla riga di base

function setup() {
    createCanvas( 670, 140 );
    textFont( "Courier New", 24 );
}

function draw() {
    background( 255 );
    for (let i = 0; i < frase.length; i++) {
        let y = 78 + sin( frameCount*velocita + i*sfasamento ) * ampiezza;
        text( frase.charAt( i ), 20 + i*15, y );
    }
}

Algoritmo

a ogni fotogramma:                                                   draw()
    per ogni lettera della frase:                                    for()
        calcolare un angolo, che cresce con il tempo e con l'indice
        ricavare dal seno dell'angolo lo scarto dalla riga di base   sin()
        disegnare la lettera, spostata di quello scarto

Istruzioni

La ripetizione nel tempo: l’angolo aumenta a ogni fotogramma, e si muovono tutte le lettere. La ripetizione nello spazio: l’angolo cresce di sfasamento a ogni carattere della stringa.

La funzione sin() restituisce valori compresi fra -1 e 1. Moltiplicati per ampiezza, diventano uno scarto fino a 40 pixel sopra o sotto la riga di base, a y = 78.

Variazioni

Con sfasamento = 0.05 l’onda si allunga, fino a muovere la frase quasi tutta insieme. Con sfasamento = 1.5 le lettere si disperdono.

Con il segno meno, in frameCount*velocita - i*sfasamento, l’onda scorre verso destra.

Approfondimenti: