Corso di Processing – lezione 10

Lascia una risposta

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:

vedi sorgente
stampa?
1tipo nome = valore;

Esempio:

vedi sorgente
stampa?
1int 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.

vedi sorgente
stampa?
1int x = 100;

Numeri con virgola – float

Numeri decimali.

vedi sorgente
stampa?
1float trasparenza = 127.5;

Valori logici – boolean

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

vedi sorgente
stampa?
1boolean attivo = true;

Testi – String

Sequenze di caratteri tra virgolette.

vedi sorgente
stampa?
1String 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

vedi sorgente
stampa?
1int diametro = 100;
2 
3void setup() {
4  size(400, 400);
5  background(255);
6  fill(0, 150, 255);
7  ellipse(width/2, height/2, diametro, diametro);
8}

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

vedi sorgente
stampa?
1float x = 0;
2 
3void setup() {
4  size(400, 400);
5}
6 
7void draw() {
8  background(255);
9  fill(255, 0, 0);
10  ellipse(x, 200, 50, 50);
11  x = x + 2; // ogni frame aumenta la posizione
12}


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

vedi sorgente
stampa?
1boolean visibile = true;
2 
3void setup() {
4  size(400, 400);
5}
6 
7void draw() {
8  background(255);
9  if (visibile) {
10    fill(0, 255, 0);
11    rect(150, 150, 100, 100);
12  }
13}
14 
15void mousePressed() {
16  visibile = !visibile; // inverte il valore: true -> false -> true ...
17}

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:

vedi sorgente
stampa?
1int x = 100; // variabile globale
2 
3void setup() {
4  int y = 200; // variabile locale
5  println(x); // OK
6  println(y); // OK
7}
8 
9void draw() {
10  println(x); // OK
11  // println(y); // Errore! "y" non esiste qui
12}

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:

vedi sorgente
stampa?
1// println(y); // Errore! "y" non esiste qui

Si otterrà un messaggio di errore:

La variabile y non esiste.

Esempio:

vedi sorgente
stampa?
1int raggio = 50; // Variabile globale: visibile ovunque nel programma
2 
3void setup() {
4  size(400, 400);
5  background(255);
6 
7// Possiamo usare raggio anche qui
8  ellipse(width/2, height/2, raggio<em>2, raggio</em>2); // Disegna un cerchio iniziale
9}
10 
11void draw() {
12  // Definiamo una variabile locale all'interno di draw()
13  int bordo = 10; // Questa variabile esiste solo dentro draw()
14 
15// Usiamo sia la variabile globale che quella locale
16  strokeWeight(bordo);
17  stroke(0);
18  noFill();
19  ellipse(mouseX, mouseY, raggio<em>2, raggio</em>2); // Cerchio che segue il mouse
20}
21 
22void mousePressed() {
23  // Qui possiamo usare raggio, ma NON possiamo usare &quot;bordo&quot; perché era locale a draw()
24  raggio = raggio + 5; // Ogni clic aumenta il raggio del cerchio
25 
26// Errore se scriviamo:
27  // println(bordo); // NON FUNZIONA: bordo esiste solo dentro draw()
28}

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

vedi sorgente
stampa?
1// Dichiarazione delle variabili globali
2int larghezza = 120;
3int altezza = 80;
4 
5void setup() {
6  size(400, 400);
7  background(240);
8 
9fill(0, 100, 255); // Colore blu
10  noStroke(); // Nessun contorno
11 
12// Disegna un rettangolo centrato usando le variabili
13  rectMode(CENTER);
14  rect(width/2, height/2, larghezza, altezza);
15}

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

vedi sorgente
stampa?
1// Variabile globale booleana per decidere la forma
2boolean disegnaCerchio = true;
3 
4void setup() {
5  size(400, 400);
6  background(255);
7}
8 
9void draw() {
10  background(255); // Cancella lo sfondo ad ogni frame
11 
12fill(255, 0, 0);
13  noStroke();
14 
15// Disegna una forma diversa a seconda della variabile booleana
16  if (disegnaCerchio) {
17    ellipse(width/2, height/2, 100, 100);
18  } else {
19    rectMode(CENTER);
20    rect(width/2, height/2, 100, 100);
21  }
22}
23 
24void mousePressed() {
25  // Inverti il valore della variabile: true → false → true...
26  disegnaCerchio = !disegnaCerchio;
27}

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

vedi sorgente
stampa?
1// Variabile globale per il livello di trasparenza
2float alpha = 0;
3 
4void setup() {
5  size(400, 400);
6  background(255);
7  noStroke();
8}
9 
10void draw() {
11  background(255); // Pulisce lo sfondo ad ogni frame
12 
13// Imposta un colore con trasparenza crescente
14  fill(0, 0, 255, alpha);
15  rect(100, 100, 200, 200);
16 
17// Incrementa gradualmente la trasparenza fino a 255
18  if (alpha &lt; 255) {
19    alpha += 1; // puoi provare anche 0.5 per un effetto più lento
20  }
21}

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 🙂

Articoli correlati:

  1. Corso di Processing – lezione 03
  2. Corso di Processing – lezione 04
  3. Corso di Processing – lezione 05
  4. Corso di Processing – lezione 06
  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.