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→