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

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

void draw() {
// Vuoto, perché disegniamo solo quando si clicca
}

void mousePressed() {
fill(0, 200, 100);
noStroke();
rect(mouseX, mouseY, 40, 40);
}

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 “-“

int diametro = 50;
void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  fill(100, 100, 255);
  ellipse(width/2, height/2, diametro, diametro);
}

void keyPressed() {
  if (key == '+') {
    diametro += 10;
  } else if (key == '-') {
    diametro = max(10, diametro - 10);
  }
}

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

int x = 200;
int y = 200;

void setup() {
  size(400, 400);
}

void draw() {
  background(240);
  fill(255, 100, 0);
  rect(x, y, 50, 50);
}

void keyPressed() {
  if (keyCode == LEFT)  x -= 10;
  if (keyCode == RIGHT) x += 10;
  if (keyCode == UP)    y -= 10;
  if (keyCode == DOWN)  y += 10;
}

4. Combinare eventi di mouse e tastiera

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

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

void draw() {
  // Lasciato vuoto apposta
}

void mousePressed() {
  fill(200, 0, 0, 180);
  ellipse(mouseX, mouseY, 30, 30);
}

void keyPressed() {
  if (key == ' ') {
    background(255);
  }
}

5. Esercizi per approfondire

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

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

void draw() {
  // Niente da aggiornare continuamente
}

void mousePressed() {
  if (mouseButton == LEFT) {
    fill(0, 100, 255);
    ellipse(mouseX, mouseY, 40, 40);
  } else if (mouseButton == RIGHT) {
    fill(255, 150, 0);
    rect(mouseX, mouseY, 50, 30);
  }
}

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

color pennello = color(0); // Colore iniziale

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

void draw() {
  // Disegna un cerchio quando si clicca
}

void mousePressed() {
  fill(pennello);
  noStroke();
  ellipse(mouseX, mouseY, 30, 30);
}

void keyPressed() {
  if (key == '1') pennello = color(255, 0, 0);     // rosso
  if (key == '2') pennello = color(0, 255, 0);     // verde
  if (key == '3') pennello = color(0, 0, 255);     // blu
  if (key == '4') pennello = color(255, 255, 0);   // giallo
  if (key == '5') pennello = color(0);             // nero
}

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

String forma = "cerchio";

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

void draw() {
  // Disegno controllato dal clic del mouse
}

void mousePressed() {
  fill(100, 0, 200, 180);
  noStroke();

if (forma == "cerchio") {
    ellipse(mouseX, mouseY, 40, 40);
  } else if (forma == "quadrato") {
    rect(mouseX, mouseY, 40, 40);
  }
}

void keyPressed() {
  if (key == 'c' || key == 'C') forma = "cerchio";
  if (key == 'q' || key == 'Q') forma = "quadrato";
}

Alcune precisazione nell’uso del tipo String

La riga:

String 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:

if (key == 'q' || key == 'Q') {
  forma = "rettangolo";
}

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:

if (forma == "cerchio") {
  ellipse(mouseX, mouseY, 40, 40);
} else if (forma == "rettangolo") {
  rect(mouseX, mouseY, 50, 30);
}

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.

// Colore del "pennello"
color coloreAttuale = color(0); // Nero all'inizio

// Forma da disegnare: "cerchio" o "rettangolo"
String formaAttuale = "cerchio";

void setup() {
  size(500, 500); // Imposta la finestra di disegno
  background(255); // Sfondo bianco iniziale
  fill(0);
  textSize(16);
  text("Disegnare un cerchio con clic sinistro e un rettangolo con clic destro", 10, 230);
  text("Cambiare colore con i tasti da 1 a 5", 10, 250);
  text("Cambiare forma con i tasti C (cerchio) e Q (quadrato)", 10, 270);
  text("Pulire la finestra con la barra spaziatrice", 10, 290);
}

void draw() {
  // Lo lasciamo vuoto: il disegno avviene solo con mousePressed()
}

void mousePressed() {
  fill(coloreAttuale); // Imposta il colore scelto
  noStroke(); // Nessun contorno

// Disegna la forma selezionata
  if (formaAttuale == "cerchio") {
    ellipse(mouseX, mouseY, 40, 40);
  } else if (formaAttuale == "rettangolo") {
    rect(mouseX, mouseY, 50, 30);
  }
}

void keyPressed() {
  // Cambia forma da disegnare
  if (key == 'c' || key == 'C') {
    formaAttuale = "cerchio";
  } else if (key == 'q' || key == 'Q') {
    formaAttuale = "rettangolo";
  }

// Cambia colore del pennello in base ai tasti numerici
  if (key == '1') coloreAttuale = color(255, 0, 0);     // Rosso
  if (key == '2') coloreAttuale = color(0, 255, 0);     // Verde
  if (key == '3') coloreAttuale = color(0, 0, 255);     // Blu
  if (key == '4') coloreAttuale = color(255, 255, 0);   // Giallo
  if (key == '5') coloreAttuale = color(0);             // Nero

// Pulisce lo schermo con la barra spaziatrice
  if (key == ' ') {
    background(255); // Ripristina lo sfondo bianco
  }
}

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.