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

void setup() {
  size(500, 400); // Imposta la finestra a 500x400 pixel
}

void draw() {
  background(240);
  fill(0, 150, 255);
  ellipse(width / 2, height / 2, 100, 100); // Il cerchio sarà sempre al centro
}

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

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

void draw() {
  background(255); // Cancella il disegno precedente per evitare scie
  fill(0, 150, 255); // Colore azzurro
  noStroke();
  rect(mouseX, mouseY, 50, 50); // Disegna un quadrato alla posizione del mouse
}

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

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

void draw() {
  stroke(0, 100, 255); // Linea blu
  strokeWeight(3);
  line(pmouseX, pmouseY, mouseX, mouseY); // Disegna linee tra la posizione precedente e attuale del mouse
}

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)

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

void draw() {
  if (frameCount % 60 == 0) { // Ogni 60 frame cambia colore
    background(random(255), random(255), random(255));
  }
}

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

void setup() {
  size(400, 400);
  background(220);
  fill(0);
  textSize(20);
  text("Premi R, G o B per cambiare colore", 50, height / 2);
}

void draw() {

}

void keyPressed() {
  if (key == 'r' || key == 'R') {
    background(255, 0, 0);
  } else if (key == 'g' || key == 'G') {
    background(0, 255, 0);
  } else if (key == 'b' || key == 'B') {
    background(0, 0, 255);
  }
}

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 🙂