Corso di Processing – lezione 08

Cosa sono le variabili built-in?

Le variabili built-in sono variabili già definite da Processing che ci forniscono informazioni utili in tempo reale. Non dobbiamo dichiararle o assegnare loro un valore: possiamo semplicemente usarle nel nostro codice.

Alcune delle più importanti sono:

  • width e height: Dimensioni della finestra
  • mouseX e mouseY: Posizione del mouse
  • pmouseX e pmouseY: Posizione precedente del mouse
  • frameCount: Numero di frame dall’inizio del programma
  • key e keyCode: Tasti premuti sulla tastiera

Vediamo ora come utilizzare queste variabili in modo pratico.

1. width e height: conoscere le dimensioni della finestra

Le variabili width e height contengono la larghezza e l’altezza della finestra in pixel. Sono utili quando vogliamo posizionare oggetti in base alle dimensioni dello schermo.

Esempio: Disegnare un cerchio al centro della finestra

1void setup() {
2  size(500, 400); // Imposta la finestra a 500x400 pixel
3}
4 
5void draw() {
6  background(240);
7  fill(0, 150, 255);
8  ellipse(width / 2, height / 2, 100, 100); // Il cerchio sarà sempre al centro
9}

In questo modo, il cerchio sarà sempre al centro, indipendentemente dalla grandezza della finestra.

Esercizio: Modifica il codice per disegnare due cerchi agli angoli opposti della finestra, usando width e height.

2. mouseX e mouseY: tracciare la posizione del mouse

Le variabili mouseX e mouseY ci dicono la posizione attuale del mouse in coordinate (x, y) all’interno della finestra.

Esempio: Disegnare un quadrato che segue il mouse

1void setup() {
2  size(400, 400);
3  background(255); // Sfondo bianco
4}
5 
6void draw() {
7  background(255); // Cancella il disegno precedente per evitare scie
8  fill(0, 150, 255); // Colore azzurro
9  noStroke();
10  rect(mouseX, mouseY, 50, 50); // Disegna un quadrato alla posizione del mouse
11}

Ad ogni frame, viene disegnato un quadrato nella posizione attuale del mouse.

Esercizio: Modifica il codice per far cambiare colore del quadrato quando il mouse si sposta nella metà inferiore della finestra.

3. pmouseX e pmouseY: tracciare il percorso del mouse

Se vogliamo disegnare una scia con il movimento del mouse, possiamo usare pmouseX e pmouseY, che ci danno la posizione precedente del mouse.

Esempio: Creare un effetto di scia con il mouse

1void setup() {
2  size(400, 400);
3  background(255);
4}
5 
6void draw() {
7  stroke(0, 100, 255); // Linea blu
8  strokeWeight(3);
9  line(pmouseX, pmouseY, mouseX, mouseY); // Disegna linee tra la posizione precedente e attuale del mouse
10}

Questo codice crea una linea continua che segue il movimento del mouse.

Esercizio: Aggiungi colori casuali per ogni segmento della linea tracciata.

4. frameCount: contare i frame eseguiti

La variabile frameCount tiene traccia del numero di frame trascorsi dall’inizio dell’esecuzione del programma.

Esempio: Cambiare il colore dello sfondo ogni 60 frame (circa 1 secondo)

1void setup() {
2  size(400, 400);
3}
4 
5void draw() {
6  if (frameCount % 60 == 0) { // Ogni 60 frame cambia colore
7    background(random(255), random(255), random(255));
8  }
9}

Ogni secondo, lo sfondo cambia in un colore casuale.

Esercizio: Usa frameCount per far crescere e rimpicciolire un cerchio nel tempo.

5. key e keyCode: interagire con la tastiera

Le variabili key e keyCode ci permettono di rilevare quali tasti vengono premuti dall’utente.

Esempio: Cambiare colore premendo un tasto

1void setup() {
2  size(400, 400);
3  background(220);
4  fill(0);
5  textSize(20);
6  text("Premi R, G o B per cambiare colore", 50, height / 2);
7}
8 
9void draw() {
10 
11}
12 
13void keyPressed() {
14  if (key == 'r' || key == 'R') {
15    background(255, 0, 0);
16  } else if (key == 'g' || key == 'G') {
17    background(0, 255, 0);
18  } else if (key == 'b' || key == 'B') {
19    background(0, 0, 255);
20  }
21}

Premendo i tasti R, G o B, lo sfondo cambia rispettivamente in rosso, verde o blu.

Esercizio: Modifica il codice per cambiare il colore di un cerchio invece dello sfondo.

Buon Coding a tutti 🙂

4 pensieri su “Corso di Processing – lezione 08

  1. Albino T.

    Prof. Michele Maffucci, sei un Insegnante Esemplare, Modesto, ma Altamente Professionale, Degno di un Grande Riconoscimento da parte della Pubblica Istruzione ! spero che quello che ho detto sia veramente preso in Considerazione da Chi di Competenza ! Tutti gli Alunni e Chiunque ti segue devono essere Orgogliosi di Te ! uno di questi sono IO. Ti Saluto e ti mando un Grande Abbraccio !
    Albino T.

    Rispondi
    1. admin Autore articolo

      Grazie infinite per le tue parole! Sapere che la condivisione di queste lezioni sia utile è per me il riconoscimento più grande.

      Un caro saluto.

      Rispondi

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.