Capitolo 1 - le basi
La struttura di base di un programma scritto in Processing è questa:
void setup()
{
}
void draw()
{
}
La funzione setup viene eseguita una sola volta quando si avvia il programma e quindi è indicata per tutte le istruzioni di inizializzazione o che devono essere eseguite una sola volta.
La funzione draw, invece, viene eseguita 30 volte al secondo (in realtà la frequenza è variabile ma è determinata automaticamente dal programma) ed è indicata per le istruzioni di sintesi dinamica dello sketch.
Proviamo, ad esempio, a far girare questo codice:
void setup()
{
size(800,600);
background(255);
fill(255,0,0);
ellipse(200,300,100,100);
}
void draw()
{
}
Indagine ed esplorazione
Qual è la funzione di tutte le istruzioni utilizzate e quale la funzione dei parametri? Proviamo a modificarli e a verificare l'esito.
______
Ora proviamo a spostare le due istruzioni di disegno dalla funzione setup alla funzione draw.
void setup()
{
size(800,600);
background(255);
}
void draw()
{
fill(255,0,0);
ellipse(200,300,100,100);
}
Cosa succede? Perché?
In effetti stiamo soltanto disegnando 30 volte al secondo lo stesso cerchio nello stesso punto del canvas e con le stesse caratteristiche. Per introdurre una variazione percepibile dobbiamo introdurre una grandezza che si modifichi ad ogni iterazione (cioè passaggio nella funzione draw). Proviamo a farlo attraverso l'uso di una variabile.
int i = 0;
void setup()
{
size(800,600);
background(255);
}
void draw()
{
fill(255,0,0);
ellipse(200,300,100 + i,100 + i);
i = i + 1;
}
Ora proviamo ad usare la variabile i insieme ad altri parametri, per esempio nell'ascissa della posizione del cerchio.
Cosa succede? Perché?
Il nostro prossimo obiettivo è realizzare un cerchio che attraversa il canvas con un moto rettilineo uniforme. Come si trasformano le equazioni del moto tempo-continuo in un mondo in cui il tempo è discretizzato e procede a salti?
Ecco una possibile implementazione.
// dichiarazione delle variabili
float posx, posy; // due componenti per la posizione
float vx, vy; // due componenti per la velocità
float t, dt; // le variabili del tempo
void setup()
{
size(800, 600);
posx = 100; // posizione iniziale
posy = 200;
vx = 1; // vettore velocità
vy = 0.5;
dt = 1.5; // inizializziamo le variabili del tempo
t = 0;
}
void draw()
{
background(255);
fill(255, 0, 0);
ellipse(posx, posy, 100, 100);
posx = posx + vx * dt;
posy = posy + vy * dt;
t = t + dt;
}