Corso di Processing – lezione 07

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

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

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).

3. Differenza tra setup() e draw()

Per comprendere meglio la differenza tra setup() e draw(), provate il seguente codice:

1void setup() {
2  size(400, 400);
3  background(255);
4  fill(0, 255, 0); // Verde
5  ellipse(200, 200, 100, 100); // Disegna un cerchio al centro
6}
7 
8void draw() {
9  fill(255, 0, 0, 100); // Rosso con trasparenza
10  ellipse(mouseX, mouseY, 50, 50); // Disegna cerchi dove si muove il mouse
11}

Cosa succede?

Il cerchio verde viene disegnato una sola volta in setup().
Il cerchio rosso viene disegnato continuamente in draw(), creando un effetto di scia.

4. Usare frameRate() per controllare la velocità di draw()

Per impostazione predefinita, Processing esegue draw() circa 60 volte al secondo. Possiamo modificare questa velocità con frameRate().

Esempio: Cambiare la velocità di aggiornamento

1void setup() {
2  size(400, 400);
3  frameRate(10); // Esegui draw() solo 10 volte al secondo
4}
5 
6void draw() {
7  background(255);
8  fill(random(255), random(255), random(255)); // Colore casuale
9  ellipse(200, 200, 100, 100);
10}

Esercizio: Cambiare frameRate(10); con frameRate(2); e osservate la differenza.

5. Usare noLoop() e loop() per controllare draw()

Se vogliamo che draw() venga eseguito solo una volta, possiamo usare noLoop(). Se vogliamo farlo ripartire, possiamo usare loop().

Esempio: Disegnare solo quando si preme un tasto

1void setup() {
2  size(400, 400);
3  background(255);
4  noLoop(); // draw() viene eseguito solo una volta
5}
6 
7void draw() {
8  fill(random(255), random(255), random(255));
9  ellipse(random(width), random(height), 50, 50);
10}
11 
12// Quando viene premuto un tasto, esegue draw() una sola volta
13void keyPressed() {
14  redraw();
15}

Esempio: Disegnare solo quando il mouse viene cliccato

1void setup() {
2size(400, 400);
3background(255); // Sfondo bianco
4noLoop(); // Interrompe l'esecuzione continua di draw()
5}
6 
7void draw() {
8fill(random(255), random(255), random(255)); // Colore casuale
9ellipse(random(width), random(height), 50, 50); // Disegna un cerchio in una posizione casuale
10}
11 
12// Quando il mouse viene cliccato, draw() viene eseguito una volta
13void mousePressed() {
14redraw(); // Esegue draw() solo una volta per ogni clic
15}

In questa lezione abbiamo visto:

setup() viene eseguito una sola volta, ideale per impostazioni iniziali.
draw() viene eseguito in un ciclo continuo, perfetto per animazioni e interattività.
frameRate() controlla la velocità di aggiornamento di draw().
noLoop() e loop() permettono di attivare o fermare draw() a piacimento.

Michele Maffucci

… my stories, life and work

Corso di Processing – lezione 07

Blocchi di Codice e Flusso di Esecuzione in Processing: setup() e draw()

1. Il Blocco setup()

Esempio: Inizializzare una finestra con sfondo fisso

2. Il Blocco draw()

Esempio: Disegnare un cerchio che segue il mouse

3. Differenza tra setup() e draw()

Cosa succede?

4. Usare frameRate() per controllare la velocità di draw()

Esempio: Cambiare la velocità di aggiornamento

5. Usare noLoop() e loop() per controllare draw()

Esempio: Disegnare solo quando si preme un tasto

Lascia un commento Annulla risposta

Blocchi di Codice e Flusso di Esecuzione in Processing: setup() e draw()

1. Il Blocco setup()

Esempio: Inizializzare una finestra con sfondo fisso

2. Il Blocco draw()

Esempio: Disegnare un cerchio che segue il mouse

3. Differenza tra setup() e draw()

Cosa succede?

4. Usare frameRate() per controllare la velocità di draw()

Esempio: Cambiare la velocità di aggiornamento

5. Usare noLoop() e loop() per controllare draw()

Esempio: Disegnare solo quando si preme un tasto

Condividi:

Articoli correlati:

Lascia un commento Annulla risposta