Disegnare testi

Passare il cursore del mouse sopra il canvas.

// height=300 lines=auto
let phrase = "LA POESIA È UNA PITTURA CHE SI MUOVE " +
             "E UNA MUSICA CHE PENSA.  ";
let charIndex = 0; // indice del carattere corrente
let charX = 0;     // posizione del carattere disegnato
let charY = 0;

function setup() {
    createCanvas( 670, 300 );
    background( 255 );
}

function draw() {
    if (dist( charX,charY, mouseX,mouseY ) > 10) {
        let char = phrase.charAt( charIndex );
        text( char, mouseX,mouseY );

        charIndex = (charIndex+1) % phrase.length;
        charX = mouseX;
        charY = mouseY;
    }
}

if (dist( charX,charY, mouseX,mouseY ) > 10) {

Verifica che la distanza fra l'ultimo carattere disegnato e il cursore del mouse sia superiore a 10 pixel.

let char = phrase.charAt( charIndex );

Ricava il carattere della frase alla posizione charIndex.

charIndex = (charIndex+1) % phrase.length;

Incrementa l'indice del carattere da visualizzare facendolo ricominciare da 0 ogni volta che raggiunge il valore massimo (phrase.length).