Processing Tutorial

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3.
variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D Processing is an open source programming language and environment for people who want to program images, animation and interaction. It can be downloaded from: www.processing.org/download for Linux, Macintosh and Windows.
Besides the published tutorials, there are very useful information in the Processing webpage. Online guides and examples can be found at http://processing.org/learning/ Also the forum at http://processing.org/discourse/ is a very efficient resource for learning Processing.
digital design practice | scripting in processing

programming concepts: key concepts in parametric and programming
CITA
Center for IT og Arkitektur

Kunstakademiets arkitektskole
1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D
message area text area text editor display window menu toolbar tabs
pde (processing development environment)

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D Processing uses a coordinate system which has the origin point at the top left corner. The x (horizontal) and y (vertical) values increase to the right and down.
y axis 0 origin (0,0) 0 1 2 3 4 5 6 7 x axis 1 2 3 4 5 6
The z axis, if created, has the origin on the screen level and increases along the depth.

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D a basic syntax to define a line on the coordinate system: line (2,1,4,6); (draw a line between point A (x value=2, y value=1) and point B (x value=5, y value=6))
y axis origin (0,0) 0 1 2 3 4 5 6 7 B (5,6) A (2,1) x axis 0 1 2 3 4 5 6

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D //draw a quad which has corners at point (30,20), point (90,20), point (70,80) and point (10,80) (clockwise). quad (30,20,90,20,70,80,10,80); //draw a triangle which has corners at point (20,10), point (20,80) and point (65,70). triangle (20,10,20,80,65,70); //draw a line between point (20,40) and point (20,90). line (20,40,20,90); //draw a point that has 20 as the x coordinate and the 40 y coordinate. point (20,40);

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D //draw a rectangle which has top left corner at point (10,20) and down right corner at point (80,30). rectMode (CORNERS); rect (10,20,80,30); //draw a rectangle which has center at point (10,20),80 units width and 30 units height. rectMode (CENTER); rect (10,20,80,30); //draw a rectangle which has top left corner at point (10,20), 80 units width and 30 units height. rect (10,20,80,30);

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D //draw a bezier with anchor points at (85,20) and (15,80) and control points at (40,10) and (60,90). bezier (85,20,40,10,60,90,15,80); //draw an ellipse which has top left corner at point (30,40) and down right corner at point (60,50). ellipse (CORNERS); ellipse (30,40,60,50); //draw an ellipse which has top left corner at point (30,40), x diameter 60 and y diameter 50. ellipse (CORNER); ellipse (30,40,60,50); //draw an ellipse which has center point at (30,40), x diameter 60 and y diameter 50. ellipse (30,40,60,50);

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D background (60,23,152); // set the background color as (60,23,152). stroke (255,20,31); // set the outline color as (255,20,31). fill (84,240,37); // set the interior color as (24,240,37) ellipse (55,30,60,50); // draw the ellipse with given coordinates and data. in greyscale 0 indicates black, 255 indicates white, and the values between indicates different tones of grey.
0
background (120); stroke (255); fill (0);
greyscale
// set the background color as 120 (grey). // set the outline color as 255 (white). // set the interior color as 0 (black)
255
ellipse (55,30,60,50); // draw the ellipse with given coordinates and data.
Any color can be identified by mixing red, green and blue with different values. As default each of them can have value between 0 and 255, whereas it is possible to change this scale.

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D transperency is defined after the color definition in the same brackets. for example, (20,50,360,100) defines the color as (20,50,360) and the transperency as (100). 0 indicates %100 transperency, 100 indicates %100 opacity and the values between indicates different transperency values. Click on the image to view the video on color & transperency size (400,200); background (200); stroke (255,20,10); fill (0); rect (20,50,360,100); stroke (10,255,30); fill (95,2,140,50); rect (65,25,60,150); fill (95,2,140,128); rect (170,25,60,150); fill (95,2,140,205); rect (275,25,60,150);
try to repeat this exercise. then change some values and commands to see how it changes.

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D size (200, 400); background (251,239,194); smooth (); stroke (0); fill (240); rectMode (CORNER); rect (20,50,160,300); noStroke (); fill (177,27,3); ellipseMode (CORNER); ellipse (20,50,160,160); stroke (55,115,169); strokeWeight (6); line (width/2,10,width/2,height-10); exercise: shapes01 try to repeat this exercise. then change some values and commands to see how it changes.

CITA

Data consist of measurements of physical characteristics. It is stored as numbers and characters. There are 2 types of numeric data: integer and floating-number. integer (int): whole numbers floating-numbers (float): decimal numbers. Another data element is a boolean variable which can have 2 values; true or false.
Variables store the data so that data can be reused several times. A variable has a name and a value. For example x can be the name of the data and 4 can be the value. //declare the variable x of the type int and assign the value to 10 int x = 10; //declare the variable y of the type float and assign the value to 21.4 float y = 21.4; //declare the variable b of the type boolean and assign the value to true boolean b = true;
int x = 50; int y = 80; rect (20,10,x,y);
// assign int x to 50 // assign int y to 80 // draw this rectangle.
int centerx = 50; int centery = 60; float r = 75.4; ellipse (centerx,centery,r,r);
// assign int centerx to 50 // assign int centery to 60 // assign float r to 75.4 // draw this ellipse.

CITA

Numeric data can be changed and varied by using arithmetic operations which are defined by the symbols. For example: int x = 10; // x is equeal to 10 x++; y--; z+=5; a-=3; b*=6; c/=2; // increase x with 1 (x is now 11) // decrease y with 1 (y is now 14) // increse z with 5 (z is now 13) // decrease a with 3 (a is now 37) // multiply b with 6 (b is now 120) // divide c with 2 (c is now 1)
int y = x + 5; // y is equal to 10+5=15 int z = y -7; // z is equal to 15-7=8
int a = z * 5; // a is equal to 8*5=40 int b = a /2; // b is equal to 40/2=20
int c = b % 3; // c is equal to modulus (b)=2
int a = 20; int b = a+10; int c = a*3; line (a,0,a,height); line (b,0,b,height); line (c,0,c,height);
// assign int a to 20 // assign int b to a+10 (=30) // assign int c to a*3 (=60) // draw this line // draw this line // draw this line.

CITA

other operators: ceil (): the closest int value that is greater than or equal to the parameter. ceil (2.4); ceil (4.7); // result is 3 // result is 5
floor (): the closest int value that is smaler than or equal to the parameter. floor (2.4); // result is 2 floor (4.7); // result is 4 round (): the closest int value of the parameter. round (2.4); // result is 2 round (4.7); // result is 5 min (): the smallest value in a sequence. min (-1, 5, 98); //result is -1 max (): the greatest value in a sequence. max (-1, 5, 98); //result is 98

CITA

Decisions: The flow of the program can be changed by using control structures. This is performed by relational expressions and decisions. Relational expressions are: < (less than) > (greater than) <= (less than or equal to) >= (greater than or equal to) == equality != inequality || (or) && (and) ! (not) int x = 10; int y = 20; if (x < 15) { rect (20,10,50,70); } if (y>=25) { ellipse (75,65,40,60); }
Conditionals: Conditionals allow a program to make decisions about which lines of code run and which do not. The if structure is used to make these decisions: if (test) {
statements}
// assign int x to 10 // assign int y to 20 // if x is smaller than 15, // draw this rectangle. // if y is greater than or equal to 25, // draw this ellipse.

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D int x = 10; int y = 20; if (x > 25) { rect (20,10,50,70); } else if (x>15) { triangle (20,10,40,80,70,40); } else { ellipse (50,40,50,70); } int x = 20; if (x < 15) { rect (20,10,50,70); } else { triangle (20,10,40,80,70,40); } // if x is smaller than 15, // draw this rectangle. // otherwise, // draw this triangle.
// if x is greater than 25, // draw this rectangle. // otherwise, if x is greater then 15, // draw this triangle. // otherwise, // draw this ellipse.

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D Click here to view the video on decisions and conditionals. int x = 10; int y = 20; if ((x > 25) || (y<30)) { rect (20,10,50,70); } else { ellipse (40,50,70,60); } int x = 10; int y = 20; if ((x > 25) && (y<30)) { rect (20,10,50,70); } else { ellipse (40,50,70,60); }
// if x is greater than 25 AND y is smaller than 30, // draw this rectangle. // otherwise, // draw this ellipse.
// if x is greater than 25 OR y is smaller than 30, // draw this rectangle. // otherwise, // draw this ellipse.

CITA

The for structure is used to perform repetitive calculations: for (init; test; update) { statements } example: for (int i = 10; i < 100; i+=10) { line (10, i-5, 90, i+5); } // the initial is i = 10 // the test is i < 100 // the update is i+=10 // repeat drawing the line until i is smaller than 100 // (this means that the program will draw 9 lines) the result will be:

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D for (int i =1; i<10; i++) { for (int k = 1; k<10; k++) { rectMode (CENTER); rect (10*i,10*k,5,5); } } for (int i =1; i<10; i++) { line (10, 10*i, 90, 10*i); }

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D exercise: repetition1 Click on the image to view the video on repetition try to repeat this exercise. then change some values and commands to see how it changes. for (int i =0; i<=400; i+=20) { for (int k = 0; k<=400; k+=20) { colorMode (RGB, 200); fill ((i+k)/4); ellipse (i,k,20,20); } } size (400,400); smooth (); background (255); noStroke ();

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D beginShape (); vertex (40,10); vertex (90,60); vertex (50,90); vertex (50,50); vertex (25,90); vertex (10,40); endShape (CLOSE); // start drawing the shape by vertices // define vertice1 // define vertice2 (clockwise) // define vertice3 (clockwise) // define vertice4 (clockwise) // define vertice5 (clockwise) // define vertice6 (clockwise) // complete and CLOSE the shape. Shapes can be defined as a series of coordinates, called vertices. A vertex is defined by an x and y coordinate. The syntax used is: beginShape () vertex () endShape ()

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D exercise: vertex1 try to repeat this exercise. then change some values and commands to see how it changes. size (100,260); smooth (); beginShape (); vertex (20,20); vertex (width-20,20); for (int vertex vertex vertex vertex } i=40; i<height-40; i+=40) { (width-20,i); (width-60,i); (width-60,i+20); (width-20,i+20);
vertex (width-20,height-20); vertex (20,height-20); endShape (CLOSE);

CITA

// draw a point at each vertice but dont draw the outlines of the shape. beginShape (POINTS); vertex (40,10); vertex (90,60); vertex (50,90); vertex (40,50); vertex (25,90); vertex (10,40); endShape (); // draw a line between each pair of vertices. beginShape (LINES); vertex (40,10); vertex (90,60); vertex (50,90); vertex (40,50); vertex (25,90); vertex (10,40); endShape ();
// connect each group of three vertices as a triangle beginShape (TRIANGLES); vertex (40,10); vertex (90,60); vertex (50,90); vertex (40,50); vertex (25,90); vertex (10,40); endShape ();
// connect each group of three vertices as a triangle beginShape (TRIANGLE_STRIP); vertex (40,10); vertex (90,60); vertex (50,90); vertex (40,50); vertex (25,90); vertex (10,40); endShape ();
Try also, TRIANGLE_FAN, QUADS, QUAD_STRIP functions.

CITA

noFill (); beginShape (); curveVertex (15,90); curveVertex (25,40); curveVertex (40,25); curveVertex (55,85); curveVertex (80,70); endShape ();
// conntrol point 1 // anchor point 1 // anchor point 2 // anchor point 3 // anchor point 4 // conntrol point 2
noFill (); beginShape (); vertex (25,40); // anchor point 1 bezierVertex (90,5,80,75,80,85); // control point 1, control point2, anchor point2 endShape ();
noFill (); beginShape (); vertex (80,20); // anchor point 1 bezierVertex (70,65,15,10,5,30); // control point 1, control point2, anchor point2 bezierVertex (5,95,40,20,80,80); // the following bezier endShape ();

CITA

The random() function is used to create unpredictable values within the range specified by its parameters. random(high) random(low, high) The numbers returned from random() are always floating-point values; therefore, they cannot be assigned to an int variable. float f = random(5.2); // assign float f a value from 0 to 5.2 float f = random(-15.0, 12.0); // assign float f a value from -15.0 to 12.0
size (300,300); background (255); noStroke (); smooth (); for (int i = 0; i<40; i++) { float r = random (5,70.0); fill (random(255),random(255),random(255)); ellipse (random(width), random(height),r,r); }
exercise: random1 try to repeat this exercise. then change some values and commands to see how it changes.

CITA

ellipse (20, 20, 40, 40); translate(30, 30); ellipse (20, 20, 40, 40);
// draw ellipse // shift 30 right, 30 down. // draw the same ellipse
pushMatrix (); translate (40,50); rect (0,0,40,20); popMatrix (); rect (0,0,40,20);
// start the translation // shift 40 right, 50 down. // draw rectangle // finish the translation // draw the same rectangle.
rect (45,20,35,50); rotate (PI/8); rect (45,20,35,50);
// draw rectangle // rotate the coordinate system Pi/8 radians // draw the same rectangle.
ellipse(32, 32, 30, 30); scale (2); ellipse(32, 32, 30, 30);
// draw ellipse // multiply the values by 2 // draw the same ellipse.

CITA


CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D exercise: transform1 try to repeat this exercise. then change some values and commands to see how it changes. size (450,500); background (255); smooth(); for (int i=0; i<20; i++) { rect (width-20,20,5,100+10*i); translate (-5,0); rotate (PI/80); }

CITA

Before drawing 3D form in Processing, its necessary to tell the software to draw with a 3D renderer. The default renderer draws only 2D shapes. P3D is the simplest and most compatible renderer, and it requires no additional libraries. To use P3D, specify it as a third parameter to the size function. size (500, 500, P3D);

CITA

Shapes are placed within the 3D coordinate system by defi nition of their coordinates and with the transformation functions. In Processing, the point(), line(), and vertex()functions have additional parameters to set coordinates in 3D, but other shapes must be positioned with transformations. The translate() and scale() functions work the same way as in 2D, with an added parameter for the z-dimension, but the rotate() function is replaced by three separate functions: rotateX(), rotateY(), and rotateZ(). The rotateZ() function is identical to the rotate()function, but rotateX() and rotateY() are unique to working in 3D. Each rotates the coordinates around the axis for which it is named.
The pushMatrix() and popMatrix() functions also work identically in 3D. Pushing and popping the transformation matrix is particularly useful in 3D graphics to establish a place of operation and then restore an old one. Use the pushMatrix() function to push a transform onto the stack and set up the coordinate transform as you want it, including scaling, translations, and rotations. Create the local geometry, and then use popMatrix() to return to the previous coordinate system.

CITA

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3. variables & operations - data & variable - arithmetis operations - desisions & conditionals 4. repetition 5. shapes by vertices - orthogonals - curve vertices 6. randomness 7. transformations - translate - rotate - scale 8. 3D this is an example to introduce you drawing in 3D. try to write similar programs to draw several boxes. change the values and commands to see how they affect the result. the next tutorial will go further on 3D. size (500,500,P3D); smooth (); lights (); background (0); fill (220); stroke(50); translate(width/2, height/2, 0); rotateY(PI/5); rotateX (PI/7); box(200, 100, 200);

CITA


Processing Tutorial

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Processing Tutorial

Diunggah oleh

Hak Cipta:

Format Tersedia

1. download & support 2.basics - pde - coordinates - basic shapes - color - transperency 3.

digital design practice | scripting in processing

Center for IT og Arkitektur

pde (processing development environment)

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

int x = 50; int y = 80; rect (20,10,x,y);

// assign int x to 50 // assign int y to 80 // draw this rectangle.

digital design practice | scripting in processing

Center for IT og Arkitektur

int y = x + 5; // y is equal to 10+5=15 int z = y -7; // z is equal to 15-7=8

int a = z * 5; // a is equal to 8*5=40 int b = a /2; // b is equal to 40/2=20

int c = b % 3; // c is equal to modulus (b)=2

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

vertex (width-20,height-20); vertex (20,height-20); endShape (CLOSE);

digital design practice | scripting in processing

Center for IT og Arkitektur

Try also, TRIANGLE_FAN, QUADS, QUAD_STRIP functions.

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing

Center for IT og Arkitektur

// draw ellipse // shift 30 right, 30 down. // draw the same ellipse

rect (45,20,35,50); rotate (PI/8); rect (45,20,35,50);

// draw ellipse // multiply the values by 2 // draw the same ellipse.

digital design practice | scripting in processing

Center for IT og Arkitektur

digital design practice | scripting in processing