Scrivere sul canvas: keyTyped()

Fare clic sul canvas e scrivere.

    let testo = "";   // il testo scritto finora

function keyTyped() {
    testo += key;
}

function setup() {
    createCanvas( 670, 200 );
    textFont( "Courier New", 24 );
}

function draw() {
    background( 255 );
    text( testo, 20, 20, 630, 160 );
}

Algoritmo

a ogni carattere digitato:             keyTyped()
    aggiungerlo in fondo alla stringa  +=

a ogni fotogramma:                     draw()
    cancellare la tela
    disegnare la stringa

Istruzioni

Funzione chiamata da p5.js quando viene digitato un carattere, con la variabile key che lo contiene: tiene conto delle maiuscole e degli accenti, quindi è il modo più sicuro di ricevere un testo dalla tastiera.

In una pagina più lunga della finestra, la barra spaziatrice fa anche scorrere la pagina. Con return false; in fondo a keyTyped() il browser non esegue l’azione prevista per il tasto.

Variazioni

Il tasto Invio aggiunge la parola "Enter", il nome del tasto. Per andare a capo serve il carattere "\n":

Il tasto di cancellazione passa solo da keyPressed(). Il metodo slice() restituisce la stringa dall’indice 0 fino al penultimo carattere, indicato da -1:

Approfondimenti: