Corso di Processing – lezione 09

Lascia una risposta

Cosa sono gli eventi?

Rilevare eventi con mousePressed() e keyPressed() in Processing

Durante l’esecuzione di un programma, possono verificarsi azioni che non dipendono direttamente dal flusso continuo del codice, ma da interazioni esterne, come un clic del mouse, la pressione di un tasto o altri cambiamenti. Queste azioni prendono il nome di eventi.

In Processing, gli eventi che gestiamo più frequentemente sono quelli legati al mouse e alla tastiera. Per rispondere a questi eventi, il linguaggio ci mette a disposizione blocchi di codice speciali, simili a setup() e draw(), ma con una differenza fondamentale: il loro contenuto non viene eseguito automaticamente all’avvio del programma, né ripetuto in loop.

Le funzioni evento, come mousePressed() o keyPressed(), vengono eseguite una sola volta, solo quando si verifica una specifica azione dell’utente, come ad esempio un clic o la pressione di un tasto. Questo permette di rendere i nostri sketch interattivi e reattivi, eseguendo istruzioni solo al momento giusto.

1. La funzione mousePressed()

Questa funzione si attiva ogni volta che l’utente preme un tasto del mouse.

Esempio 1: disegnare un quadrato dove si fa clic

vedi sorgente
stampa?
1void setup() {
2size(400, 400);
3background(255);
4}
5 
6void draw() {
7// Vuoto, perché disegniamo solo quando si clicca
8}
9 
10void mousePressed() {
11fill(0, 200, 100);
12noStroke();
13rect(mouseX, mouseY, 40, 40);
14}

Ogni clic del mouse disegna un nuovo quadrato verde nella posizione del puntatore.

2. La funzione keyPressed()

Viene eseguita ogni volta che si preme un tasto sulla tastiera.

Esempio 2: aumentare la dimensione di un cerchio premendo i tasti “+” o “-“

vedi sorgente
stampa?
1int diametro = 50;
2void setup() {
3  size(400, 400);
4}
5 
6void draw() {
7  background(255);
8  fill(100, 100, 255);
9  ellipse(width/2, height/2, diametro, diametro);
10}
11 
12void keyPressed() {
13  if (key == '+') {
14    diametro += 10;
15  } else if (key == '-') {
16    diametro = max(10, diametro - 10);
17  }
18}

Premi + per ingrandire il cerchio e - per rimpicciolirlo, con un limite minimo.

3. Usare keyCode per i tasti speciali

Oltre ai caratteri (key), possiamo usare keyCode per tasti speciali come le frecce direzionali.

Esempio 3: muovere un quadrato con le frecce

vedi sorgente
stampa?
1int x = 200;
2int y = 200;
3 
4void setup() {
5  size(400, 400);
6}
7 
8void draw() {
9  background(240);
10  fill(255, 100, 0);
11  rect(x, y, 50, 50);
12}
13 
14void keyPressed() {
15  if (keyCode == LEFT)  x -= 10;
16  if (keyCode == RIGHT) x += 10;
17  if (keyCode == UP)    y -= 10;
18  if (keyCode == DOWN)  y += 10;
19}

4. Combinare eventi di mouse e tastiera

Esempio 4: disegnare con il mouse, cancellare tutto con la barra spaziatrice

vedi sorgente
stampa?
1void setup() {
2  size(400, 400);
3  background(255);
4}
5 
6void draw() {
7  // Lasciato vuoto apposta
8}
9 
10void mousePressed() {
11  fill(200, 0, 0, 180);
12  ellipse(mouseX, mouseY, 30, 30);
13}
14 
15void keyPressed() {
16  if (key == ' ') {
17    background(255);
18  }
19}

5. Esercizi per approfondire

Esercizio 1: disegna un cerchio con il clic sinistro, un rettangolo con il tasto destro

vedi sorgente
stampa?
1void setup() {
2  size(400, 400);
3  background(255);
4}
5 
6void draw() {
7  // Niente da aggiornare continuamente
8}
9 
10void mousePressed() {
11  if (mouseButton == LEFT) {
12    fill(0, 100, 255);
13    ellipse(mouseX, mouseY, 40, 40);
14  } else if (mouseButton == RIGHT) {
15    fill(255, 150, 0);
16    rect(mouseX, mouseY, 50, 30);
17  }
18}

Esercizio 2: cambia il colore del pennello con i tasti numerici da 1 a 5

vedi sorgente
stampa?
1color pennello = color(0); // Colore iniziale
2 
3void setup() {
4  size(400, 400);
5  background(255);
6}
7 
8void draw() {
9  // Disegna un cerchio quando si clicca
10}
11 
12void mousePressed() {
13  fill(pennello);
14  noStroke();
15  ellipse(mouseX, mouseY, 30, 30);
16}
17 
18void keyPressed() {
19  if (key == '1') pennello = color(255, 0, 0);     // rosso
20  if (key == '2') pennello = color(0, 255, 0);     // verde
21  if (key == '3') pennello = color(0, 0, 255);     // blu
22  if (key == '4') pennello = color(255, 255, 0);   // giallo
23  if (key == '5') pennello = color(0);             // nero
24}

Esercizio 3: usa la tastiera per cambiare la forma (C = cerchio, Q = quadrato)

vedi sorgente
stampa?
1String forma = "cerchio";
2 
3void setup() {
4  size(400, 400);
5  background(255);
6}
7 
8void draw() {
9  // Disegno controllato dal clic del mouse
10}
11 
12void mousePressed() {
13  fill(100, 0, 200, 180);
14  noStroke();
15 
16if (forma == "cerchio") {
17    ellipse(mouseX, mouseY, 40, 40);
18  } else if (forma == "quadrato") {
19    rect(mouseX, mouseY, 40, 40);
20  }
21}
22 
23void keyPressed() {
24  if (key == 'c' || key == 'C') forma = "cerchio";
25  if (key == 'q' || key == 'Q') forma = "quadrato";
26}

Alcune precisazione nell’uso del tipo String

La riga:

vedi sorgente
stampa?
1String forma = "cerchio";

serve a memorizzare quale forma l’utente vuole disegnare. In pratica, la variabile forma agisce come una scatola di memoria in cui salviamo il tipo di figura scelta dall’utente: "cerchio" oppure "rettangolo".

A cosa serve concretamente?

Immagina che l’utente prema il tasto Q: nel codice, abbiamo scritto:

vedi sorgente
stampa?
1if (key == 'q' || key == 'Q') {
2  forma = "rettangolo";
3}

A quel punto, nella variabile forma sarà memorizzata la parola "rettangolo". Quando poi l’utente clicca con il mouse, il programma controlla cosa c’è scritto in forma e decide quale figura disegnare:

vedi sorgente
stampa?
1if (forma == "cerchio") {
2  ellipse(mouseX, mouseY, 40, 40);
3} else if (forma == "rettangolo") {
4  rect(mouseX, mouseY, 50, 30);
5}

Quindi:

  • La variabile forma vi permette di cambiare comportamento del disegno in base a una scelta dell’utente;
  • funziona come interruttore logico per decidere quale forma disegnare al clic del mouse.

Se non la usassi?

Senza questa variabile, ogni clic disegnerebbe sempre la stessa figura, perché non avreste un modo per “ricordare” quale tipo di disegno è stato selezionato in precedenza.

Esercizio 4: realizziamo uno sketch unico che unisce i tre esercizi precedenti in un unico progetto

  • viene mostrato ad avvio programma la lista delle funzioni;
  • disegnare un cerchio con clic sinistro e un rettangolo con clic destro;
  • cambiare colore con i tasti da 1 a 5;
  • cambiare forma con i tasti C (cerchio) e Q (quadrato);
  • pulire la finestra con la barra spaziatrice.
vedi sorgente
stampa?
1// Colore del "pennello"
2color coloreAttuale = color(0); // Nero all'inizio
3 
4// Forma da disegnare: "cerchio" o "rettangolo"
5String formaAttuale = "cerchio";
6 
7void setup() {
8  size(500, 500); // Imposta la finestra di disegno
9  background(255); // Sfondo bianco iniziale
10  fill(0);
11  textSize(16);
12  text("Disegnare un cerchio con clic sinistro e un rettangolo con clic destro", 10, 230);
13  text("Cambiare colore con i tasti da 1 a 5", 10, 250);
14  text("Cambiare forma con i tasti C (cerchio) e Q (quadrato)", 10, 270);
15  text("Pulire la finestra con la barra spaziatrice", 10, 290);
16}
17 
18void draw() {
19  // Lo lasciamo vuoto: il disegno avviene solo con mousePressed()
20}
21 
22void mousePressed() {
23  fill(coloreAttuale); // Imposta il colore scelto
24  noStroke(); // Nessun contorno
25 
26// Disegna la forma selezionata
27  if (formaAttuale == "cerchio") {
28    ellipse(mouseX, mouseY, 40, 40);
29  } else if (formaAttuale == "rettangolo") {
30    rect(mouseX, mouseY, 50, 30);
31  }
32}
33 
34void keyPressed() {
35  // Cambia forma da disegnare
36  if (key == 'c' || key == 'C') {
37    formaAttuale = "cerchio";
38  } else if (key == 'q' || key == 'Q') {
39    formaAttuale = "rettangolo";
40  }
41 
42// Cambia colore del pennello in base ai tasti numerici
43  if (key == '1') coloreAttuale = color(255, 0, 0);     // Rosso
44  if (key == '2') coloreAttuale = color(0, 255, 0);     // Verde
45  if (key == '3') coloreAttuale = color(0, 0, 255);     // Blu
46  if (key == '4') coloreAttuale = color(255, 255, 0);   // Giallo
47  if (key == '5') coloreAttuale = color(0);             // Nero
48 
49// Pulisce lo schermo con la barra spaziatrice
50  if (key == ' ') {
51    background(255); // Ripristina lo sfondo bianco
52  }
53}

Cosa abbiamo imparato

  • Gli eventi sono azioni (come clic o pressioni di tasti) a cui il nostro programma può rispondere.
  • Le funzioni mousePressed() e keyPressed() sono fondamentali per creare interattività.
  • Usando key, keyCode e mouseButton possiamo controllare in dettaglio cosa accade nel nostro sketch.

Articoli correlati:

  1. Corso di Processing – lezione 03
  2. Corso di Processing – lezione 05
  3. Corso di Processing – lezione 06
  4. Corso di Processing – lezione 07
  5. Corso di Processing – lezione 08

Lascia un commento

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

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.