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→

Le Primitive Grafiche 2D in Processing

Processing offre diverse funzioni per disegnare forme geometriche di base in uno spazio bidimensionale. Vediamo come utilizzare alcune delle principali primitive, modificando dimensioni e spessori per migliorarne la visibilità.

Punto – point()

La funzione point() disegna un singolo pixel sullo schermo. In 2D, accetta due parametri: la coordinata x (orizzontale) e la coordinata y (verticale).

size(400, 400);  // Imposta la finestra a 400x400 pixel
strokeWeight(5); // Aumenta la dimensione del punto
point(200, 200); // Disegna un punto al centro della finestra

Il punto è stato disegnato alle coordinate (200, 200). Aumentando lo spessore con strokeWeight(5), sarà più visibile.

Variante

Possiamo disegnare più punti per creare una disposizione geometrica precisa.

size(400, 400);
strokeWeight(6);
point(100, 100);
point(300, 100);
point(100, 300);
point(300, 300);

Questo codice posiziona quattro punti agli angoli di un quadrato immaginario.

Linea – line()

Per disegnare una linea, dobbiamo specificare le coordinate (x1, y1) del punto di partenza e (x2, y2) del punto di arrivo.

size(400, 400);
strokeWeight(4); // Imposta uno spessore maggiore
line(50, 100, 350, 300); // Disegna una linea diagonale

Variante

Disegniamo una “X” con due linee incrociate perpendicolari tra loro.

size(400, 400);
strokeWeight(3);
line(50, 50, 350, 350);
line(350, 50, 50, 350);

Continua a leggere→

Il Reference di Processing: un supporto essenziale

Quando si lavora con Processing, è importante avere a disposizione un punto di riferimento per consultare rapidamente le funzioni disponibili e il loro utilizzo. La documentazione ufficiale di Processing, accessibile all’indirizzo Processing Reference, offre una panoramica completa delle funzionalità del linguaggio.

Cercando una funzione, come ad esempio line(), è possibile visualizzare una scheda dettagliata che include:

• Il nome della funzione, per identificarla rapidamente.
• Esempi pratici, con codice e immagini che illustrano il comportamento della funzione.
• Una descrizione, che spiega il suo utilizzo e i parametri richiesti.
• La sintassi corretta, utile per scrivere il codice senza errori.
• L’elenco dei parametri accettati, per capire quali valori inserire.
• Il tipo di valore restituito (se presente), che indica cosa produce la funzione come risultato.
• Funzioni correlate, per esplorare comandi simili o complementari.

Utilizzare la Reference senza connessione Internet

Se non si ha accesso a Internet, niente paura! Quando si installa Processing, una copia della Reference viene salvata automaticamente sul computer. È possibile consultarla in qualsiasi momento selezionando Help > Reference dal menu dell’IDE.

Un trucco per trovare velocemente informazioni

Se si sta scrivendo codice e si ha un dubbio su una funzione già utilizzata, esiste un metodo rapido per accedere alla documentazione relativa. Basta:

1. Evidenziare il nome della funzione nel codice.
2. Selezionare Help > Find in Reference (oppure, su Mac, usare la scorciatoia ⇧⌘F – Shift + Command + F).

Questo comando apre direttamente la pagina della Reference dedicata alla funzione selezionata, evitando di doverla cercare manualmente.

Come interpretare la Reference

La documentazione è disponibile solo in inglese, ma anche chi non ha familiarità con la lingua può facilmente individuare le informazioni essenziali. Ecco come leggere una tipica scheda di una funzione:

• Name – Il nome della funzione.
• Examples – Esempi pratici di utilizzo, con codice e immagini.
• Description – Una spiegazione più o meno dettagliata sul funzionamento della funzione e sui parametri accettati.
• Syntax – Le diverse modalità di utilizzo della funzione, con il numero di parametri che può accettare. Ad esempio, line(x1, y1, x2, y2) per il 2D e line(x1, y1, z1, x2, y2, z2) per il 3D.
• Parameters – I tipi di dati richiesti per ogni parametro (es. numeri interi, float, stringhe).
• Returns – Se la funzione restituisce un valore, qui viene indicato il tipo di dato prodotto.
• Related – Altre funzioni simili o complementari, utili per approfondire ulteriormente.

Imparare a consultare la Reference in modo efficace permette di scrivere codice in Processing con maggiore sicurezza e velocità. Sfruttando sia la versione online che quella locale, è possibile avere sempre a portata di mano tutte le informazioni necessarie per esplorare il linguaggio e migliorare le proprie competenze di programmazione.