The Cartesian Graph and the Processing Coordinate System

As mentioned earlier the Display Window’s dimensions are determined within the size() function via the parameters that it accepts. Those dimensions are measured in pixels. Later, when we start drawing to the Display Window we need to tell Processing where exactly we are attempting to draw to within the Display Window, this information we supply to Processing in the form of X and Y coordinates when dealing with a 2D sketch and X, Y and Z coordinates when dealing with a 3D sketch. As a result you can think of the Display Window as being a piece of graph paper with invisible lines.

The Display Window can be divided up into a grid.

The origin of the Display Window is in the top left hand corner and being the origin it’s coordinates will be (0,0) meaning zero X and zero Y respectively. The type of grid layout represented in the above image might look familiar to you, that’s because it’s based on the Cartesian graph system. This is the name for the type of graph layout we use in Processing and many other programming languages that allow us to create and place components of a program (such as graphical elements) within an area such as the Display Window. Although the name might sound very grandiloquent it’s application is actually quite simple, and resembles the workings of most common graph layouts used in some of the simplest forms of mathematics. The main difference between the programmatic version of the Cartesian graph and the mathematical version of the Cartesian graph is that in the programmatic version the positive Y axis runs downwards not upwards as is usually the case in the mathematical representation of this graph. This actually does not change anything about how the graph system is used, if you find this to be a bit odd you can think of it as if we were looking at a piece of graph paper rotated 180 degrees around the x axis so we’re looking at the back of the graph paper and as a result everything drawn on the paper now appears upside down. As you can imagine nothing drawn on the graph paper has changed just the way we are looking at it is different.
Understanding how the Cartesian graph system is applied in programming is a lot easier when we have an example to work with, so lets add to our Hello World 1.0 program by making use of the Display Window in our updated sketch.