Testo come bitmap

Una parola disegnata in un livello grafico non visibile diventa un’immagine come le altre: i suoi pixel si possono leggere e usare per decidere dove e che cosa disegnare.

    let parola = "eco";

async function setup() {
    createCanvas( 670, 200 );
    let font = await loadFont( "UbuntuCondensed.ttf" );

    let livello = createGraphics( 670, 200 );
    livello.background( 255 );
    livello.textFont( font, 290 );
    livello.text( parola, 150, 180 );

    background( 255 );
    textFont( font, 11 );
    let i = 0;
    for (let y = 0; y < height; y = y + 9) {
        for (let x = 0; x < width; x = x + 6) {
            let colore = livello.get( x, y );
            if (colore[0] < 128) {
                text( parola.charAt( i % parola.length ), x, y );
                i++;
            }
        }
    }
}

Crea un livello grafico delle stesse dimensioni del canvas. Si disegna con le stesse istruzioni del canvas precedute dal suo nome (livello.text()), e non viene mostrato finché non lo si disegna con image().

Legge il colore del pixel del livello nella posizione del carattere: se il rosso, il primo valore, è sotto 128, il pixel appartiene alla parola e lì viene disegnato un carattere.

I caratteri sono quelli della parola stessa, ripetuti in sequenza.

Ridurre il passo dei due cicli (9 e 6) e la dimensione dei caratteri (11) per un riempimento più fitto, oppure sostituire la parola.

Strutturazione dei file:

Approfondimenti: