Graphics with Processing I

COMP 1010 Home > Back to Extra Labs

Introduction In this lab you will use the programming language Processing in its specialized environment. You can download and install both the language and environment on the Processing website. Note that because Processing is an extension of Java they look very similar. Programs in Processing are referred to as "Sketches". Before we begin programming you should review the following concepts: Writing a Method Calling a User-Defined Method For Loops We will also being using some basic math with the float data type. Let's start sketching!

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 program in Java.

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 stored as Red, Green and Blue values (RGB) values. Each RGB value is an integer value between 0 and 255 and many colours can be represented as a combination of 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 this colour wheel.

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 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 centred at (430,380) width 50 height 200 

The output for this code will look like this:

Note: if you have not called the stroke method beforehand to change the colour of your stroke the default colour 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 gray 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), width 230 and height 150
• a purple ellipse with a grey outline centred at (400,300) with width 50 and height 200

Here's an example of how you could code this and what the resulting output would look like:

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

void draw(){
     stroke(0,0,255);
     point(10,10);
     line(101,110,500,500);
  
     fill(100);
     rect(20,20,230,150);
  
     stroke(155);
     fill(200,0,200);
     ellipse(400,300,50,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 (<math>x_1</math>, <math>y_1</math>) and (<math>x_2</math>,<math> y_2</math>) is:

<math>y - y_1 = \frac{y_2 - y_1}{x_2 - x_1}(x - x_1)</math>

If you wanted to represent this equation in a program you could use a for loop. Your loop would go from <math>x_1</math> to <math>x_2</math> increasing the <math>x</math> value by 1 each iteration. For every iteration in the loop you would calculate the <math>y_i</math> value using the formula and <math>x_i</math> and then plot (<math>x_i</math>, <math>y_i</math>).

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 <math>x</math> and <math>y</math> values.

<math>x(t) = x_1 - x_1t + x_2t y(t) = y_1 - y_1t + y_2t \!</math>

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

 float x,y;
for (float t = 0; t<=1; t += 0.01) {
     x = 10 - 10 * t + 490 * t;
     y = 20 - 20 * t + 90 * t;
     point(x,y);
} 

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 <math>t</math> 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:

<math>x(t) = r\cos(2\pi t) y(t) = r\sin(2\pi t)\!</math>

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

<math>x(t) = r\cos(2\pi t) + x_1 y(t) = r\sin(2\pi t) + y_1\!</math>

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”.

Try using a for loop to create a decagon (10-sided polygon) that is centred around the point (200,180) with a radius of 20 by using the parametric equation of a circle.

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

These drawing methods are just the basics of Processing - there's much more you can learn about using equations to render graphics. See Graphics With Processing II to learn about animating your Sketches and Graphics With Processing III to play with images and adjust their intensity and brightness. If you're eager to learn more about graphics after that you'll just have to continue on in Computer Science and see where it takes you!