Difference between revisions of "Graphics with Processing I"

Revision as of 13:02, 3 April 2012

COMP 1010 Home > Back to Extra Labs

Step 1: Creating Your Methods and Window

To start drawing in Processing you need to set up your methods and create a window. Instead of a main method like you use in a Java program you will need two methods: setup and draw. Type these methods into your Processing environment as follows:

 void setup(){
     println("hello, world");
}

void draw(){
} 

To see your code execute click on the “Run” button in the toolbar. The “hello,world” message will greet you in the console at the bottom of your Processing program window.

Note: in the above example they only type println(“hello, world”) to print the statement and do not include System.out. beforehand. You can include the System.out. statement if you like but it is not necessary. Processing programs’ syntax is less wordy than the equivalent Java p.

In your Processing program all of your drawings will be displayed in a window. To create a window add the following line to your setup method:

 size(600,600); 

This creates a 600x600 pixel window that you can now draw into. Once again, to see your code execute (and the window display) click on the “Run” button in the toolbar.

Note: you are calling the system defined method size to create this window. In the 600x600 window you created in the previous step the lowest x and y values are at the top left hand corner. X values increase as you extend to the right and y values increase as you move down the window.

Coordinates in the window are stored as real numbers using the float data type. Each x,y coordinate in the window represents a pixel.

Step 2: Learning to Colour

Colour in graphics is determined by Red, Green and Blue values (RGB) values. Each RGB value is an integer value between 0 and 255 and every colour can be representeded as a composite RGB values. The RGB value (0,0,0) represents black and lightens as you increase the values all the way up to (255,255,255) which represents white. Each RGB value represents the strength of its representative colour; this is shown in the colour wheel below:

To produce grey values set the RGB values equal to each other. Higher RGB values will produce darker greys and lower RGB values will producer lighter grays.

Set the background colour of your window using the method background() with RGB values as the parameters. Play with this till you find a colour you like. For instance, the following code would produce an orange background:

 background(255,125,0); 

To change the colour of your paint brush’s stroke you have to call the stroke method – its parameters are the RGB value of the colour you want to paint in:

 stroke(0,0,255); 

If you want to change the colour of a specific pixel you can call the point method; its parameters are the x,y coordinates of the specified pixel:

 point(100,100); 

Step 3: Draw Primitive Shapes

Drawing shapes (instead of individual pixels) is done by calling their respective methods. Common examples are shown below:

 line(10, 20, 490, 90);     //line from (10,20) to (490,90)
rect(80,400,200,50);       //rectangle upper left corner at (80,400) width 200, height 500
ellipse(430,380,50,200)    //ellipse centered at (430,380) width 50 height 200 

Note: if you have not called the stroke method beforehand to change the colour of your stroke the default colour for point is black.

For ellipses and rectangles you can set the interior fill colour by calling the fill method. You can pass it one parameter to set it to that RGB grey colour. Alternatively, you can pass three parameters to fill and it will use that RGB colour value to fill the shape.

 fill(210);                 //light gray 

Using the methods outlined above create a program that draws:

• a blue point at (10,10)
• a blue line extending from (101,220) to (500,500)
• a blue outlined rectangle with a grey fill from (20,20) to (230,150)
• a purple ellipse with a grey outline centered at (400,300) with width 50 and height 200

Step 4: Draw Using Math

Some shapes can be represented using equations. For example, the equation for a line that passes through two points (x¬1, y1) and (x2, y2) is:

If you wanted to represent this equation in a program you could use a for loop. Your loop would go from x1 to x2 increasing the x value by 1 each iteration. For every iteration in the loop you would calculate the yi value using the formula and xi and then plot (xi¬, y¬i).

But, there’s another way to do this using parametric equations. Below is a new representation of the first equation that introduces a new variable t and uses separate equations for x and y values.

In this equation t is assigned values in the range 0 to 1, where t=0 and t=1 are the endpoints. This equation can be translated to a for loop as follows:

This loop will draw a line from (10,20) to (490,90). In each iteration of the loop t is increased by 0.01. The line will be composed of 101 points: (t=0.0,0.01,0.02,…,0.99,1.0). To draw a line that appears continuous you should increment t by a smaller amount in the for loop.

Circles can also be drawn using a parametric equation that combines the formula for a circle and the Pythagorean trigonometric identity:

The last two equations above will take t values from [0,1] and convert it to an angle in radians by multiplying by 2π. This equation centres the circle around the origin – to centre it around a point (xi, yi) you must add the origin points as follows:

To draw a circle in Processing you can use the above equation and using the primitive line type draw lines from each (x,y) coordinate produced by the equation. This will create a rough approximation of a circle. Smaller t values will result in more circular “circles”. Using a for loop create a decagon (10-sided polygon) that is centered around the point (200,180).

Note: to use the sin and cos functions in Processing simply call cos(2* PI* t) and sin(2 * PI * t).