Testo a tasselli

Il testo, disegnato una volta sola in un livello grafico non visibile, viene ricopiato sul canvas a tasselli quadrati, ciascuno preso da una posizione spostata. Lo spostamento cambia nel tempo e da un tassello all’altro, e la parola si increspa come un’onda.

    let livello;

async function setup() {
    createCanvas( 670, 200 );
    let font = await loadFont( "UbuntuCondensed.ttf" );
    livello = createGraphics( 670, 200 );
    livello.textFont( font, 180 );
    livello.text( "onda", 171, 160 );
}

function draw() {
    background( 255 );
    let lato = 30;   // lato dei tasselli
    for (let y = 0; y < height; y = y + lato) {
        for (let x = 0; x < width; x = x + lato) {
            let fase = frameCount * 0.05 + x * 0.01 + y * 0.02;
            let spostamento = sin( fase ) * 40;
            copy( livello, x + spostamento, y, lato, lato,   // origine
                  x, y, lato, lato );                       // destinazione
        }
    }
}
  

  let fase = frameCount * 0.05 + x * 0.01 + y * 0.02;
let spostamento = sin( fase ) * 40;

Lo spostamento orizzontale, fra -40 e 40 pixel, dipende da frameCount e dalla posizione del tassello: i tasselli vicini si spostano in modo simile.

  copy( livello, x + spostamento, y, lato, lato,
      x, y, lato, lato );

Copia la porzione quadrata del livello che parte da x + spostamento (l’origine, prima riga) nel punto x, y del canvas, con le stesse dimensioni (la destinazione, seconda riga). Rispetto a get() seguito da image() è molto più veloce, perché non crea un’immagine nuova per ogni tassello. Il livello non ha sfondo, quindi fuori dalle lettere i tasselli lasciano vedere il bianco del canvas.

Cambiare il valore di lato, oppure togliere x * 0.01 dal calcolo di fase: le righe di tasselli scorrono allora per intero.

Strutturazione dei file:

• CARTELLA-SKETCH
  • index.html
  • sketch.js
  • style.css
  • UbuntuCondensed.ttf