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:
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
5 | ellipse(200, 200, 150, 150); |
Esercizio: Prova a cambiare il colore del cerchio variando i valori RGB nella funzione fill().
3. Sfondo e Trasparenza
Il colore dello sfondo si imposta con background(). Possiamo anche gestire la trasparenza (canale alpha) aggiungendo un quarto parametro a fill() o stroke().
Esempio: trasparenza nelle forme
I due cerchi si sovrapporranno con un effetto di fusione del colore.
Esempio: aggiungi un terzo cerchio con un altro colore e verifica l’effetto.
5 | ellipse(170, 200, 150, 150); |
8 | ellipse(230, 200, 150, 150); |
10 | fill(255, 255, 0, 150); |
11 | ellipse(200, 130, 150, 150); |
4. Rimuovere il Contorno e il Riempimento
Processing permette di disattivare il contorno con noStroke() e il riempimento con noFill().
Esempio: Contorno e Riempimento
10 | ellipse(250, 200, 100, 100); |
Esercizio: Prova a combinare noStroke() e noFill() in modi diversi.
5. Cambiare il Modello Colore: HSB
Oltre al modello RGB, Processing supporta HSB (Hue, Saturation, Brightness), che descrive il colore in termini di tinta, saturazione e luminosità.
Per usare HSB:
1 | colorMode(HSB, 360, 100, 100); |
3 | rect(100, 100, 150, 100); |
Esercizio: Crea una griglia di rettangoli colorati con colorMode(HSB, 360, 100, 100) e varia i parametri.
6. Uniamo tutto insieme
6 | ellipse(110, 100, 150, 150); |
10 | ellipse(300, 100, 150, 150); |
13 | fill(255, 255, 0, 150); |
14 | ellipse(490, 100, 150, 150); |
19 | ellipse(270, 350, 150, 150); |
24 | ellipse(330, 350, 150, 150); |
28 | fill(255, 255, 0, 150); |
29 | ellipse(300, 280, 150, 150); |
34 | ellipse(110, 530, 150, 150); |
39 | ellipse(300, 530, 150, 150); |
41 | stroke(255, 0, 0, 100); |
42 | fill(255, 255, 0, 150); |
43 | ellipse(490, 530, 150, 150); |
47 | fill(255, 255, 255, 100); |
48 | rect(20, 510, 560, 50); |
7. L’Utilità dei commenti nel codice
I commenti nel codice sono una pratica fondamentale per rendere i programmi più leggibili, comprensibili e manutenibili. Sebbene il computer ignori completamente i commenti durante l’esecuzione, essi svolgono un ruolo cruciale per i programmatori, aiutandoli a spiegare il funzionamento del codice e a facilitarne la comprensione in futuro.
1. Rendere il codice più comprensibile
I commenti descrivono il funzionamento delle istruzioni e permettono di capire a colpo d’occhio cosa fa il codice.
Esempio:
9 | ellipse(200, 200, 100, 100); |
Senza commenti, i valori numerici potrebbero non essere immediatamente chiari per chi legge il codice.
2. Facilitare la collaborazione
Quando più persone lavorano sullo stesso progetto, i commenti aiutano a comprendere più velocemente il codice scritto da altri, evitando errori e fraintendimenti.
Esempio:
8 | ellipse(100, 200, 100, 100); |
11 | ellipse(200, 200, 100, 100); |
14 | ellipse(300, 200, 100, 100); |
In questo modo, chiunque collabori al codice capirà facilmente la logica dietro i cerchi colorati sovrapposti.
3. Debugging e test
I commenti permettono di disattivare temporaneamente parti di codice senza eliminarle, utile per testare e individuare errori.
Esempio:
5 | ellipse(200, 200, 100, 100); |
Se il colore di riempimento non funziona come previsto, possiamo riattivarlo rimuovendo il //.
4. Documentare codice complesso
Alcune parti di codice possono essere difficili da comprendere a colpo d’occhio. I commenti aiutano a spiegare passaggi complessi o calcoli particolari.
Esempio:
7 | rect(100, 100, 120, 80); |
11 | fill(0, 255, 255, 150); |
12 | rect(200, 100, 120, 80); |
Con i commenti, il funzionamento del codice risulta chiaro senza dover interpretare ogni dettaglio.
5. Tipologie di Commenti in Processing
Processing permette due tipi di commenti:
- Commenti su una sola riga: si usano
// per spiegare un’istruzione specifica.
- Commenti su più righe: si usano
/* */ per descrivere parti più lunghe del codice.
Usare i commenti in modo efficace aiuta a scrivere codice più chiaro, leggibile e manutenibile. Sono essenziali per documentare il codice, facilitare la collaborazione e risolvere eventuali problemi senza perdere informazioni preziose.
Buona pratica: Inserite sempre commenti utili, ma senza esagerare: un codice troppo commentato può diventare confusionario.
Esercizio: Creare un Quadro in Stile Piet Mondrian
Obiettivo dell’esercizio
L’obiettivo di questo esercizio è riprodurre una composizione ispirata a Piet Mondrian, l’artista noto per i suoi dipinti astratti caratterizzati da rettangoli colorati separati da spesse linee nere.
Utilizzeremo Processing per realizzare la griglia di rettangoli colorati, rispettando una caratteristica importante: tutte le linee nere devono avere lo stesso spessore, incluse quelle che formano il bordo della finestra.
Concetti chiave
- Uso della funzione
rect() per disegnare rettangoli
- Impostazione del colore di riempimento con
fill()
- Creazione delle separazioni nere con
strokeWeight() e stroke()
- Disegno del bordo nero attorno alla composizione
Struttura dell’esercizio
- Impostare la finestra con dimensione adeguata
size(700, 500);
- Disegnare il fondo nero per creare le divisioni tra i rettangoli.
- Disegnare i rettangoli colorati e bianchi con
fill().
- Mantenere sempre le separazioni nere di 10 pixel, incluso il bordo della composizione.
13 | rect(155, 5, 350, 100); |
16 | rect(505, 5, 190, 100); |
19 | rect(5, 260, 150, 235); |
22 | rect(5, 105, 150, 250); |
25 | rect(155, 105, 250, 150); |
28 | rect(375, 105, 200, 150); |
31 | rect(575, 105, 120, 250); |
34 | rect(155, 255, 120, 240); |
37 | rect(275, 255, 190, 100); |
40 | rect(275, 355, 420, 140); |
Esercizio: modifica i colori, le proporzioni e sperimenta con nuove disposizioni!
Un passo in più 
L’Importanza dei Numeri Casuali in Programmazione
Anticipiamo il concetto di generazione di numeri casuali presente in qualsiasi linguaggio di programmazione e mostriamo come questo può essere utilizzato per sviluppare un’attività interessante che va a modificare l’esercizio precedente.
I numeri casuali svolgono un ruolo fondamentale nei linguaggi di programmazione, poiché permettono di introdurre variabilità e imprevedibilità nei programmi. Sono utilizzati in numerosi ambiti, tra cui:
- Grafica generativa e arte digitale – Creare disegni, pattern e animazioni che cambiano in modo dinamico.
- Giochi e simulazioni – Generare movimenti casuali, comportamenti imprevedibili o scenari di gioco sempre diversi.
- Crittografia e sicurezza – Proteggere dati attraverso chiavi e algoritmi crittografici basati su numeri casuali.
- Intelligenza artificiale e apprendimento automatico – Inizializzare reti neurali e introdurre casualità nelle simulazioni.
L’utilizzo di funzioni per generare numeri casuali, come random() in Processing, consente di arricchire l’interattività dei programmi e di creare esperienze uniche a ogni esecuzione.
La funzione random()
Genera numeri casuali. Ogni volta che la funzione random() viene chiamata, restituisce un valore imprevedibile all’interno dell’intervallo specificato.
Se viene passato un solo parametro alla funzione, essa restituirà un valore in virgola mobile compreso tra zero e il valore del parametro massimo. Ad esempio, random(5) restituisce valori compresi tra 0 e 5 (a partire da zero fino a, ma senza includere, 5).
Se vengono specificati due parametri, la funzione restituirà un valore in virgola mobile compreso tra i due valori indicati. Ad esempio, random(-5, 10.2) genera numeri casuali a partire da -5 fino a (ma senza includere) 10.2.
Per convertire un numero casuale in virgola mobile in un numero intero, è possibile utilizzare la funzione int().
Esperimento: creare un quadro in stile Piet Mondrian con colori di riempimento casuali ad ogni riavvio del programma
Sulla base dellultimo esercizio inseriamo all’interno di ogni istruzione fill() al posto del valore 255 random(255) in modo che il riempimento avvenga con un colore casuale compreso tra 0 e 254.
12 | fill(0, 0, random(255)); |
13 | rect(155, 5, 350, 100); |
15 | fill(random(255), 0, 0); |
16 | rect(505, 5, 190, 100); |
19 | rect(5, 260, 150, 235); |
21 | fill(random(255), random(255), 0); |
22 | rect(5, 105, 150, 250); |
25 | rect(155, 105, 250, 150); |
27 | fill(random(255), random(255), 0); |
28 | rect(375, 105, 200, 150); |
30 | fill(0, 0, random(255)); |
31 | rect(575, 105, 120, 250); |
33 | fill(random(255), 0, 0); |
34 | rect(155, 255, 120, 240); |
36 | fill(0, 0, random(255)); |
37 | rect(275, 255, 190, 100); |
39 | fill(random(255), random(255), 0); |
40 | rect(275, 355, 420, 140); |
Buon Coding a tutti
