1.5 Graphics

In this section we will get an introduction to some of Processing's graphics capabilities. To start with we'll need to discuss Processing's coordinate system. It follows the approach used by most computer languages. The coordinates (0,0) represent a point at the top left of the graphics window. This in not how you would plot coordinates in math class because the farther down you go the bigger y gets (the point at 0 and 0 would be bottom left if you were doing math or programming in Turing).

Next we need to discuss how colours are specified. Colours are given by specifying how much red, green and blue (RGB colour scheme) you want for each pixel displayed. You specify how much by giving a number between 0 and 255 for each colour. Zero means none of that color and 255 means maximum of that colour. There is a method called color that allows you to create a colour by specifying the 3 values for RGB. For instance, color red = color(255,0,0); would create a variable called red (maximum red, no green and no blue) that you could use later in your program any time you want red (using background, stroke or fill).

background

The background statement is used to set the background colour for the drawing window. By default the background is light grey. To make the background yellow you could use the statement background(255,255,0);

size

The size statement is used to specify the size of the drawing window. By default it is a small 100 x 100 pixel square. To make the window 600 pixels wide by 200 pixel high you would say size(600, 200);

stroke & fill

When you use Processing methods to draw things there are two places you can give colours. Stroke is used to give the colour to outline the shape you are drawing. Fill is used to give the colour to fill the shape in. The following program will make a 400 pixel square window, with a white background, a rectangle that is filled in red and outlined in blue with a top left corner at (50, 100) and that is 75 pixels wide by 200 pixels high and a green line drawn from the top right corner of the rectangle: 
background(255,255,255);
size(400,400);
fill(255,0,0);
stroke(0,0,255);
rect(50, 100, 75, 200);
stroke(0,255,0);
line(125, 100, 225, 300);

rect

As you can see from previous example, rect is used to draw a rectangle. The first two parameters (numbers inside the brackets) give the x and y coordinate of the top left corner of the desired rectangle. The third number gives the width of the rectangle and the four gives the height.

line

The line command takes four parameters. The first two are the x and y coordinate of one endpoint of the line. The third and fourth are the x and y coordinate of the other endpoint.

ellipse

The ellipse command takes four parameters. The first two are the x and y coordinate of the centre of the ellipse. The third parameter is the horizontal width of the ellipse and the fourth is the vertical width. If the third and fourth parameters are the same then you will get a circle. Here is an example:
// cirlce with centre (100, 50) and diameter of 30
ellipse(100, 50, 30, 30);
// ellipse that is twice as wide as high with centre at (300, 100);
ellipse(300, 100, 80, 40);

Drawing Shapes

You can draw arbitrary shapes by specifying points (using a command called vertex and letting processing connect the dots. You start defining the shape by using beginShape and finish by using endShape. If you want the last point connected to the first point you specify the parameter CLOSE when you call endShape. Here is an example that will draw an unclosed triangle filled in green and a closed shape that looks like a flag filled in blue. 

size(300, 300);

// triangle
fill(0, 255, 0);
beginShape();
vertex(50, 50);
vertex(75, 75);
vertex(25, 75);
endShape();

// flag
fill(0, 0, 255);
beginShape();
vertex(150, 250);
vertex(200, 125);
vertex(250, 150);
vertex(190, 162);
endShape(CLOSE);

Notice how only two sides of the triangle have a black line (the right side and bottom). If we wanted the whole triangle to be outlined in black we would need to change the first endShape(); to endShape(CLOSE); so that the last vertex of the triangle would be connected the the first vertex with a line.

More About Colour

There are other options available to specify colours. You can specify a colour as a single hexidecimal number. Hexadecimal numbers use the digits 0 through 9 as well as the letter A through F. A hexadecimal constant is specified in Processing by preceeding the number with the pound (#) symbol. Processing comes with a colour chooser that you can use to pick a colour and either get its RGB values or the hexedecimal value. You can get this by choosing Tools->Color Selector


This program specifies colour using hexadecimal values. The first 2 digits are for the amount of red (0 means no red, FF means max red). The middle two digits are for green and the last 2 digits are for blue. 

fill(#1AC9A7);
stroke(#0000FF); // blue
rect (20, 30, 40, 50);

Another option is to download the Colour.pde file. It has a large number of predefined colour constants. To use this file you need to add a tab like we did to use Input.pde. Here is an example of a program that uses it. The advantage of this is you can use names for colours instead of numbers.

draw

There is a predefined method called draw that can be used to setup animation in your drawings. draw keeps getting called over and over in an endless loop. To see what coordinates the mouse is at you can use the following draw method. You can add all the drawing methods we've talked about in this section to the draw method. 

void draw()
{
  text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);
}

Exercise 1.5

    For all of these questions make the output window at least 500 x 500.

  1. Write a program that will put four squares (in different colours) with sides of length 100 at the four corners of the output window.
  2. Write a program that will produce the five Olympic rings.
  3. Write a program that will draw a house with the sun up in the sky. Draw rays coming from the sun.
  4. Write a program that will draw a diamond outlined in red and filled in yellow