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
}

Continua a leggere→

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.

Continua a leggere→

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.
Continua a leggere→

Blocchi di Codice e Flusso di Esecuzione in Processing: setup() e draw()

Quando si scrive un programma in Processing, è fondamentale comprendere il flusso di esecuzione del codice. Un programma può essere composto da un insieme di istruzioni sequenziali, ma spesso abbiamo bisogno di strutturarlo in modo più organizzato, definendo ciò che deve accadere una sola volta e ciò che deve essere ripetuto continuamente.

Per questo motivo, Processing utilizza due funzioni principali:

• setup(): eseguita una sola volta all’inizio del programma.
• draw(): eseguita continuamente in un ciclo, permettendo di aggiornare la grafica in tempo reale.

1. Il Blocco setup()

La funzione setup() viene eseguita una sola volta all’avvio del programma. Qui possiamo definire le impostazioni iniziali, come la dimensione della finestra, il colore di sfondo e altre configurazioni che non devono cambiare nel tempo.

Esempio: Inizializzare una finestra con sfondo fisso

void setup() {
  size(400, 400); // Imposta la dimensione della finestra
  background(200, 200, 255); // Sfondo celeste
}

In questo caso, background(200, 200, 255); viene eseguito una sola volta all’inizio, quindi lo sfondo non cambia più.

Esercizio: Modificate il codice per impostare uno sfondo giallo e una finestra di dimensione 500×500.

2. Il Blocco draw()

La funzione draw() viene eseguita continuamente, creando un effetto di animazione o interattività.

Esempio: Disegnare un cerchio che segue il mouse

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

void draw() {
  fill(255, 0, 0, 150); // Rosso con trasparenza
  noStroke();
  ellipse(mouseX, mouseY, 50, 50); // Disegna un cerchio che segue il mouse
}

Esercizio: Modificare il codice per cambiare il colore del cerchio ogni volta che il mouse si muove (suggerimento: ricordate come usare la funzione random() vista nella lezione precedente).
Continua a leggere→

Gestione del colore in Processing ed utilizzo dei commenti

Il colore è un elemento essenziale nella grafica digitale. In Processing, la gestione dei colori avviene tramite il modello RGB (Red, Green, Blue), in cui ogni colore è definito dalla combinazione di tre valori compresi tra 0 e 255. Esploriamo ora come applicare il colore agli oggetti grafici nei nostri sketch.

1. Il Modello RGB

I colori sugli schermi dei computer vengono generati combinando le tre componenti principali:

• Rosso (Red)
• Verde (Green)
• Blu (Blue)

Ciascuna componente può assumere valori da 0 (assenza di colore) a 255 (massima intensità). Per esempio:

size(400, 400); // Imposta la finestra
background(0, 0, 255); // Sfondo blu

Alcuni esempi di colori nel modello RGB:

• Nero → fill(0, 0, 0);
• Bianco → fill(255, 255, 255);
• Rosso → fill(255, 0, 0);
• Verde → fill(0, 255, 0);
• Blu → fill(0, 0, 255);
• Giallo → fill(255, 255, 0);
• Ciano → fill(0, 255, 255);
• Magenta → fill(255, 0, 255);

Selezione del Colore in Processing

Quando si lavora con i colori in Processing, può sorgere una domanda fondamentale: come faccio a conoscere i valori RGB di un colore specifico?

Per facilitare questa operazione, Processing mette a disposizione un Color Selector, uno strumento intuitivo che permette di scegliere facilmente un colore e ottenere i relativi valori numerici.

Come accedere al Color Selector

È possibile aprire il selettore di colori direttamente dall’ambiente di sviluppo di Processing andando su:
Menu → Strumenti → Selezionatore dei colori…

Una volta aperta la finestra del selettore, si può esplorare la gamma di colori disponibili e ottenere i relativi valori RGB(Rosso, Verde, Blu). Inoltre, lo strumento fornisce informazioni anche sui valori:

• HSB (Hue, Saturation, Brightness)
• Esadecimale (Hex), utile per il web design e altre applicazioni grafiche.

2. Applicare il colore agli oggetti

Per impostare il colore di riempimento di una figura, utilizziamo la funzione fill(), mentre stroke() permette di cambiare il colore del contorno.

Esempio: disegnare un cerchio colorato

size(400, 400);
background(200); // Sfondo grigio
fill(255, 0, 0); // Colore rosso
stroke(0, 0, 0); // Contorno nero
ellipse(200, 200, 150, 150);

Esercizio: Prova a cambiare il colore del cerchio variando i valori RGB nella funzione fill().
Continua a leggere→