For many of these exercises it will help to have graph paper. If you don’t have any, you can download and print this page of graph paper

Note that in Processing, we set the grid origin (0,0) point in the upper left corner. Also note that increasing values of Y go down rather than up like you have seen in your math class. This is ok and has to do with how computer displays are normally programmed. So, x goes across to the right; and y goes down. Width and Height (for rect and ellipse) are determined by the little squares (pixels) on the grid.

### Drawing Functions: point(), line(), rect(), ellipse()

The `point`

function draws a point at the given x and y location on the screen. Parameters (also referred to as arguments or coordinates) are *always* given in (x,y) order:

1 2 |
point(x,y); point(4,5); |

The `line`

function draws a line between two x and y locations on the screen:

1 2 |
line(x1,y1, x2,y2); line(1,3,8,3); |

The first two arguments “1,3” are the start point of the line and the last two arguments “8,3” are the end point of the line:

The `triangle`

function draws a triangle. The function takes 6 parameters describing 3 points: x1,y1, x2,y2, x3,y3.

You call the triangle function like this:

1 2 |
triangle(x1,y1, x2,y2, x3,y3); triangle(200,100, 300,300, 100,300); |

The `rect`

function draws a rectangle. The **upper left corner** of the rectangle is specified by the x and y parameters and then the width and height.

Calling the `rect`

function looks like this with 2,3 as the x and y position of the rectangle with a width of 5 and a height of 4:

1 2 |
rect(x,y,w,h); rect(2,3,5,4); |

The `ellipse`

function is similar to `rect`

except it draws circles and ellipses. This time, the **center** of the ellipse is specified by the x and y parameters and then the width and height.

Calling the `ellipse`

function looks like this example with 3,3 as the x and y position of the ellipse with a width of 5 and height of 5:

1 2 |
ellipse(x,y,w,h); ellipse(3,3,5,5); |

Complete Activity 1

Complete Activity 2