Vai al contenuto

ūüď£ sulla piattaforma e-learning di Codice Inutile sono disponibili i miei corsi: Introduzione alla programmazione e ūüÜē Introduzione all'Arte Generativa

Eventi: mousePressed() e keyPressed()

ūüď¨ Per rimanere aggiornato sui prossimi articoli e su altri contenuti di creative coding, puoi iscriverti a questa newsletter. Per farlo √® sufficiente inserire il tuo indirizzo e-mail nel campo qui sotto.

Puoi leggere l'archivio qui. Powered by TinyLetter

Un po’ alla volta stiamo rendendo i nostri sketch sempre pi√Ļ interattivi grazie ai movimenti del mouse. Per proseguire il percorso della scorsa lezione e prima¬†di imparare a creare e utilizzare a nostro piacere delle variabili, argomento che verr√† trattato la prossima settimana, oggi parliamo di eventi.

Per fare un breve recap: abbiamo imparato¬†come utilizzare i blocchi di codice setup() e draw() per suddividere i nostri sketch in due parti e far s√¨ che parte del nostro codice sia eseguito solo all’avvio del programma e una parte, invece, venga processata in un loop costante. Grazie a questo, abbiamo anche visto che Processing √® in grado di restituirci in ogni momento la posizione¬†X e Y del mouse e di come possiamo usare questi dati per¬†arricchire i nostri sketch.

Oltre al semplice movimento del mouse possiamo fare in modo che i nostri sketch riconoscano anche altri input disponibili comunemente su un computer: la pressione e il rilascio di un tasto del mouse o della tastiera.

Eventi

Comportandosi in modo simile a setup() e draw(), gli eventi sono descritti, anch’essi, come blocchi di codice. La loro particolarit√† √® che il codice¬†scritto al loro interno¬†non viene eseguito automaticamente all’avvio del programma ma¬†¬†al verificarsi di¬†una condizione specifica come, per l’appunto, il click del mouse. A differenza della funzione draw(), le porzioni di codice all’interno degli eventi non vengono eseguiti in loop ma una volta soltanto.

Eventi del mouse: mousePressed() e mouseReleased()

La sintassi √® simile a quella che abbiamo gi√† visto; per il momento ignoriamo il significato di¬†void e facciamo attenzione all’utilizzo delle maiuscole.

/*
 * Eventi mousePressed() e mouseReleased()
 * by Federico Pepe
 * http://blog.federicopepe.com
 */

void setup() {
  size(500, 500);
  background(255);
}

void draw() {
}

void mousePressed() {
  background(255, 0, 0);
}

void mouseReleased() {
  background(255);
}

Analizziamo insieme questo semplice programma:

  • dentro setup() impostiamo la grandezza della finestra 500x500px e il colore di sfondo bianco.
  • la funzione draw() per il momento non contiene alcuna riga di codice
  • il codice contenuto all’interno di mousePressed() verr√† eseguito al click del mouse e imposter√† rosso come colore di sfondo.
  • nel momento in cui verr√† rilasciato il tasto del mouse, verr√† eseguita la funzione mouseReleased() che ripristiner√† il bianco come background.

Nel Reference di Processing trovate anche gli altri eventi legati al mouse:

√ą inutile che mi soffermi ora sul fare un esempio per ciascuno di essi: una volta capito il funzionamento √® abbastanza intuitivo capire come usare le altre. Vi invito ugualmente a¬†sperimentarle tutte ed, eventualmente, lasciare un commento qualora riscontraste dei problemi.

Eventi della tastiera: keyPressed() e keyReleased()

Allo stesso modo e con funzioni simili è possibile determinare se un tasto della tastiera è stato premuto oppure no:

/*
 * Eventi keyPressed() e keyReleased()
 * by Federico Pepe
 * http://blog.federicopepe.com
 */
 
void setup() {
  size(500, 500);
  background(255);
}

void draw() {
}

void keyPressed() {
  background(255, 0, 0);
}

void keyReleased() {
  background(255);
}

Se vi state chiedendo se √® possibile determinare¬†quale¬†tasto √® stato premuto la risposta √® ovviamente s√¨. Per realizzare uno sketch del genere sarebbe, per√≤, necessario introdurre alcuni argomenti che tratteremo in futuro: variabili booleane e cicli if… else if… else… per cui, per oggi, non andrei oltre.

Articolo precedente

Variabili built-in (mouseX, mouseY...)

Articolo successivo

Variabili in Processing: creazione e personalizzazione

Unisciti alla discussione

  1. Tratto da Reference – mouseClicked()

    
    // Click within the image and press
    // the left and right mouse buttons to 
    // change the value of the rectangle
    void draw() {
      rect(25, 25, 50, 50);
    }
    
    void mousePressed() {
      if (mouseButton == LEFT) {
        fill(0);
      } else if (mouseButton == RIGHT) {
        fill(255);
      } else {
        fill(126);
      }
    }
    

    Ho provato questo piccolo sketch e non sono riuscito ad interpretare la presenza delle istruzioni dall’else fino alla penultima parentesi graffa, tanto che eliminandole il risultato grafico √® sempre lo stesso. Cosa mi sfugge? Grazie.

    1. Ciao Enrico, se stai seguendo le mie guide prova a guardare quella relativa ai controlli condizionali. In ogni caso il codice che hai copiato si interpreta così:

      Quando il mouse viene premuto:

      void mousePressed() { } 

      Se viene premuto il pulsante di sinistra, colora il riempimento di nero

      if (mouseButton == LEFT) {
          fill(0);
        }

      Se viene premuto il pulsante di destra del mouse, colora il riempimento di bianco

      else if (mouseButton == RIGHT) {
          fill(255);
        }

      Altrimenti coloraro di grigio

      else {
          fill(126);
        }

      √ą chiaro che questa ultima opzione viene chiamata solo nel caso una persona disponga di un mouse con pi√Ļ di due pulsanti.

  2. Se ho un’immagine al centro e in basso una barra con 4 rettangoli e in ognuno di questi deve attivarsi un filtro sull’immagine ogni qualvolta il mouse clicchi su uno di loro, che codice devo variabile Built in mouseX e mouseY devo usare all’interno della funzione draw?

    1. Esatto: tramite mouseX e mouseY verifichi se il mouse si trova sopra un pulsante e con mousePressed verifichi il click del mouse.

  3. Ciao, ho nel size 3 cerchi. Vorrei poterci cliccare sopra sul mouse e trasformare lo sfondo da bianco a nero. Per questo utilizzo mouse Pressed. Tuttavia, però, voglio poter lavorare su un cerchio per volta. Cioè: clicco su un cerchio e trasformo lo sfondo solo di quel cerchio cliccato. Come posso fare?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.