Lettere reattive

Passare il cursore del mouse sopra il canvas.

    let frase = "le lettere crescono vicino al cursore";

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

function draw() {
    background( 255 );
    for (let i = 0; i < frase.length; i++) {
        let x = 29 + i*17;
        let distanza = dist( x, height/2, mouseX, mouseY );
        if (distanza < 100) {
            textSize( map( distanza, 0, 100, 80, 18 ) );
        } else {
            textSize( 18 );
        }
        text( frase.charAt( i ), x, height/2 );
    }
}

Algoritmo

a ogni fotogramma:                                       draw()
    per ogni lettera della frase:                        for()
        calcolare la sua posizione in base all'indice
        misurare la distanza dal cursore                 dist()
        se è entro 100 pixel, più è vicina più è grande  if(), map()
        altrimenti, darle la dimensione minima
        disegnare la lettera

Istruzioni


  textSize( map( distanza, 0, 100, 80, 18 ) );

Dentro l’if() la distanza è compresa fra 0 e 100, e la funzione map() la converte in una dimensione compresa fra 80, sul cursore, e 18, a 100 pixel di distanza.

Con true come ultimo parametro il risultato di map() non esce dai due estremi, e oltre i 100 pixel resta 18: l’if() diventa allora una riga sola.
  textSize( map( distanza, 0, 100, 80, 18, true ) );

Variazioni

Con fill( map( distanza, 0, 100, 0, 255, true ) ); prima di text() la frase si legge solo intorno al cursore.

Anche la posizione può dipendere dalla distanza:
  let y = height/2 /*1*/+ map( distanza, 0, 100, 40, 0, true )/**/;
text( frase.charAt( i ), x, y );

Con un if() può cambiare il carattere stesso:


  if (distanza < 50) {
    text( "*", x, height/2 );
} else {
    text( frase.charAt( i ), x, height/2 );
}

Lettere reattive

Approfondimenti:

Correlati: