|
Chapter: Visual
Representations
of Code
Visual
Representations
of Code
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.
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);
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.
width/2
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:
size(640,480);
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.
|
|
Previous
