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→