0403

Proce55ing
Processing è un ambiente e un
linguaggio di programmazione
basato su Java per creare prodotti
multimediali interattivi open source
Processing e gratuito per GNU/Linux, Mac OS
X, e Windows creato nel 2001 al
Lezione 01
MIT Media Lab.

https://www.processing.org

https://vimeo.com/3245120

“TheNestThatSailedTheSky”di PeterGabriel
Daniel Shiffman realizzato con Processing da Glenn Marshall
ketch_190224a
Menu
Toolbar
Tabs

Sketch
Code editor
Display Window

La struttura delle funzioni

Message Area

IDE
integrated Console
development
Status bar
environment

Sistema di riferimento
sketch Posizionamento X,Y

void setup() { Gli script di Processing

size(640, 480); si chiamano sketch, e
} sono composti da:
una cartella su disco,
void draw() { col nome dello sketch,
contenente uno file con
ellipse(80, 80, 100, 200); estensione .pde
}
Sistema di riferimento
Posizionamento X,Y

Color
Colori, spessori

strokeWeight(10)
spessore linea o bordo

stroke(0, 0, 255)
colore linea o bordo in RGB (red,
green, blue) ogni canale va da
0-255.
Strumenti di
noStroke() disegno
non disegna la linea Rettangoli, linee e cerchi

fill(255, 0, 0)
colore del riempimento in RGB

noFill()
nessun riempimento
 (x,y)

(x2,y2) (x2,y2) (x3,y3)

(x2,y2)

triangle(x1, y1, x2, y2, x3,

quad(x1, y1, y3)
x2, y2, x3, y3, x4, y4)
line(x1, y1, x2,
(x1,y1) (x4,y4)
y2)
triangle(x1, y1, x2, y2, x3, y3)
(x1,y1)
(x1,y1)
point(x, y) line(x1, y1, x2, y2)
(x1,y1)
(x1,y1)

(x,y)

(x2,y2) (x3,y3)
Primitive point(x, y)

grafiche
(x2,y2) (x3,y3)
(x2,y2) (x2,y2) (x3,y3)
(x2,y2)
(x,y) void setup() {
quad(x1, y1, x2, y2, x3, y,
rect(x, y3,width,
x4, y4)
height) size(640, 480);
y2) 1. point()
triangle(x1,
(x,y) y1, x2, y2,
quad(x1, x3,
y1, y3)
x2, y2, x3, y3, x4, y4)
(x1,y1) (x4,y4)
(x1,y1)
line(x1, y1, x2,
(x1,y1) (x4,y4)
triangle(x1, y1, x2, y2, x3, y3) }point(x, y)
(x1,y1) (x1,y1) 2. line()
3. triangle()
height
(x,y) void draw() {
(x2,y2) (x3,y3)
(x2,y2) (x3,y3) (x2,y2) width
(x3,y3)
4. quad() strokeWeight(20);
(x2,y2) (x2,y2) (x3,y3)
5. rect() point(70, 100);
line(x1, y1, x2, y2)
6. ellipse()
rect(x, y, width,ellipse(x,
height) y, width, height)
(x1,y1) point(70, 150);
(x,y) quad(x1, y1, x2, rect(x,
y2, x3, y,
y3,width,
x4, y4)
height)
(x1,y1) (x4,y4) triangle(x1,
(x,y) y1, quad(x1,
x2, y2, x3,
y1, y3)
x2, y2, x3, y3, x4, y4) point(70, 200);
(x1,y1) (x1,y1)
(x,y) (x4,y4)
height
point(70, 250);
height
point(x, y)
height point(70, 300);
line(x1, y1, x2, y2)
(x1,y1) (x2,y2) }
(x2,y2)width
(x3,y3) width
(x2,y2) (x3,y3) (x2,y2)width
(x3,y3)
(x,y)

ellipse(x, y, width, height)y1, cx1, cy1, cx2, cy2, x2, y2)

bezier(x1,
rect(x,
(x1,y1) y, width,ellipse(x,
(cx1,cy1) height) y, width, height) triangle(x1, y1, x2, y2, x3, y3)
(x,y) quad(x1, y1, x2, rect(x,
y2, x3, y,
y3,width,
x4, y4)
height)
(x,y)
(x1,y1)
(x,y) (x4,y4)
(x2,y2)
(x1,y1)
height (x,y)
height height
height

width (x2,y2) (cx2,cy2)

(x2,y2)width
(x3,y3)
width
width
line(x1, y1, x2, y2) triangle (x1, y1, x2,
triangle(x1, y1,y2,x2,
x3, y2,
y3) x3, y3)
(x1,y1) (x2,y2) (x3,y3)
(x1,y1)
bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)
ellipse(x, y, width, height)y1, cx1, cy1, cx2, cy2, x2, y2)
bezier(x1,
(x1,y1) (cx1,cy1)
(x,y)
rect(x,
Geometry
(x1,y1) void
y,
primitives
(cx1,cy1) setup()
width, {
height)
ellipse(x, y, width, height) void setup() {
(x,y)
size(640,
Processing has seven 480);
functions to assist in making simple shapes. These images show the format for each. Replace size(640, 480);
height
the parameters
(x,y)
} with
height numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22. quad(x1,
} y1, x2, y2, x3, y3, x4, y4)
height
(x2,y2) (x2,y2) (x3,y3)
(x1,y1) (x4,y4)
(x2,y2) (cx2,cy2)
width
width
(x2,y2)
void draw() {
(cx2,cy2)
width void draw() {
strokeWeight(5); strokeWeight(5);
Geometry primitives
(x1,y1) (cx1,cy1)
bezier(x1,
ellipse(x, line(0,
triangle(x1,
y1, cx1,
y, 0,320,
width,
cy1, 240);
y1,
cx2,
height) x2,
cy2, x2,y2,y2) x3, y3)
bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2) triangle (0,y1,
quad(x1, 0, 640,
x2,0,y2,
320,x3,
480);
y3, x4, y4)
(x1,y1)Geometry primitives (x2,y2) (x3,y3)
(x1,y1) (x4,y4)
Processing has seven functions to assistline(320, 240,shapes.
640,These
0); images show the format for each. Replace }
(x1,y1) (cx1,cy1)
Reas_01_001-084.indd Sec2:28 in making simple 5/16/07 9:54:22 AM
Processing has seven functions to assist in making simple shapes. These images show the format for each. Replace
the parameters
(x,y)
height }
with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.
the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.

(x2,y2) (cx2,cy2)
width (x2,y2) (cx2,cy2) (x,y)
rect(x, y, width, height)
(x2,y2) (x3,y3) (x2,y2) (x3,y3)

bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)

Geometry
Sec2:28primitives Geometry primitives
(x1,y1)
Reas_01_001-084.indd
(cx1,cy1)
5/16/07 9:54:22height
AM
Processing has seven functions
Reas_01_001-084.indd to assist in making simple shapes. These images show the format for each. Replace
Sec2:28 5/16/07 9:54:22 AM
Processing hasquad(x1,
seven functionsy1, x2,
to assist y2, simple
in making x3, shapes.
y3, These
x4,images
y4) show the format for each.(x,y)
Replace rect(x, y, width, height)
the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.
(x1,y1) the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.
(x4,y4)
 line(x1, y1, x2, y2) triangle(x1, y1, x2, y2, x3, y3)
(x2,y2)
(x1,y1) (x3,y3) (x2,y2) (x3,y3)
(x1,y1)

quad (x1, y1,

quad(x1, y1,x2,x2,
y2, x3,
y2,y3,
x3,x4,y3,
y4) x4, y4) (x,y)
rect (x, y, width,
rect(x, height)height)
y, width,
(x2,y2)
(x1,y1) (x4,y4) (x2,y2) (x3,y3)

void setup() { void setup() {

height
size(640, 480); size(640, 480);
}triangle(x1, y1, x2, y2, x3, y3) }quad(x1, y1, x2, y2, x3, y3, x4, y4)
(x2,y2) (x3,y3)
(x1,y1) (x1,y1) (x4,y4)
width
void draw() { void draw() {
strokeWeight(5); strokeWeight(5);
rect(x, y, 120,
quad( 140, width, height) ellipse(x, y, width,
rect(10, 10, 180, 100); height)
(x,y)
(x2,y2) (x3,y3) (x2,y2) (x3,y3)
340, 80, rect(10, 100, 150, 8);
280, 240, (x,y) rect(248, 108, 12, 12);
height
height 120, 320 ); rect(128, 108, 12, 12);
quad(x1,
} y1, x2, y2, x3, y3, x4, y4) rect(x, y, width,
rect(40, 120, 150, 20);height)
(x,y)
(x1,y1) (x4,y4)
width width
rect(20, 140, 160, 4);
}
height

ellipse(x, y, width, height) bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)
(x2,y2) (x3,y3) (x1,y1) (cx1,cy1)
width
(x,y)
height

(x,y)
rect (x, y, width,
rect(x, height)height)
y, width, ellipse (x, y, width,
ellipse(x, height) height)
y, width,
width (x2,y2) (cx2,cy2)
void setup() { (x,y)
height
void setup() {
height
size(640, 480); size(640, 480);
bezier(x1,
} y1, cx1, cy1, cx2, cy2, x2, y2) }
(x1,y1) (cx1,cy1)
width void draw() { Geometry primitives
width
strokeWeight(5); void draw()
Processing has seven functions { in making simple shapes. These images s
to assist
noFill(); the parameters with numbersstrokeWeight(5);
to use them within a program. These functions are
ellipse(x,
stroke(0,0,0);y, width, height) bezier(x1, y1, 200,
ellipse(320, 240, cx1,200);
cy1, cx2, cy2, x2, y2)
(x1,y1) (cx1,cy1)
(x2,y2) (cx2,cy2) rect(10, 10, 40, 40); }
(x,y) stroke(255,0,0);
height
rect(60, 10, 40, 40);
fill(255,255,0);
Geometry primitives
width
rect(110, 10, 40, 40); (x2,y2) (cx2,cy2)
}
Processing has seven functions to assist in making simple shapes. These images show the format
Reas_01_001-084.indd for each. Replace
Sec2:28

the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.
bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)
(x1,y1) (cx1,cy1)
Geometry primitives
 ordine
elementi
void setup() {
size(640, 480);
} Gli elementi grafici
vengono disegnati
nell’ordine con cui
Drawing modes
void draw() { sono scritti. ellipseMode(), rectMode()
rect(10,20,20,30); Questo condiziona la
rect(100,100,100,50); loro visualizzazione.
ellipse(100,100,50,50);
}

rectMode(RADIUS);
ellipseMode(RADIUS);

rectMode(CORNER);
ellipseMode(CORNER);

rectMode(CORNERS);
ellipseMode(CORNERS);
ellipseMode(RADIUS); rectMode(RADIUS);
fill(126); fill(126);
ellipse(33, 33, 60, 60); // Gray ellipse rect(33, 33, 60, 60); // Gray rect
fill(255); fill(255);
ellipseMode(CORNER); rectMode(CORNER);
ellipse(33, 33, 60, 60); // White ellipse rect(33, 33, 60, 60); // White rect
fill(0); fill(0);
ellipseMode(CORNERS); rectMode(CORNERS);
ellipse(33, 33, 60, 60); // Black ellipse rect(33, 33, 60, 60); // Black rect

Definizione di variabile
contenete un numero intero

Cicli int i = 0;
Loop e sequenze di
comandi
 cicli For animazioni
void setup() { int i = 0;
size(640, 480);
} void setup() {
size(640, 480);
void draw() { rectMode(CENTER);
for (int i = 0; i < 400; i++) { }
rectMode(CENTER);
rect(i, i, 100, 100); void draw() {
} rect(i, i, 100, 100);
} i = i + 1;
}

esempi esempi
void setup() { void setup() {
size(640, 480); size(640, 480);
} }

void draw() { void draw() {

strokeWeight(5);
strokeWeight(2); for (int i = 40; i < 610; i = i+20) {
for (int i = 0; i < 400; i = i+20) { for (int j = 40; j < 450; j = j+20) {
line(100, i, 540, i); point(i, j);
} }
}
} }
 6

Verifiche delle Variabili

condizioni
Definizione dei tipi
IF e altri comandi
8

void setup() {
size(480, 120);
}

void draw() {
Interazione ellipse(mouseX, mouseY, 80, 80);
mousePressed e mouse }
position
void setup() {
size(480, 120);
}

void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}