1. Coordinate system primer

We are going to be using some basic maths in this class (don’t freak out). Here is a romp through the basics of the coordinate system:

The coordinate system

Processing uses a cartesian coordinate system. You probably would have come across this in school. But the computing coordinate system is slightly different where the top left corner is the origin. This is just like the canvas in photoshop or illustrator.

Screen Shot 2015-02-13 at 4.07.29 PM

So the x axis gets bigger as you go from left to right —–>

And the y axis gets bigger as you go from top to bottom.


A point is always defined by two numbers: the x position and the y position. The x always comes first, and is counted up, moving from the left to the right. The y is always the second number and is counted from zero at the top of the screen and gets larger as you move down, pixel by pixel.

Screen Shot 2015-02-13 at 4.13.36 PM


A line is defined by two points, so these two points are defined by 4 numbers in the order shown below. You get the same result putting the points in any order. Try it.

Screen Shot 2015-02-13 at 4.13.44 PM


Rectangles are defined by 4 numbers. The first two are the x and y coordinate of the top left point. The second two are the width and height of the rectangle. So we count from left to right and top to bottom from that top left point.

Screen Shot 2015-02-13 at 4.13.51 PM



Circles are defines by 4 numbers, the x, y coordinate of their center and then by their width and height. Note that the x,y refers to the CENTER and not a corner (different to the rectangle).

Images are taken from this Tutorial by Daniel Shiffman.

These concepts are also explained in chapter 3 of the Reas and Fry textbook on page 21.