An Introduction to Processing

Introduction

2007-03-25T11:53:00.001+01:00

In this project we will use the program “processing” to create an original and exciting work of art.

Processing can be downloaded for free from the processing website at www.Proce55ing.net. or processing.org

2007-03-25T11:52:00.000+01:00

2007-03-25T11:51:00.000+01:00

Part 1

2007-03-25T11:50:00.000+01:00

copy and paste this into processing and then click run:

size(200,100);
background(255,255,0);

stroke(255,0,0);
strokeWeight(20);
point(50,50);

Let us break this code down, line for line.

Size(200,100);

Calling the size function lets the size of the canvas to 200 pixels high, 100 pixels wide. If you do not call this at the beginning, the default will be 100x100.

background(0,0,0);

Calling the background function lets you change the color of the entire canvas. The default is grey.

stroke(255,0,0);

Calling the stroke function lets you change the current drawing color so that every drawing command called after it will draw using that color. 255,0,0 means red. The default is black.

point(50,50);

Calling the point function will set the pixel at 50,50 to the current stroke color. In this case, red.

stroke(0,255,0);
point(100,50);

This code makes a green dot in the center.

stroke(0,0,255);
point(150,50);

This code makes the blue dot on the right.

strokeWeight(12);

the number controls the size of the stroke/pen.

Exercise 1 :

Try changing the numbers to make different sized canvas and background then try changing the other numbers. Add more dots and experiment with changing their order in the window.

Keep print screens of your progress.

REMEMBER: The screen is a graph of pixels - each individually addressable by a unique (X,Y) coordinate. The origin (0,0) is at the top left corner of the rectangle. As you add to Y, you move down. As you add to X, you move to the right.

Part 2

2007-03-25T11:49:00.002+01:00

Let us now expand to more complex shapes. Here are two lines. The first one is white, and the second one is yellow.

background(0,0,0);
stroke(255,255,255);
line(0,0,60,40);
stroke(255,255,0);
line(30,50,100,100);

In the line function, the first two parameters are the first x,y coordinate, and the last two parameters are the second x,y coordinate. The line is drawn from the first coordinate to the second.

Exercise 2 :

Horizontal, Vertical, and Angled lines all contribute to creating different moods of a picture. Straight, horizontal lines, commonly found in landscape photography, gives the impression of calm, tranquility, and space. An image filled with strong vertical lines tends to have the impression of height, and grandeur. Tightly angled convergent lines give a dynamic, lively, and active effect to the image.

Please add at least 5 lines to your canvas. You should give consideration to both the placing of these in relation to both each other and the size of the frame. You should consider overlapping them to create dynamic effects as well as continuing them off the page.

Part 3

2007-03-25T11:49:00.001+01:00

Triangle

triangle will draw a three-pointed polygon.

It has six parameters. numbers 1 and 2 are the first X,Y coordinate. numbers 3 and 4 are the second X,Y coordinate and numbers 5 and 6 are the third X,Y coordinate.

Type the code below into processing exactly as it is . When it works you can change the numbers to create your own triangles.

triangle(12,50, 90,15, 50,60);

Now try to make a more equilateral triangle. Add a second triangle to make a star design.

..........

Rectangle

rect will draw a rectangle. The first and second parameter will specify the position of the top left corner, while the third and fourth parameters specify the width and height.

rect(x, y, width, height);

rect(25,25,50,50);

Fit 3 squares inside each other and record the result.

...............

Ellipse

Ellipse will draw an oval. The first 2 numbers specify the middle of the ellipse. The next are its width and height.

ellipse(80,10,60,60);

Try smooth(); in conduction with this shape:Put it BEFORE the ellipse command

.....

QUADRILATERAL

quad will draw a four-pointed polygon. The structure of the parameters are similar to that of triangle, but this time, a fourth pair of parameters are added to specify a fourth X,Y coordinate. Type in the code below and then adjust numbers until you are happy that you understand it.

quad(61,60, 94,60, 99,83, 81,90);

Exercise 3

Try to create an interesting geometric design that uses rectangles, circles, ellipses and quads and then record this.

Part 4

2007-03-25T11:44:00.002+01:00

fills and strokes

Quad(61,60, 94,60, 99,83, 81,90);

fill(#CC6600);
stroke(#FFFFFF);

.........

The colours are based on hexadecimal system often used with web colours. The first 2 numbers represent the amount of red the next two green and the last blue. Clearer explanationation of this can be found on www.w3schools.com

Fill is what makes the polygons green, while stroke is what makes the outlines red. The default fill is white. But what if I don't want a fill?

.........
noFill( );

..........

Exercise 4

Create a sketch which has at least 4 different shapes. Try to use all of the commands that we have encountered so far. Make sure that you choose your colours carefully. Change the order of the shapes eg put rect below triangle and see if you can see any difference in the output sketch.

Part 5 -- 3d boxes

box()

Examples

translate(58, 48, 0);
rotateY(0.5);
box(40);

translate(58, 48, 0);
rotateY(0.5);
box(40, 20, 50);

Description A box is an extruded rectangle. A box with equal dimension on all sides is a cube. Syntax

box(size);
box(width, height, depth);

example

size(100,100,P3D);

noStroke();

lights();

translate(50,50,0);

rotateY(0.5);

box(40);

example2

/**

* Primitives 3D.

* Created 16 January 2003

size(200, 200, P3D);

background(0);

lights();

noStroke();

pushMatrix();

translate(47, height/2, 0);

rotateY(0.75);

box(50);

popMatrix();

pushMatrix();

translate(200, height/2, 0);

sphere(100);

popMatrix();

.......

Part 6

2007-03-25T11:44:00.001+01:00

Part 6 Java Comments

Comments start a line with "//" . They are not executed. They are inserted by the programmer to explain what she is doing. And when coming back later, you or another programmer can quickly follow what has been done.

Typing comments throughout your code does not have any affect on the program's commands. However, like showing you “working out” in maths, adding comments to your code display your thought processes as you create your design.

Comments are added using the // command followed by some text

Another common practise is using rows of characters such as %%%%%% or ************ to mark out or emphasise some important step.

//a simple program

//**************

//prepare paper and pen

Paper 0

Pen 100

//###################

//#This is a way to make an

//#emphatic comment

//####################

Line 0 0 50 100

//%%%%%%%%%%%%%%%

//% %

//% look at me! %

//% %

//%%%%%%%%%%%%%%%

.................

Now, you can see the quad underneath the oval because only the strokes are being drawn. Similarly, there is noStroke, which disables the outline from being drawn. To enable stroke or fill once more, you must call stroke or fill, specifying a color.

Extension

Composition is the plan, placement or arrangement of the elements of art in a work. The general goal is to select and place appropriate elements within the work in order to communicate ideas and feelings with the viewer.

Change the locations of the shapes and their colours (or noFill( );) You can repeat shapes but you must have at least 6 shapes.

.........................

Part 7

2007-03-25T11:40:00.000+01:00

Drawing with curves is slightly more complex than drawing with straight lines. Specifying a curve requires providing non-visual information that helps to define the severity and direction of curvature. First we will look at Bezier curves

bezier(50, 20, 100, 0, 90, 80, 50, 90);
//this code shows you the points used for the curve information

strokeWeight(9);

point(100,0);
point(90,80);

For the bezier( ) function, the first two parameters specify the first point in the curve and the last two parameters specify the last point. The middle parameters provide the context for defining the shape of the curve. The 2nd two numbers make a kind of target for the first two numbers and the 5th and 6th numbers make a target co-ordinate for the ending point specified at 7 and 8.

see the processing - help - reference for more information.

....

Exercise - Try to make either a "love heart" shape or a Nike sign using 2 bezier curves.

.......

now paste this in to processing and play!!

void draw()

{

background(204);

bezier(mouseX, 20, 100, 0, 90, 80, 50, 90);

}

.........

Curves are slightly different - post this link into your browser

http://www.cse.unsw.edu.au/~lambert/splines/CatmullRom.html

....................................

You might also want to try some arcs

arc()

Examples

arc(50, 55, 50, 50, 0, PI/2);
noFill();
arc(50, 55, 60, 60, PI/2, PI);
arc(50, 55, 70, 70, PI, TWO_PI-PI/2);
arc(50, 55, 80, 80, TWO_PI-PI/2, TWO_PI);

Description Draws an arc in the display window. Arcs are drawn along the outer edge of an ellipse defined by the x, y, width and height parameters. The origin or the arc's ellipse may be changed with the ellipseMode() function. The start and stop parameters specify the angles at which to draw the arc. Syntax

ellipse(x, y, width, height, start, stop)

Part 8

2007-03-25T11:39:00.000+01:00

Part 8 Points

point()

Examples

point(30, 20);
point(85, 20);
point(85, 75);
point(30, 75);

size(100, 100, P3D);
point(30, 20, -50);
point(85, 20, -50);
point(85, 75, -50);
point(30, 75, -50);

Description Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point, and the optional third value is the depth value. Drawing this shape in 3D using the z parameter requires the P3D or OPENGL parameter in combination with size as shown in the above example. Syntax

point(x, y);
point(x, y, z);

Part 9

2007-03-25T11:37:00.000+01:00

Part 9 more shapes

Although Processing has provided these quick primitives, you are still free (and encouraged) to construct your own shapes.

Using the beginShape( ) and endShape( ) methods are the key to creating more complex forms. beginShape( ) begins recording vertices for a shape and endShape( ) stops recording. The beginShape( ) command requires a parameter to tell it which type of shape to create from the provided vertices. The parameters available for beginShape( ) are LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, QUADS, QUAD_STRIP, and POLYGON. After giving the beginShape( ) command, a series of vertex( ) commands must follow. To stop drawing the shape, give the endShape( ) command. Vertex( ) commands with two parameters specify a position in 2D and vertex( ) commands with three parameters specify a position in 3D. Each shape will be outlined with the current stroke color and filled with the fill color (see the Color section for more information).

Here are some examples from Proce55ing.net

beginShape(LINE_LOOP); vertex(30, 20, -50); vertex(85, 20, 0); vertex(85, 75, -80); vertex(30, 75, 0); endShape( );
beginShape(TRIANGLES); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape( );
beginShape(TRIANGLE_STRIP); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape( );
noFill( ); beginShape(TRIANGLE_STRIP); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape( );
noStroke( ); fill(153, 153, 153); beginShape(TRIANGLE_STRIP); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape( );
noStroke( ); fill(102); beginShape(POLYGON); vertex(38, 23); vertex(46, 23); vertex(46, 31); vertex(54, 31); vertex(54, 38); vertex(61, 38); vertex(61, 46); vertex(69, 46); vertex(69, 54); vertex(61, 54); vertex(61, 61); vertex(54, 61); vertex(54, 69); vertex(46, 69); vertex(46, 77); vertex(38, 77); endShape( );
beginShape(LINE_STRIP); curveVertex(84, 91); curveVertex(68, 19); curveVertex(21, 17); curveVertex(32, 100); endShape( );
beginShape(LINE_STRIP); curveVertex(84, 91); curveVertex(84, 91); curveVertex(68, 19); curveVertex(21, 17); curveVertex(32, 100); curveVertex(32, 100); endShape( );
beginShape(LINE_STRIP); bezierVertex(30, 20); bezierVertex(80, 0); bezierVertex(80, 75); bezierVertex(30, 75); endShape( );

Part 9

2007-03-25T11:22:00.002+01:00

Part 9

Part 10: Images

2007-03-25T11:22:00.001+01:00

size(395, 253);

PImage a;

a=loadImage("http://www.isse-school.nl/images/building/ISSE%20front%20view.JPG");

image(a, 0, 0);

.....

now let's try tinting

Examples

PImage b;
b = loadImage("http://www.isse-school.nl/images/building/ISSE%20front%20view.JPG");
image(b, 0, 0);
tint(0, 153, 204);
image(b, 50, 0);

PImage b;
b = loadImage("http://www.isse-school.nl/images/building/ISSE%20front%20view.JPG");
image(b, 0, 0);
// Tint blue and set transparency
tint(0, 153, 204, 126);
image(b, 50, 0);

exercise 5

The history of art has produced many iconic images such as mona lisa,s smile or Michaelangleos touching the fingers thing. For the final activity you will create an original piece of work using processing and inspired by a traditional aspect of art. You might tint a work of art differently, follow some curves using bezier curves or use golden raios. You must explain within your comments what you are trying to do. Your work could be as literal as Duchamp who drew a moustache on the Mona Lisa or far more subtle be creative but remember to keep a diary of your progress.

for

2007-03-25T10:56:00.000+01:00

for()

for(int i=0; i<40; i=i+1)
{
 line(30, i, 80, i);
}

for(int i=0; i<80; i=i+5)
{
 line(30, i, 80, i);
}

for(int i=40; i<80; i=i+5)
 {
 line(30, i, 80, i);
}

for(int i=30; i<80; i=i+5) {
 for(int j=0; j<80; j=j+5) {
   point(i, j);
 }
}

Description

Controls a sequence of repetitions. A for() structure has three parts: init, test, and update. Each part must be separated by a semi-colon ";". The loop continues until the test evaluates to false. When a for() structure is executed, the following sequence of events occurs:
1. The init statement is executed
2. The test is evaluated to be true or false
3. If the test is true, jump to step 4. If the test is False, jump to step 6
4. Execute the statements within the block
5. Execute the update statement and jump to step 2
6. Exit the loop.

Syntax

for(init; test; update) {
 statements
}

Parameters

init	statement executed once when beginning loop
test	if the test evaluates to true, the statements execute
update	executes at the end of each iteration
statements	collection of statements executed each time through the loop

Usage

Web & Application

While

2007-03-25T10:27:00.000+01:00

while()
	int i=0; while(i<80) { line(30, i, 80, i); i = i + 5; }
Description	Controls a sequence of repetitions. The while structure executes a series of statements continuously while the expression is true. The expression must be updated during the repetitions or the program will never "break out" of while().
Syntax	while(`expression`) { `statements` }

2007-02-27T21:20:00.000+01:00

An Introduction to Processing

Introduction

Part 1

Part 2

Part 3

Part 4

Part 5 -- 3d boxes

example

example2

Part 6

Part 6 Java Comments

Part 7

arc()

Part 8

point()

Part 9

Part 9

Part 10: Images

for

for()

While

while()