Introduzione a Processing

Транскрипт

1 Processing è, insieme, un ambiente e linguaggio di programmazione per creare immagini, animazioni, prodotti multimediali interattivi Introduzione a Processing Roberto Ranon 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 1 * processing.org/download/ 2

2 Video Musicale per The Nest That Sailed The Sky di Peter Gabriel realizzato con Processing da Glenn Marshall Good Morning! di blprnt Una visualizzazione di 11,000 tweet raccolti nell arco di 24 ore e contenenti le parole good morning 3 4

3 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

4 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 Forme e Colori 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 8

5 1.2 Simple Shapes Pixels 5 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. rect è una delle istruzioni che disegnano Point Line Rectangle Ellipse gli argomenti di questo tipo di istruzioni sono, di solito, in pixel fig. 1.4 For each shape, ogni we pixel will ask nella ourselves finestra what di un applicazione information is Processing required to è specify individuato the location dalle sue and size (and later color) of coordinate that shape x and 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 of 10 pixels and of 10 pixels. This isn t (0,0) particularly è il pixel in realistic alto a since sinistra 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, (-1, it -1) is nice to è work il pixel with in smaller basso a numbers destra; in order e to present sono the variabili pixels as they might appear on di graph sistema paper (for now) to better illustrate the inner workings of each line of code y-axis fig. 1.5 x-axis x Point (4,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 y-axis x-axis Point B (8,3) Point A x y line (1,3,8,3); y Point B x y 9 L ordine delle istruzioni è, ovviamente, importante! 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); 10 fig. 1.6 Point A (1,3)

6 line(x1, y1, x2, y2) point(x, y) (x2,y2) point(x, y) point(x, y) triangle(x1, y1, x2, y2, x3, y3) line(x1, y1, x2, y2) point(x, y) line(x1, y1, x2, (x2,y2) y2) (x4,y4) line(x1, y1, x2, y2) quad(x1, y1, x2, y2, x3, y3, x4, y4) (x2,y2) triangle(x1, y1, x2, y2, x3, y3) (x2,y2) point(x, y) line(x1, y1, x2, y2) triangle(x1, (x2,y2) y1, (x3,y3) x2, y2, x3, y3) triangle(x1, y1, x2, y2, x3, y3) rect(x, y,, ) colori: in scala di grigi: un valore in [0,255] (x2,y2) quad(x1, (x2,y2) y1, (x3,y3) x2, y2, x3, y3, x4, y4) (x4,y4) 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 point line(x1,y1,x2,y2) line(x1, y1, x2, y2) triangle(x1,y1,x2,y2,x3,y3) rect(50,50,75,100); // Drawing the rectangle triangle(x1, y1, x2, y2, quad(x1, x3, y3) y1, x2, y2, x3, y3, x4, y4) (x4,y4) quad(x1, (x2,y2) y1, (x3,y3) x2, y2, x3, y3, x4, y4) ellipse(x, y,, ) (x4,y4) RGB: three values in [0,255] fill(127,0,0); // Dark red ellipse(40,20,16,16); (x2,y2) rect(x, (x2,y2) y, (x3,y3), ) fill(255,200,200); // Pink (pale red) ellipse(60,20,16,16); triangle(x1, y1, x2, y2, quad(x1, x3, y3) y1, x2, y2, x3, rect(x, y3, x4, y, y4), ) in scala di grigi, o RGB, più alfa (x4,y4) quad(x1,y1,x2,y2,x3,y3,x4,y4) ellipse(x,y,,) fill(0,0,255); // No fourth argument means 100% opacity rect(x, y,, ) bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2) ellipsemode(center) rect(0,0,100,200); (cx1,cy1) fill(255,0,0,255); // 255 means 100% opacity rect(0,0,200,40); rect(x,y,,) fill(255,0,0,191); // 75% opacity ellipse(x, y,, ) rect(0,50,200,40); rectmode(corner) (x4,y4) 11 (x2,y2) (cx2,cy2) quad(x1, y1, x2, y2, x3, rect(x, y3, x4, y, y4), ) ellipse(x, y,, ) ellipse(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) (cx1,cy1) the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to (cx1,cy1) ellipse(x, y,, ) rect(x, y,, ) bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2) (cx1,cy1) bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2) (x2,y2) (cx2,cy2) Reas_01_ indd Sec2:28 (x2,y2) (cx2,cy2) Geometry primitives (x2,y2) (cx2,cy2) Processing has seven bezier(x1, functions to assist y1, in cx1, making cy1, simple cx2, shapes. cy2, These x2, images y2) show the format for each. Replace ellipse(x, the parameters y, (cx1,cy1), with ) numbers to use them within a program. These functions are demonstrated in codes 2-04 to Geometry primitives Processing has seven functions to assist in making simple shapes. These images show the format for each. Replace Geometry primitives the parameters with numbers to use them within a program. These functions are demonstrated in codes 2-04 to Processing has seven functions to assist in making simple shapes. These images show the format for each. Replace 5/23/07 1:20:34 PM

7 stroke(color), strokeweight(), 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 Animazioni e Interattività importante: queste istruzioni impostano lo stato che viene utilizzato per disegnare, che resta attivo finché altre istruzioni lo modificheranno 13 14

8 eseguito all avvio del programma void setup() size(500,300); void draw () // Displays the frame count to the Console println("i'm drawing"); println(framecount); 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( /2, /2, diam, diam); void draw () alternativa 1 if (diam < 500) diam++; ellipse( /2, /2, diam, diam); alternativa 2 alternativa 3 void draw () background(180); if (diam < 500) diam++; ellipse( /2, /2, diam, diam); void draw () ellipse( mousex, mousey, diam, diam); 16

9 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

10 void setup() size(500,300); background(180); stroke(0); strokeweight(3); void draw() fill(random(0,255)); ellipse ( random( ), random( ), 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

11 float xpos,ypos, xvel, yvel, yacc; float radius = 20; void setup() size(500,500); fill(0); xpos = /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 > ) xvel = -xvel; if (ypos < 0 ypos > ) yvel = -yvel; ellipse(xpos, ypos, radius, radius); Popolazioni 21 22

12 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(); ypos[i] = random(radius, /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] > ) xvel[i] = -xvel[i]; if (ypos[i] < 0 ypos[i] > ) yvel[i] = -yvel[i]; ellipse(xpos[i], ypos[i], radius, radius); Processing Particle Study by Reza 23 24