Variabili in Processing: dichiarazione, tipi e utilizzo

Una variabile è uno spazio di memoria con un nome, in cui possiamo memorizzare dati da usare e modificare nel corso del nostro programma. In Processing, le variabili sono fondamentali per personalizzare il comportamento degli oggetti grafici, mantenere lo stato del programma, contare, animare, verificare condizioni e molto altro.

1. Cos’è una variabile?

Potete immaginare una variabile come una scatola etichettata in cui potete inserire (e cambiare) un valore. Ogni scatola ha:

• un nome
• un tipo di dato
• un valore (che può cambiare)

Sintassi base:

tipo nome = valore;

Esempio:

int lato = 50; // dichiara una variabile intera chiamata "lato" e le assegna il valore 50

2. Tipi principali di variabili in Processing

Numeri interi – int

Valori numerici senza decimali.

int x = 100;

Numeri con virgola – float

Numeri decimali.

float trasparenza = 127.5;

Valori logici – boolean

Può essere solo true (vero) o false (falso).

boolean attivo = true;

Testi – String

Sequenze di caratteri tra virgolette.

String saluto = "Ciao mondo!";

3. Usare variabili per disegnare

Possiamo usare le variabili per controllare dimensioni, posizione, colore, e altri aspetti grafici.

Esempio: dimensione variabile per un cerchio

int diametro = 100;

void setup() {
  size(400, 400);
  background(255);
  fill(0, 150, 255);
  ellipse(width/2, height/2, diametro, diametro);
}

Modifica il valore di diametro per vedere come cambia il disegno.

4. Variabili e animazioni

Le variabili possono essere aggiornate nel tempo per creare un movimento.

Esempio: far muovere un cerchio

float x = 0;

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

void draw() {
  background(255);
  fill(255, 0, 0);
  ellipse(x, 200, 50, 50);
  x = x + 2; // ogni frame aumenta la posizione
}

5. Variabili booleane

Le variabili boolean sono utilissime per gestire condizioni, stati on/off, pulsanti, visibilità, ecc.

Esempio: mostrare o nascondere un oggetto con un clic

boolean visibile = true;

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

void draw() {
  background(255);
  if (visibile) {
    fill(0, 255, 0);
    rect(150, 150, 100, 100);
  }
}

void mousePressed() {
  visibile = !visibile; // inverte il valore: true -> false -> true ...
}

6. Ambito delle variabili (scope)

In Processing (come in altri linguaggi), una variabile può essere:

• Globale: dichiarata fuori da tutte le funzioni: visibile ovunque.
• Locale: dichiarata dentro una funzione: esiste solo lì dentro.

Esempio:

int x = 100; // variabile globale

void setup() {
  int y = 200; // variabile locale
  println(x); // OK
  println(y); // OK
}

void draw() {
  println(x); // OK
  // println(y); // Errore! "y" non esiste qui
}

Le variabili locali sono più sicure (non rischi conflitti),
ma le globali sono utili per memorizzare valori tra i frame (es. posizione, stato, punteggi…).

Se nel programma togliamo il commento a:

// println(y); // Errore! "y" non esiste qui

Si otterrà un messaggio di errore:

La variabile y non esiste.

Esempio:

int raggio = 50; // Variabile globale: visibile ovunque nel programma

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

// Possiamo usare raggio anche qui
  ellipse(width/2, height/2, raggio<em>2, raggio</em>2); // Disegna un cerchio iniziale
}

void draw() {
  // Definiamo una variabile locale all'interno di draw()
  int bordo = 10; // Questa variabile esiste solo dentro draw()

// Usiamo sia la variabile globale che quella locale
  strokeWeight(bordo);
  stroke(0);
  noFill();
  ellipse(mouseX, mouseY, raggio<em>2, raggio</em>2); // Cerchio che segue il mouse
}

void mousePressed() {
  // Qui possiamo usare raggio, ma NON possiamo usare &quot;bordo&quot; perché era locale a draw()
  raggio = raggio + 5; // Ogni clic aumenta il raggio del cerchio

// Errore se scriviamo:
  // println(bordo); // NON FUNZIONA: bordo esiste solo dentro draw()
}

raggio è dichiarata fuori da tutte le funzioni, quindi è globale e può essere usata in setup(), draw(), e mousePressed().

bordo è una variabile locale creata dentro la funzione draw(). Questo significa che:

• è accessibile solo dentro draw()
• non può essere usata in mousePressed() o setup() — altrimenti il programma darà errore

Analogia semplice per comprendere meglio

Immagina che le funzioni siano stanze chiuse. Una variabile globale è un oggetto nel corridoio comune: tutti possono vederlo.
Una variabile locale, invece, è un oggetto lasciato in una stanza specifica: chi sta fuori da quella stanza non può usarlo né vederlo.

7. Esercizi per approfondire

Esercizio 1: usare due variabili larghezza e altezza per disegnare un rettangolo

// Dichiarazione delle variabili globali
int larghezza = 120;
int altezza = 80;

void setup() {
  size(400, 400);
  background(240);

fill(0, 100, 255); // Colore blu
  noStroke(); // Nessun contorno

// Disegna un rettangolo centrato usando le variabili
  rectMode(CENTER);
  rect(width/2, height/2, larghezza, altezza);
}

Esercizio 2: usare una variabile boolean per alternare tra un cerchio e un quadrato cliccando

// Variabile globale booleana per decidere la forma
boolean disegnaCerchio = true;

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

void draw() {
  background(255); // Cancella lo sfondo ad ogni frame

fill(255, 0, 0);
  noStroke();

// Disegna una forma diversa a seconda della variabile booleana
  if (disegnaCerchio) {
    ellipse(width/2, height/2, 100, 100);
  } else {
    rectMode(CENTER);
    rect(width/2, height/2, 100, 100);
  }
}

void mousePressed() {
  // Inverti il valore della variabile: true → false → true...
  disegnaCerchio = !disegnaCerchio;
}

Ogni volta che l’utente clicca con il mouse, la variabile booleana disegnaCerchio cambia stato. Questo ci permette di alternare la forma disegnata, creando un comportamento interattivo semplice ma efficace.

Esercizio 3: aumentare gradualmente la trasparenza di un rettangolo usando una float

// Variabile globale per il livello di trasparenza
float alpha = 0;

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

void draw() {
  background(255); // Pulisce lo sfondo ad ogni frame

// Imposta un colore con trasparenza crescente
  fill(0, 0, 255, alpha);
  rect(100, 100, 200, 200);

// Incrementa gradualmente la trasparenza fino a 255
  if (alpha < 255) {
    alpha += 1; // puoi provare anche 0.5 per un effetto più lento
  }
}

La variabile alpha controlla il livello di trasparenza (da 0 a 255). In ogni fotogramma (draw()), il valore aumenta, rendendo il rettangolo sempre più visibile, come in una fade-in animation.

Buon Coding a tutti 🙂