Reazioni a mouse e tastiera

Le due forme in cui p5.js comunica le azioni dell’utente:

Clicca sul canvas o premi un tasto della tastiera, dopo un clic.

    let lettera = "a";   // lettera disegnata, cambia con la tastiera

function setup() {
    createCanvas( 670, 240 );
    textAlign( CENTER, CENTER );
}

function draw() {
    background( 255 );
    let dimensione = 60;
    if (mouseIsPressed) {
        dimensione = 120;
    }
    textSize( dimensione );
    text( lettera, mouseX, mouseY );
}

function keyTyped() {
    lettera = key;
}

Algoritmo

a ogni fotogramma:                                                draw()
    se il mouse è premuto, la dimensione è 120, altrimenti 60     mouseIsPressed
    disegnare la lettera nella posizione del mouse                mouseX mouseY

quando si scrive un carattere:                                    keyTyped()
    farlo diventare la lettera da disegnare                       key

Istruzioni

Una variabile di sistema che vale true per tutto il tempo in cui il tasto del mouse resta premuto: la lettera resta grande per tutti i fotogrammi in cui la condizione è vera.

Una funzione di sistema che viene chiamata una volta sola, quando si scrive un carattere: key lo contiene, e la variabile globale lettera lo conserva nei fotogrammi seguenti. A differenza di keyPressed(), non risponde ai tasti che non scrivono, come le frecce o il tasto di cancellazione.

Variazioni

Con fill( map( mouseX, 0, width, 0, 255 ) ) prima di text() il grigio della lettera cambia con la posizione orizzontale del mouse.

Con function keyPressed() al posto di function keyTyped() anche le frecce cambiano la lettera, e al suo posto compare il nome del tasto, come "ArrowRight".

Approfondimenti: