Pillole di codice #4 Interazioni con il mouse in Javascript

Dopo aver generato forme (semplici e complesse) ed aver scoperto le basi dell’animazione in questa lezione esploreremo (con una visione molto dall’alto) le interazioni con il mouse in Javascript (sempre aiutati dal framework P5.js).

P5 ci semplifica notevolmente la vita quando dobbiamo interagire con l’oggetto mouse (che ho definito oggetto non a caso) in quanto ci fornisce gia funzioni hook in grado di catturare automaticamente eventi, fornirci valori sullo stato del puntatore (posizione, pulsanti premuti, etc…).

Ad esempio per ricavare la posizione del mouse sul canvas ci torneranno utili queste due variabili globali

mouseX //ci indica la posizione X del mouse sul canvas
mouseY //ci indica la posizione Y del mouse sul canvas

Esistono poi funzioni di hook (che vengono eseguite allo scatenarsi di particolari eventi) legate al mouse. Nell’esempio abbiamo visto questa:

function mouseDragged(){
 /*questa funzione viene richiamata quando si effettua un
drag del mouse (pulsante sinistro del mouse cliccato 
e successivo trascinamento)*/
}

Ma ne esistono molte altre, ne elenco alcune:

function mouseMoved() {
  //funzione richiamata al movimento del mouse
}

function mousePressed() {
  //funzione richiamata al click del mouse
}

function mouseReleased() {
  //funzione richiamata al release del pulsante del mouse
}

Per la lista completa rimando alla documentazione di P5.js.

Ecco il video della pillola

Compila il form qui sotto per ricevere subito nella tua casella email i files della lezione.