Introduction

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

Part 1

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

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

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

eg

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

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

.......