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;

}