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;
}