|
Chapter: Visual
Representations
of Code
Drawing
Processing is a language that was made to create visual representations
of your code really easily, and as a result the developers of
Processing have provided us with pre-configured functions for drawing
primitive shapes much like you would expect in a drawing program.
Shapes such as rectangles, ellipses and triangles amongst others are
known as 2D primitives and can easily be drawn to the Display Window
with a simple keyword. We'll start by drawing an ellipse.
2D Primitives
Drawing an ellipse in Processing is easy you just use the ellipse()
function that accepts parameters in the following order:
ellipse(x, y, width, height);
As you might have already guessed the X and Y parameters indicate where
the ellipse is to be drawn on the coordinate system, and the width and
height parameters indicate the width and height of the ellipse. Please
note that the terms width and height in this context have nothing to do
with the system variables width and height which store information
relating to the width and height of the Display Window. To draw an
ellipse in the Display Window add the following statement to the end of
your program:
ellipse(width/2, height/2, 100, 100);
Once again to find the center of the Display Window I have used the
expressions width/2 and height/2 this returns the X and Y coordinates
respectively that will be the center of the ellipse. Technically a
circle is an ellipse with an equal width and height, which is why we
have input 100 for both the width and height parameters of the
ellipse() function. I've also chosen to enter explicit values for the
ellipse's width and height parameters, as I don't want the dimensions
of the ellipse to change even if I do decide to change the dimensions
of the Display Window. Using this hybrid style of mixing implicit
programming and explicit programming can sometimes lead to logical
errors, so you should always be certain of what you are doing when
using this approach to programming.
The Origin of an
ellipse
Processing provides several different methods for drawing an ellipse
which modify what the X and Y parameters of the ellipse() function
refer to. These parameters of the ellipse() function are used to
determine the position of what is known as the origin of the ellipse.
The function ellipseMode() is used to change where the ellipse is drawn
with relation to it's origin as specified by the X and Y parameters of
the ellipse() function. This relationship will determine where the
ellipse is drawn within the Display Window and works in a similar
fashion to that of the text() and textAlign() functions.
The function ellipseMode() accepts the parameters CENTER, RADIUS,
CORNER, or CORNERS. Using the CENTER parameter tells Processing to use
the X and Y parameters of the ellipse() function to determine the
center of the ellipse as it's origin. The CENTER parameter for
ellipseMode() is the default mode, and is subsequently why we are
choosing not to add the statement to our sketch. If you did want to use
the CENTER creation mode for drawing ellipses after having overridden
this setting with one of the other modes, apply the following statement
to your sketch before using the ellipse() function:
ellipseMode(CENTER);
Remember Processing is case sensitive so don't forget to type this
parameter in upper-case.
Drawing an
ellipse with the CENTER parameter of ellipseMode()
The CORNER parameter for the ellipseMode() function allows you to
create an ellipse by specifying the X and Y parameters of the ellipse()
function as the top left hand corner of an imaginary bounding box that
surrounds the ellipse. In other words the X and Y parameters of the
ellipse() function are used to determine the top left-hand corner of
the bounding box from where the width and height parameters of the
ellipse() function are used to extend to the maximum width and height
of the ellipse.
Drawing an
ellipse with the CORNER parameter of ellipseMode()
To use this creation method for ellipses type the following code:
ellipseMode(CORNER);
At this point you might be wondering what the purpose of functions such
as textAlign() and ellipseMode() are since we can simply place an
element of a sketch, such as an ellipse, where ever we want in the
Display Window using the function to draw the element's X and Y
parameters.
However, providing a means of placing an element within the Display
Window is only part of the reason why we have such functions. One of
the main reasons is that these functions (without modifying the
position of the element we are placing) allow us to think differently
about how we will align and place other elements relative to that
element in question. For example if we wanted to place two ellipses
next to each other with their edges touching, using either the CORNER
or CENTER parameter options would require changing the way we think
about placing the second ellipse in relation to the first depending on
which parameter option we chose. Let's use the CENTER option first to
illustrate this situation.
In the above diagram the method used to determine the origin of the
second ellipse is to divide the width of the first ellipse by two, then
add this value to whatever half the width of the second ellipse is.
This calculation would return a value that would equate to the X
parameter of the second ellipse. The Y parameter of the second ellipse
would be the same as that of the first ellipse.
When using the CORNER option in order to determine the second ellipse's
origin we would simply need to know the width of the first ellipse and
add this value to the X coordinate of the second ellipse. This
calculation although different from the previously mentioned example
would yet again return a value that would equate to the X parameter of
the second ellipse. The Y parameter of both ellipses is the same.
As you can see although the visual results are the same, that is two
ellipses with their edges touching at the same places, how we solve the
problem is different depending on how the origin of an element is
determined.
The relationship between the placement of one element with that of
another is something we will address often in programming especially
when using an implicit methodology, fortunately it is also something
that becomes easier to visualize with practice.
It's time to save the sketch if you haven't already done so. In the PDE
click
File → Save As...
Change the name of your sketch to something more meaningful and save
it. Processing will create a new folder in your sketchbook folder with
the name of your sketch, in this folder Processing will save a .pde
file which is the source code file we are currently working on. It's
also worth noting that if you have added any additional files to your
sketch such as images or other external resources Processing will also
copy the those files to a folder called data, which will be a
subdirectory of your sketch's folder. In the PDE saving a file with a
different name is akin to creating a new sketch. This is something to
be aware of as you can inadvertently increase the amount of data on
your hard disk drive by duplicating sketches with different names if
you are unaware of this feature. Adding external content to a sketch is
something we will get into a bit later when we start adding images to
the sketch. The sketch should currently look something like this:
/**
*Hello World 1.2 Program
*by Lyndon Daniels.
*This example program demonstrates how to
*create a Hello World Program in Processing.
*/
//setup of the Display Window
size(640,480);
background(0,0,0);
//Print characters to the console
println("Hello World");
//Render and format text
textAlign(CENTER);
textSize(24);
fill(191,233,255);
text("Hello World", width/2, (height/4)*3);
//Drawing the face
ellipse(width/2, height/2, 100, 100);
|
|
Previous
