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