PROCESSING

PROCESSING www.processing.org I commenti sono fatti come in linguaggio C utilizzando // .
Di seguito, segue lo schema principale del codice programma: si noti che come in linguaggio C, le istruzioni
terminano con ; .
// viene eseguita una volta sola
// inizializza variabili programma
void setup()
{
}
// la funzione draw viene ripetuta ciclicamente circa 60 volte al secondo(ciclo loop)
void draw()
{
}
Occorre dimensionare una finestra grafica: si usa una funzione size ( , ) ; e si inseriscono largezza e altezza
separati da una virgola. Le misure sono in pixel.
void setup()
{
size (600,400);
}
Disegno Per disegnare una forma simile ad un elisse utilizzo lafunzione ellipse. Queta funzione richiede 4 valori
numerici (centro X, centro Y, larghezza,diemetro). Il punto di coordinate 0,0 si trova in alto sull'estrema
sinistra (angolo). Il punto di coordinate 400,400 si trova in basso sull'estrema destra (angolo).
ellipse (100,100,50,50);
// assegnazioni di variabili globali
float x,y,d;
// viene eseguita una volta sola
// inizializza variabili programma
void setup()
{
size (600,400);
x=50; // coordinata X
y=50; // coordinata Y
d=50; // diametro del cerchio o ellisse
}
// viene ripetuta ciclicamente circa 60 volte al secondo (ciclo loop)
void draw()
{
ellipse (x,y,d,d); // disegno di un cerchio
}
Colori Per scegliere il colore interno dell'ellisse uso la funzione fill da inserire nella funzione draw.
void draw()
{
fill (100); // bianco - numero massimo
ellipse (x,y,d,d);
}
I VALORI DA 0 A 255 SOINO IN SCALA DI GRIGI.
fill (0); // nero – numero minimo
fill (255); // bianco - numero massimo
Per utilizzare tutti i colori andare in: tools – color selector. Per creare il colore occorre utilizzare i parametri
RGB e vanno inseriti nel fill separato da virgole.
fill (22,78,216); // blu elettrico
Utilizzo pratico della funzione.
void draw()
{
fill (0,255,0); // verde
ellipse (x,y,d,d);
}
Per evitare di incorrere in errori si sostituiscono i parametri con una variabile c. La dichiaro con il formato
color:
color c;
void setup()
{
c=color(255,3,255);
}
void draw()
{
fill (c); // viola
ellipse (x,y,d,d);
}
Per rendere meno segettato il cerchio uso la funzione smooth(); la funzione è da eseguire nel void draw. Se
si associa anche la funzione stroke (); mi varia iol colore del contorno, per scegliere il colore il metodo di
inseimento è lo stesso del fill (); . Con la funzione strokeWeight(); posso sceglirere il numero di pixel che
vanno a costituire il contorno; all'interno della parentisi si mette il numero di pixel.
void draw()
{
fill (c); // viola
smooth(); // mi "liscia" il contorno del cerchio
stroke(0); // contorno in nero
strokeWeight(5); // contorno di 5px
ellipse (x,y,d,d);
}
Processing ha delle funzioni dedicate:
• Se sostituisco le coortdinate ellipse (x,y,d,d); x e y con ellipse (mouseX,mouseY,d,d); il cerchio si
disegherà dove mi fermo con il mouse.
• Per pulire lo sfondo uso la funzione background(); e tra parentesi inserisco il colore col quale mi deve
dipingere lo schermo.
• Per fare traslare la pallina da sola sugli assi X e Y uso, aggiungo due variabili dx e dy e alla fine di ogni
disegno la pallina trasla sullo schermo.
float x,y,d,dx,dy;
color c;
void setup()
{
size (600,400);
x=50; // coordinata X
y=50; // coordinata Y
d=50; // diametro del cerchio o ellisse
c=color(0,255,0);
dx=2;
dy=2;
}
void draw()
{
background(0); // ad ogni movimento di mouse mi colora il display di nero
fill (c); // verde
smooth(); // mi "liscia" il contorno del cerchio
stroke(0); // contorno in nero
strokeWeight(5); // contorno di 5px
ellipse (x,y,d,d); // la pallina segue il movimento del mouse
x=x+dx;
y=y+2;
}
Movimento della pallina in modo orizzontale Per controllare la traslazione e far restare la pallina nel display di prova uso un ciclo che mi fa rimbalzare da
parte a parte la figura. Per evitare che la pallina rimbalzi perfettamente nei limiti dello schermo occorre
inserire un’ulteriore condizione nell' if .
float x,y,d;
color c;
float dx;
void setup()
{
size (600,400);
x=50; // coordinata X
y=50; // coordinata Y
d=50; // diametro del cerchio o ellisse
c=color(0,255,0);
dx=2;
}
void draw()
{
background(0); // ad ogni movimento di mouse mi colora il display di nero
fill (c); // verde
smooth(); // mi "liscia" il contorno del cerchio
stroke(0); // contorno in nero
strokeWeight(5); // contorno di 5px
ellipse (x,y,d,d); // la pallina segue il movimento del mouse
x=x+dx;
if(x>width-d/2)
dx=dx*-1;
if(x<d/2)
dx=dx*-1;
}
Movimento della pallina in modo verticale Per controllare la traslazione e far restare la pallina nel display di prova uso un ciclo che mi fa rimbalzare da
parte a parte in modo verticale la figura. Per evitare che la pallina rimbalzi perfettamente nei limiti dello
schermo occorre inserire un’ulteriore condizione nell' if .
float x,y,d;
color c;
float dy;
void setup()
{
size (600,400);
x=50; // coordinata X
y=50; // coordinata Y
d=50; // diametro del cerchio o ellisse
c=color(0,255,0);
dy=2;
}
void draw()
{
background(0); // ad ogni movimento di mouse mi colora il display di nero
fill (c); // verde
smooth(); // mi "liscia" il contorno del cerchio
stroke(0); // contorno in nero
strokeWeight(5); // contorno di 5px
ellipse (x,y,d,d); // la pallina segue il movimento del mouse
y=y+dy;
if(y>height-d/2)
dy=dy*-1;
if(y<d/2)
dy=dy*-1;
}
Se congiungo i due programmi, ottengo il movimento di una pallina in verticale ed orizzontale:
float x,y,d,dx,dy;
color c;
void setup()
{
size (600,400);
x=50; // coordinata X
y=50; // coordinata Y
d=50; // diametro del cerchio o ellisse
c=color(0,255,0);
dx=2;
dy=2;
}
void draw()
{
background(0); // ad ogni movimento di mouse mi colora il display di nero
fill (c); // verde
smooth(); // mi "liscia" il contorno del cerchio
stroke(0); // contorno in nero
strokeWeight(5); // contorno di 5px
ellipse (x,y,d,d); // la pallina segue il movimento del mouse
x=x+dx;
y=y+dy;
if(x>width-d/2)
dx=dx*-1;
if(x<d/2)
dx=dx*-1;
if(y>height-d/2)
dy=dy*-1;
if(y<d/2)
dy=dy*-1;
}