Archivi tag: Creative Coding

Corso di Processing – lezione 10

Lascia una risposta

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:

vedi sorgente
stampa?
1tipo nome = valore;

Esempio:

vedi sorgente
stampa?
1int 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.

vedi sorgente
stampa?
1int x = 100;

Numeri con virgola – float

Numeri decimali.

vedi sorgente
stampa?
1float trasparenza = 127.5;

Valori logici – boolean

Può essere solo true (vero) o false (falso).

vedi sorgente
stampa?
1boolean attivo = true;

Testi – String

Sequenze di caratteri tra virgolette.

vedi sorgente
stampa?
1String 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

vedi sorgente
stampa?
1int diametro = 100;
2 
3void setup() {
4  size(400, 400);
5  background(255);
6  fill(0, 150, 255);
7  ellipse(width/2, height/2, diametro, diametro);
8}

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

vedi sorgente
stampa?
1float x = 0;
2 
3void setup() {
4  size(400, 400);
5}
6 
7void draw() {
8  background(255);
9  fill(255, 0, 0);
10  ellipse(x, 200, 50, 50);
11  x = x + 2; // ogni frame aumenta la posizione
12}


Continua a leggere→

Articoli correlati:

  1. Corso di Processing – lezione 03
  2. Corso di Processing – lezione 04
  3. Corso di Processing – lezione 05
  4. Corso di Processing – lezione 06
  5. Corso di Processing – lezione 08

Corso di Processing – lezione 09

Lascia una risposta

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

vedi sorgente
stampa?
1void setup() {
2size(400, 400);
3background(255);
4}
5 
6void draw() {
7// Vuoto, perché disegniamo solo quando si clicca
8}
9 
10void mousePressed() {
11fill(0, 200, 100);
12noStroke();
13rect(mouseX, mouseY, 40, 40);
14}

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 “-“

vedi sorgente
stampa?
1int diametro = 50;
2void setup() {
3  size(400, 400);
4}
5 
6void draw() {
7  background(255);
8  fill(100, 100, 255);
9  ellipse(width/2, height/2, diametro, diametro);
10}
11 
12void keyPressed() {
13  if (key == '+') {
14    diametro += 10;
15  } else if (key == '-') {
16    diametro = max(10, diametro - 10);
17  }
18}

Premi + per ingrandire il cerchio e - per rimpicciolirlo, con un limite minimo.

Continua a leggere→

Articoli correlati:

  1. Corso di Processing – lezione 03
  2. Corso di Processing – lezione 05
  3. Corso di Processing – lezione 06
  4. Corso di Processing – lezione 07
  5. Corso di Processing – lezione 08

Corso di Processing – lezione 08

4 Repliche

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

vedi sorgente
stampa?
1void setup() {
2  size(500, 400); // Imposta la finestra a 500x400 pixel
3}
4 
5void draw() {
6  background(240);
7  fill(0, 150, 255);
8  ellipse(width / 2, height / 2, 100, 100); // Il cerchio sarà sempre al centro
9}

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→

Articoli correlati:

  1. Corso di Processing – lezione 03
  2. Corso di Processing – lezione 04
  3. Corso di Processing – lezione 05
  4. Corso di Processing – lezione 06
  5. Corso di Processing – lezione 07

Corso di Processing – lezione 07

Lascia una risposta

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

vedi sorgente
stampa?
1void setup() {
2  size(400, 400); // Imposta la dimensione della finestra
3  background(200, 200, 255); // Sfondo celeste
4}

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

vedi sorgente
stampa?
1void setup() {
2  size(400, 400);
3  background(255); // Sfondo bianco
4}
5 
6void draw() {
7  fill(255, 0, 0, 150); // Rosso con trasparenza
8  noStroke();
9  ellipse(mouseX, mouseY, 50, 50); // Disegna un cerchio che segue il mouse
10}

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→

Articoli correlati:

  1. Corso di Processing – lezione 03
  2. Corso di Processing – lezione 04
  3. Corso di Processing – lezione 05
  4. Corso di Processing – lezione 06
  5. Corso di Processing – lezione 02

Corso di Processing – lezione 06

Lascia una risposta

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:

vedi sorgente
stampa?
1size(400, 400); // Imposta la finestra
2background(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

vedi sorgente
stampa?
1size(400, 400);
2background(200); // Sfondo grigio
3fill(255, 0, 0); // Colore rosso
4stroke(0, 0, 0); // Contorno nero
5ellipse(200, 200, 150, 150);

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

Articoli correlati:

  1. Corso di Processing – lezione 03
  2. Corso di Processing – lezione 04
  3. Corso di Processing – lezione 05
  4. Corso di Processing – lezione 02
  5. Corso di Processing – lezione 01