Lettere che si assestano

Fare clic sul canvas e scrivere.

    let lettere = [];   // le lettere scritte, una per elemento
let nascite = [];   // il fotogramma in cui è stata scritta ogni lettera
let colonne = 28;   // colonne della griglia

function keyTyped() {
    if (key != ENTER) {
        lettere.push( key );
        nascite.push( frameCount );
    }
    return false;
}

function keyPressed() {
    if (key == BACKSPACE) {
        lettere.pop();
        nascite.pop();
    }
}

function setup() {
    createCanvas( 670, 240 );
    textFont( "Courier New", 30 );
    textAlign( CENTER, CENTER );
}

function draw() {
    background( 255 );
    for (let i = 0; i < lettere.length; i++) {
        let x = 40 + (i % colonne) * 22;
        let y = 40 + floor( i / colonne ) * 40;
        let eta = frameCount - nascite[i];
        let scarto = sin( eta * 0.5 ) * max( 30 - eta, 0 );
        text( lettere[i], x, y + scarto );
    }
}

Algoritmo

a ogni carattere digitato:                                   keyTyped()
    aggiungerlo all'array delle lettere                      push()
    annotare il fotogramma attuale nell'array delle nascite  push()

a ogni fotogramma:                                           draw()
    per ogni lettera:                                        for()
        ricavare colonna e riga dall'indice                  %, floor()
        calcolare la sua età, in fotogrammi
        oscillare con un'ampiezza che si riduce con l'età    sin(), max()
        disegnare la lettera

Istruzioni

Il metodo push() aggiunge un elemento in fondo all’array. I due array procedono insieme: con lo stesso indice si trovano una lettera e il fotogramma in cui è stata scritta.

La griglia si ricava dall’indice: il resto della divisione per il numero di colonne dà la colonna, la parte intera del risultato dà la riga.

La variabile eta conta i fotogrammi passati da quando la lettera è stata scritta. L’ampiezza dell’oscillazione parte da 30 pixel e scende a ogni fotogramma, e max(), che restituisce il maggiore fra i due valori, la ferma a 0.

Variazioni

Con textSize( 30 + max( 30 - eta, 0 ) ); prima di text() la lettera nasce grande.

Con fill( max( 255 - eta * 5, 0 ) ); prima di text() la lettera compare dal bianco, come se affiorasse dal foglio.

Approfondimenti: