Introduzione a Processing

Roberto Ranonwww.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

�3

Video Musicale per “The Nest That Sailed The Sky” di Peter Gabriel realizzato con Processing da Glenn Marshall

https://vimeo.com/3245120

�4

Good Morning! di blprnt Una visualizzazione di 11,000 tweet raccolti nell’arco di 24 ore e contenenti le parole

“good morning”

�5

Good Morning! di blprnt Una visualizzazione di 11,000 tweet raccolti nell’arco di 24 ore e contenenti le parole

“good morning”

Processing Development Environment (PDE)

editor di codice processing

console

programma (sketch) in esecuzione

modalità di output (programma Java)

�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

• i programmi possono essere esportati come applicazioni o pagine Web*

* con alcune limitazioni�7

Forme e Colori

�8

• rect è una delle istruzioni che disegnano

• gli argomenti di questo tipo di istruzioni sono, di solito, in pixel

• ogni pixel nella finestra di un’applicazione Processing è individuato dalle sue coordinate x e y:

• (0,0) è il pixel in alto a sinistra

• (width-1, height-1) è il pixel in basso a destra; width e height sono variabili di sistema

Pixels 5

1.2 Simple Shapes Th e 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. Th e simplest way to get started in understanding how this works is to learn to draw primitive shapes. Th is 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 .

Point Line Rectangle Ellipse fi g. 1.4

00 1 2 3 4

x-axis

y-axis

5 6 7 8 9

1234

Point (4,5);

x

56789

y

fi g. 1.5

For each shape, we will ask ourselves what information is required to specify the location and size (and later color) of that shape and 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. Th is isn’t particularly realistic since when we really start coding we will most likely work with much larger windows (10 ! 10 pixels is barely a few millimeters of screen space). Nevertheless for demonstration purposes, it is nice to work with smaller numbers in order to present the pixels as they might appear on graph paper (for now) to better illustrate the inner workings of each line of code.

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 diffi cult either. A line requires two points, as shown in Figure 1.6 .

fi g. 1.6

00 1 2 3 4

x-axis

y-axis

5 6 7 8 9

1234

Point B (8,3)

line (1,3,8,3);

56789

Point A (1,3)

yxPoint A

yxPoint B

�9

size(300,200); rect(10,20,20,30);rect(100,100,100,50);ellipse(100,100,50,50);

size(300,200); rect(10,20,20,30);ellipse(100,100,50,50);rect(100,100,100,50);

L’ordine delle istruzioni è, ovviamente, importante!

�10

Geometry primitivesProcessing has seven functions to assist in making simple shapes. These images show the format for each. Replace the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.

point(x, y)

line(x1, y1, x2, y2)

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

quad(x1, y1, x2, y2, x3, y3, x4, y4)

(x,y)

rect(x, y, width, height)

ellipse(x, y, width, height)

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

(x1,y1)

(x2,y2)

(x1,y1)

(x1,y1) (cx1,cy1)

(x2,y2) (cx2,cy2)

(x3,y3)(x2,y2)

(x1,y1) (x4,y4)

(x3,y3)(x2,y2)

(x,y)

height

width

height

width

(x,y)

Reas_01_001-084.indd Sec2:28Reas_01_001-084.indd Sec2:28 5/23/07 1:20:34 PM5/23/07 1:20:34 PM

Geometry primitivesProcessing has seven functions to assist in making simple shapes. These images show the format for each. Replace the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.

point(x, y)

line(x1, y1, x2, y2)

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

quad(x1, y1, x2, y2, x3, y3, x4, y4)

(x,y)

rect(x, y, width, height)

ellipse(x, y, width, height)

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

(x1,y1)

(x2,y2)

(x1,y1)

(x1,y1) (cx1,cy1)

(x2,y2) (cx2,cy2)

(x3,y3)(x2,y2)

(x1,y1) (x4,y4)

(x3,y3)(x2,y2)

(x,y)

height

width

height

width

(x,y)

Reas_01_001-084.indd Sec2:28Reas_01_001-084.indd Sec2:28 5/23/07 1:20:34 PM5/23/07 1:20:34 PM

Geometry primitivesProcessing has seven functions to assist in making simple shapes. These images show the format for each. Replace the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.

point(x, y)

line(x1, y1, x2, y2)

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

quad(x1, y1, x2, y2, x3, y3, x4, y4)

(x,y)

rect(x, y, width, height)

ellipse(x, y, width, height)

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

(x1,y1)

(x2,y2)

(x1,y1)

(x1,y1) (cx1,cy1)

(x2,y2) (cx2,cy2)

(x3,y3)(x2,y2)

(x1,y1) (x4,y4)

(x3,y3)(x2,y2)

(x,y)

height

width

height

width

(x,y)

Reas_01_001-084.indd Sec2:28Reas_01_001-084.indd Sec2:28 5/23/07 1:20:34 PM5/23/07 1:20:34 PM

Geometry primitivesProcessing has seven functions to assist in making simple shapes. These images show the format for each. Replace the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.

point(x, y)

line(x1, y1, x2, y2)

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

quad(x1, y1, x2, y2, x3, y3, x4, y4)

(x,y)

rect(x, y, width, height)

ellipse(x, y, width, height)

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

(x1,y1)

(x2,y2)

(x1,y1)

(x1,y1) (cx1,cy1)

(x2,y2) (cx2,cy2)

(x3,y3)(x2,y2)

(x1,y1) (x4,y4)

(x3,y3)(x2,y2)

(x,y)

height

width

height

width

(x,y)

Reas_01_001-084.indd Sec2:28Reas_01_001-084.indd Sec2:28 5/23/07 1:20:34 PM5/23/07 1:20:34 PM

Geometry primitivesProcessing has seven functions to assist in making simple shapes. These images show the format for each. Replace the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.

point(x, y)

line(x1, y1, x2, y2)

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

quad(x1, y1, x2, y2, x3, y3, x4, y4)

(x,y)

rect(x, y, width, height)

ellipse(x, y, width, height)

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

(x1,y1)

(x2,y2)

(x1,y1)

(x1,y1) (cx1,cy1)

(x2,y2) (cx2,cy2)

(x3,y3)(x2,y2)

(x1,y1) (x4,y4)

(x3,y3)(x2,y2)

(x,y)

height

width

height

width

(x,y)

Reas_01_001-084.indd Sec2:28Reas_01_001-084.indd Sec2:28 5/23/07 1:20:34 PM5/23/07 1:20:34 PM

Geometry primitivesProcessing has seven functions to assist in making simple shapes. These images show the format for each. Replace the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to 2-22.

point(x, y)

line(x1, y1, x2, y2)

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

quad(x1, y1, x2, y2, x3, y3, x4, y4)

(x,y)

rect(x, y, width, height)

ellipse(x, y, width, height)

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

(x1,y1)

(x2,y2)

(x1,y1)

(x1,y1) (cx1,cy1)

(x2,y2) (cx2,cy2)

(x3,y3)(x2,y2)

(x1,y1) (x4,y4)

(x3,y3)(x2,y2)

(x,y)

height

width

height

width

(x,y)

Reas_01_001-084.indd Sec2:28Reas_01_001-084.indd Sec2:28 5/23/07 1:20:34 PM5/23/07 1:20:34 PM

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

quad(x1,y1,x2,y2,x3,y3,x4,y4)

rect(x,y,width,height)

ellipse(x,y,width,height)ellipseMode(CENTER)

rectMode(CORNER)�11

• colori:

• in scala di grigi: un valore in [0,255] • background(255); // Setting the background to white• stroke(0); // Setting the outline (stroke) to black• fill(150); // Setting the interior of a shape (fill) to grey • rect(50,50,75,100); // Drawing the rectangle

• RGB: three values in [0,255] • fill(127,0,0); // Dark red• ellipse(40,20,16,16);• fill(255,200,200); // Pink (pale red)• ellipse(60,20,16,16);

• in scala di grigi, o RGB, più alfa • fill(0,0,255); // No fourth argument means 100% opacity• rect(0,0,100,200);• 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);

�12

• stroke(color), strokeWeight(width), nostroke()

• controllano il colore con cui viene disegnato il contorno delle figure, lo spessore (in pixel), e la presenza del contorno

• fill(color), nofill()

• 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

Animazioni e Interattività

�14

void setup() { size(500,300); } void draw (){ // Displays the frame count to the Console println("I'm drawing"); println(frameCount);}

eseguito all’avvio del programma

eseguito dopo setup(). Il codice all’interno di draw() viene eseguito ciclicamente fino alla

chiusura del programma

�15

int diam = 20; void setup() { size(500,300); background(180); stroke(0); strokeWeight(3); fill(255,50); } void draw (){ ellipse( width/2, height/2, diam, diam);}

void draw (){ if (diam < 500) diam++; ellipse( width/2, height/2, diam, diam);}

void draw (){ background(180); if (diam < 500) diam++; ellipse( width/2, height/2, diam, diam);}

alternativa 1

alternativa 2

void draw (){ ellipse( mouseX, mouseY, diam, diam);}

alternativa 3�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()

• la sintassi, i tipi di dato di base, gli operatori, … funzionano esattamente come in Java

�17

Aspettatevi l’inaspettato

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

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

Un po’ di fisica?

�20

�21

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

Popolazioni

�22

�23

float[] xPos = new float[100];float[] yPos = new float[100];float[] xVel = new float[100];float[] yVel = new float[100];float[] yAcc = new 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); }} �24

Processing Particle Study by Reza