An Introduction To Programming With Processing

Visual Representations of Code

The Cartesian Graph and the Processing Coordinate System

Cartesian 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 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.

Hello Display Window: Hello World 1.1

In the revised version of our Hello World Program we will start using the Display Window, firstly to display the original character set “Hello World” then to display a few shapes too.

The text() function

The text() function is the first function we will use to draw to the Display Window. The text() function accepts parameters in various formats of which the simplest format is:
text(data, x, y); 
Hello World Display Window
For the data parameter in our sketch we will use a string of characters that spell the phrase “Hello World” and as you've probably already guessed the X and Y parameters tell Processing where in the Display Window we would like to draw the text in terms of X and Y coordinates relative to the Cartesian graph (superimposed on top of the Display Window, with a bit of imagination). So let's give it a try, add the following statement to the bottom your Hello World 1.0 sketch and Run it to see the results. If you already have a sketch running you can press the “Stop” button (next to the “Run” button) to stop the currently running sketch, pressing the “Run” button again will include any changes you have made to your sketch:
text(“Hello World”, width/2, height/2); 
Using the Display Window gives you immediate feedback for testing your code.

Program Notes

You'll notice that the sketch is now making use of the Display Window, which is the first step towards creating visual representations of your code. We used the string of text “Hello World” in the data parameter. This kind of string is known as a literal string because it does not require any further processing, within the program you are creating, to output it's final form of representation, kind of like the concept of “what you see is what you get”. The term string, in general, refers to a list of characters that when grouped together form the contents of a single string, for example in our case we have a literal string which consists of several characters 'H', 'e', 'l', 'l', 'o', ' ', 'w', 'o' ...etc. The X and Y parameters are however, looking a little different particularly if you were expecting them to be numbers. In fact they are representations of numbers in the sense that instead of inputting a specific number for the X and Y parameters, we used an expression and in this case the expression evaluates to a number. It is this number that Processing reads and accepts as the parameter. But what exactly do the expressions mean and what do they do? Amongst the many things that Processing is, it is also a very sophisticated calculator. It has the ability to calculate very complex mathematical formulae and also is able to do very simple mathematical calculations too.

The above expression is asking Processing to get the width of the Display Window and divide (/) it by 2. As you can see Processing has formatted the word width in blue by use of syntax highlighting, this should immediately indicate to us that we are not using an arbitrary word but in fact a special word known as a keyword. “Keyword” is a generic term we use to describe words that have a specific meaning for the language we are using that word in. As a result keywords within Processing do not appear formatted in black. A list of keywords and other features making up the Processing language can be found in the Processing Reference (mentioned earlier). The keyword width is a special type of data known as a system variable. Basically the width system variable stores information set by the first parameter in the size() function, and as you are aware the first parameter in the size() function determines the width of the Display Window. In our program we set the size() function to read:
How this relates to the width system variable is that every time Processing sees the keyword width it replaces it with whatever we set the width value to be in the size() function. In this case since we set the width to 640 the text statement as Processing reads it would look like this:
text(“Hello World”, 640/2, 480/2);
The height system variable has the same effect but relates to the second parameter of the size() function. So the question is why did we not just simply type the values 640 and 480 instead of using the keywords width and height respectively? Even further still why didn't we just type the values 320 for the width parameter and 240 for the height parameter of the text() function, so that it looks like this:
text("Hello World", 320, 240);
Although this is a perfectly valid methodology, it is not very versatile. Currently there is not too much maintenance involved in updating the code if we were to decide that the Display Window needs to be smaller, however when it comes to creating the rest of the sketch which is going to involve drawing shapes to the Display Window of which each shape will need to have it's own set of coordinates, if we had typed in a specific value for each X and Y position or width and height parameter, updating the code to reflect the change of dimensions to the Display Window would mean changing each statement where we input specific X, Y, width or height values. That could mean a lot of extra and unnecessary work. By using an expression with the keywords width and height we can place whatever we are drawing relative to a position determined by the size() function. So all we need to do is update the size() function and those expressions that use the width and height system variables will also update to reflect these changes. This is a programming methodology that is used often to create versatile and scalable programmatic interfaces and is referred to as implicit programming. Although it might not seem entirely obvious to you at this point why it is a recommended methodology it should become more clear as we explore programming through the introductory Hello World 1.1 and 1.2 programs.