•
Introduzione a Processing
Roberto Ranon
www.dimi.uniud.it/ranon/processing.html
1
Processing è, insieme, un ambiente e linguaggio di
programmazione per creare immagini, animazioni,
prodotti multimediali interattivi
•
open source e gratuito*
•
per GNU/Linux, Mac OS X, e Windows
•
creato nel 2001 al MIT Media Lab, oggi utilizzato da
migliaia di persone
•
basato su Java
* processing.org/download/
2
Video Musicale per “The Nest That Sailed The Sky” di Peter Gabriel
realizzato con Processing da Glenn Marshall
https://vimeo.com/3245120
Good Morning! di blprnt
Una visualizzazione di 11,000 tweet raccolti nell’arco di 24 ore e contenenti le parole
“good morning”
3
4
modalità di output (programma Java)
programma (sketch) in
esecuzione
editor di codice processing
console
Good Morning! di blprnt
Una visualizzazione di 11,000 tweet raccolti nell’arco di 24 ore e contenenti le parole
“good morning”
5
Processing Development Environment (PDE)
6
•
•
i programmi Processing si chiamano sketch, e sono
composti da:
•
una cartella su disco, col nome dello sketch,
contenente …
•
… un file .pde, col nome dello sketch
•
eventualmente, altri file .pde e altre risorse
all’interno della cartella
Forme e Colori
i programmi possono essere esportati come
applicazioni o pagine Web*
* con alcune limitazioni
7
8
Pixels
5
1.2 Simple Shapes
The vast majority of the programming examples in this book will be visual in nature. You may ultimately
learn to develop interactive games, algorithmic art pieces, animated logo designs, and (insert your own
category here) with Processing, but at its core, each visual program will involve setting pixels. The simplest
way to get started in understanding how this works is to learn to draw primitive shapes. This is not unlike
how we learn to draw in elementary school, only here we do so with code instead of crayons.
Let’s start with the four primitive shapes shown in Figure 1.4.
•
L’ordine delle istruzioni è, ovviamente, importante!
rect è una delle istruzioni che disegnano
•
Point
Line
Rectangle
gli argomenti di questo
tipo
di istruzioni
sono, di solito,Ellipse
in pixel
fig. 1.4
For each shape,
wepixel
will ask
information isProcessing
required to èspecify
the location
and size (and
• ogni
nellaourselves
finestra what
di un’applicazione
individuato
dalle sue
later color) ofcoordinate
that shape xand
e y:learn how Processing expects to receive that information. In each of the
diagrams below (Figures 1.5 through 1.11), assume a window with a width of 10 pixels and height of
10 pixels. This •isn’t
particularly
realistic
when we really start coding we will most likely work with
(0,0)
è il pixel in
alto a since
sinistra
much larger windows (10 ! 10 pixels is barely a few millimeters of screen space). Nevertheless for
(width-1,itheight-1)
il pixel
in smaller
basso anumbers
destra; width
e height
sonothe
variabili
demonstration• purposes,
is nice to èwork
with
in order
to present
pixels as they
sistema
might appear on di
graph
paper (for now) to better illustrate the inner workings of each line of code.
0
1
2
3
x-axis
4 5 6
7
8
9
0
1
2
3
4
y-axis
5
6
7
8
9
x
size(300,200);
rect(10,20,20,30);
ellipse(100,100,50,50);
rect(100,100,100,50);
y
Point (4,5);
9
fig. 1.5
A point is the easiest of the shapes and a good place to start. To draw a point, we only need an x and y
coordinate as shown in Figure 1.5. A line isn’t terribly difficult either. A line requires two points, as shown
in Figure 1.6.
0
1
2
0
1
2
3
4
y-axis
5
6
7
8
9
3
x-axis
4 5 6
7
8
9
Point B (8,3)
Point A
x y
Point B
x y
line (1,3,8,3);
Point A (1,3)
fig. 1.6
size(300,200);
rect(10,20,20,30);
rect(100,100,100,50);
ellipse(100,100,50,50);
10
line(x1, y1, x2, y2)
(x1,y1)
point(x, y)
(x2,y2)
(x,y)
point(x, y)
triangle(x1, y1, x2, y2, x3, y3)
point(x, y)
(x1,y1)
(x,y)
(x,y)
line(x1, y1, x2, y2)
(x1,y1)
(x2,y2) (x3,y3)
point(x, y)
(x2,y2)
line(x1, y1, x2,
y2)
(x1,y1)
(x1,y1)
(x1,y1) (x4,y4)
(x,y)
line(x1, y1, x2, y2)
quad(x1, y1, x2, y2, x3, y3, x4, y4)
triangle(x1,
y1, x2, y2, x3, y3)
(x2,y2)
(x2,y2)
(x1,y1)
(x2,y2) (x3,y3)
line(x1, y1, x2, y2)
point(x, y)
(x1,y1)
(x1,y1)
triangle(x1,
x2, y2, x3, y3)
(x2,y2)y1,
(x3,y3)
(x,y)
triangle(x1, y1, x2, y2, x3, y3)
rect(x, y, width, height)
•
(x1,y1)
(x,y)
(x2,y2)
(x1,y1) (x4,y4)
height
quad(x1,
x2, y2, x3, y3, x4, y4)
(x2,y2) y1,
(x3,y3)
colori:
•
point(x,y)
•
line(x1,y1,x2,y2)
line(x1, y1, x2, y2)
(x1,y1)
(x2,y2)
quad(x1,
y1, (x3,y3)
x2, y2,
(x1,y1)
in scala di grigi: un valore in [0,255]
•
(x2,y2) (x3,y3)
width
•
triangle(x1,y1,x2,y2,x3,y3)
•
triangle(x1, y1, x2, y2,quad(x1,
x3, y3) y1, x2, y2, x3, y3, x4, y4)
(x1,y1) (x4,y4)
x3, y3, x4, y4)
ellipse(x, y, width, height)
(x1,y1) (x4,y4)
•
(x2,y2)
height
rect(x,
width,
(x2,y2) y,
(x3,y3)
(x2,y2) (x3,y3)
(x,y)
•
height)
//
//
//
//
Setting
Setting
Setting
Drawing
•
•
(x2,y2) (x3,y3)
width
height
(x2,y2) (x3,y3)
(x1,y1)
(cx1,cy1)
height
•
•
rect(x,y,width,height)
(x2,y2) (x3,y3)
ellipse(x, y, width, height)
rectMode(CORNER)
width
(x,y)
width
height
(x2,y2)
(cx2,cy2)
background to white
outline (stroke) to black
interior of a shape (fill) to grey rectangle
fill(127,0,0);
// Dark red
ellipse(40,20,16,16);
fill(255,200,200);
// Pink (pale red)
ellipse(60,20,16,16);
height
• in scala di grigi, o RGB,
quad(x1,
x2, y2, x3,rect(x,
y3, x4,y,y4)
width, height)
triangle(x1, y1, x2, y2,
x3, y3)y1,
(x,y)
(x1,y1) (x4,y4)
• fill(0,0,255);
quad(x1,y1,x2,y2,x3,y3,x4,y4)
ellipse(x,y,width,height)
// No fourth
(x1,y1)
rect(x,
y,
width,
height)
• rect(0,0,100,200);
x2, y2)
(x,y)
ellipseMode(CENTER)bezier(x1, y1, cx1, cy1, cx2, cy2,
width
the
the
the
the
RGB: three values in [0,255]
•
(x,y)
background(255);
stroke(0);
fill(150);
rect(50,50,75,100);
•
•
più alfa
argument means 100% opacity
fill(255,0,0,255); // 255 means 100% opacity
rect(0,0,200,40);
fill(255,0,0,191); // 75% opacity
rect(0,50,200,40);
11
12
rect(x,
y, y4)
width, height)
ellipse(x, y, width, height)
quad(x1, (x,y)
y1, x2, y2, x3,
y3, x4,
(x1,y1) (x4,y4)
ellipse(x, y, width, height)
width
height
(x,y)
height
(x2,y2) (x3,y3)
width
(x,y)
(x1,y1)
width
(x1,y1) (cx1,cy1)
height
ellipse(x, y, width, height)
bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)
rect(x, y, width, height)
(x1,y1)
(cx1,cy1)
height
(x,y)
Geometry primitives
Processing has seven functions to assist in making simple shapes. These images show the format for each. Replace
bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)
width
the parameters
with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.
(cx1,cy1)
bezier(x1,
y1, cx1, cy1, cx2, cy2, x2, y2)
(x,y)
(x2,y2)
(cx2,cy2)
height
Reas_01_001-084.indd Sec2:28
width
width
(x2,y2)
(cx2,cy2)
Geometry primitives
Processing has sevenbezier(x1,
functions to assist
making
simple
show the format for each. Replace
y1, in
cx1,
cy1,
cx2,shapes.
cy2, These
x2, images
y2)
ellipse(x,
y,(cx1,cy1)
width,with
height)
(x1,y1)
the parameters
numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.
Geometry primitives
(x,y)
Processing has seven functions to assist in making simple shapes. These images show the format for each. Replace
height
Geometry primitives
the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.
Processing has seven functions to assist in making simple shapes. These images show the format for each. Replace
(x2,y2)
(cx2,cy2)
5/23/07 1:20:34 PM
•
stroke(color), strokeWeight(width), nostroke()
•
•
fill(color), nofill()
•
•
controllano il colore con cui viene disegnato il
contorno delle figure, lo spessore (in pixel), e la
presenza del contorno
Animazioni e Interattività
controllano il colore con cui viene disegnato l’interno
delle figure, o la presenza dell’interno
importante: queste istruzioni impostano lo stato che
viene utilizzato per disegnare, che resta attivo finché
altre istruzioni lo modificheranno
13
14
int diam = 20;
void setup()
{
size(500,300);
}
void setup()
{
size(500,300);
background(180);
stroke(0);
strokeWeight(3);
fill(255,50); }
eseguito all’avvio del programma
void draw ()
{
ellipse( width/2, height/2, diam, diam);
}
void draw ()
{
// Displays the frame count to the Console
println("I'm drawing");
println(frameCount);
}
alternativa 1
void draw ()
{
if (diam < 500) diam++;
ellipse( width/2, height/2, diam, diam);
}
alternativa 2
void draw ()
{
background(180);
if (diam < 500) diam++;
ellipse( width/2, height/2, diam, diam);
}
alternativa 3
void draw ()
{
ellipse( mouseX, mouseY, diam, diam);
}
eseguito dopo setup(). Il codice all’interno di
draw() viene eseguito ciclicamente fino alla
chiusura del programma
15
16
•
•
un programma può essere una lista di istruzioni, o di
funzioni;
•
nel primo caso, le istruzioni vengono eseguite, e il
programma si ferma;
•
nel secondo case, possiamo scrivere un
programma interattivo tramite le due funzioni setup()
e draw()
Aspettatevi l’inaspettato
la sintassi, i tipi di dato di base, gli operatori, …
funzionano esattamente come in Java
17
18
void setup()
{
size(500,300);
background(180);
stroke(0);
strokeWeight(3);
}
void draw()
{
fill(random(0,255));
ellipse ( random( width), random( height ), random( 50 ), random( 50 )); }
Un po’ di fisica?
random(n) genera un numero casuale tra 0 e n (non incluso)
random(low, high) genera un numero casuale tra low e high (non incluso)
19
20
float xPos,yPos, xVel, yVel, yAcc;
float radius = 20;
void setup()
{
size(500,500);
fill(0);
xPos = width/2;
yPos = radius;
xVel = 2;
yVel = 0;
yAcc = 1;
}
Popolazioni
void draw()
{
background(255);
yVel = yVel + yAcc;
xPos = xPos + xVel;
yPos = yPos + yVel;
if (xPos < 0 || xPos > width )
xVel = -xVel;
if (yPos < 0 || yPos > height )
yVel = -yVel;
ellipse(xPos, yPos, radius, radius);
}
21
22
float[]
float[]
float[]
float[]
float[]
xPos
yPos
xVel
yVel
yAcc
=
=
=
=
=
new
new
new
new
new
float[100];
float[100];
float[100];
float[100];
float[100];
float radius = 20;
void setup()
{
size(500,500);
fill(0);
for (int i=0; i<100; i++)
{
xPos[i] = random(width);
yPos[i] = random(radius, height/2);
xVel[i] = random(-2,+2);
yVel[i] = 0;
yAcc[i] = 1;
}
}
void draw()
{
background(255);
for (int i=0; i<100; i++)
{
yVel[i] = yVel[i] + yAcc[i];
xPos[i] = xPos[i] + xVel[i];
yPos[i] = yPos[i] + yVel[i];
if (xPos[i] < 0 || xPos[i] > width )
xVel[i] = -xVel[i];
if (yPos[i] < 0 || yPos[i] > height )
yVel[i] = -yVel[i];
ellipse(xPos[i], yPos[i], radius, radius);
}
}
23
Processing Particle Study by Reza
24