Tabellone split-flap

Effetto dei tabelloni a palette delle stazioni e degli aeroporti. Ogni carattere avanza solo in un senso, lungo una sequenza fissa: per passare a un altro deve mostrare tutti quelli intermedi, e ogni posizione si ferma in un momento diverso.

    let alfabeto = " ABCDEFGHIJKLMNOPQRSTUVWXYZ";  // caratteri ammessi
let frasi = ["PARTENZA  ROMA", "ARRIVO  MILANO",
             "BINARIO  SETTE"];  // frasi da mostrare
let numeroFrase = 0;  // indice della frase attuale
let celle = [];       // indici dei caratteri visualizzati

function setup() {
    createCanvas( 670, 120 );
    textFont( "Courier New", 36 );
    textAlign( CENTER, CENTER );
    for (let i = 0; i < frasi[0].length; i++) {
        celle[i] = 0;
    }
}

function draw() {
    background( 255 );

    if (frameCount % 300 == 0) {
        numeroFrase = (numeroFrase + 1) % frasi.length;
    }
    let frase = frasi[numeroFrase];  // frase a cui arrivare

    for (let i = 0; i < celle.length; i++) {
        text( alfabeto.charAt( celle[i] ), 75 + i*40, 60 );

        let meta = alfabeto.indexOf( frase.charAt( i ) );
        if (celle[i] != meta && frameCount % 5 == 0) {
            celle[i] = (celle[i] + 1) % alfabeto.length;
        }
    }
}

Algoritmo

a ogni fotogramma:                                                    draw()
    ottenere la frase a cui arrivare cambiandola ogni 300 fotogrammi  if()
    per ogni cella del tabellone:                                     for()
        disegnare il carattere che mostra ora
        cercare nell'alfabeto il carattere che deve raggiungere       indexOf()
        se non è arrivata, avanzare di un passo ogni 5 fotogrammi     if()

Istruzioni

Ogni 300 fotogrammi passa alla frase successiva, ripartendo dalla prima dopo l’ultima.

Il metodo indexOf() restituisce la posizione di un carattere nella stringa alfabeto: è il punto in cui la cella si fermerà.

Finché non ha raggiunto il suo carattere, la cella avanza di una posizione ogni 5 fotogrammi. L’operatore % la riporta allo spazio dopo la "Z".

Variazioni

Con frameCount % (i + 2) al posto di frameCount % 5 ogni cella avanza con una velocità diversa dalle altre.

Per usare le cifre, come nella terza frase qui sotto, vanno aggiunte ad alfabeto. Un carattere che manca fa girare la cella senza fermarsi, perché indexOf() restituisce -1. L’alfabeto può contenere anche caratteri che le frasi non usano e che le celle mostrano solo passando: qui, dopo lo spazio, ▲►▼◄ ripetuto tre volte fa ruotare un triangolo.

Con ▀─▄ al posto di ogni ▲►▼◄, le celle imitano la caduta di una paletta.

Approfondimenti: