|
Chapter: Visual
Representations
of Code 
Smile
Editing the smile
Our smile drawn with the arc() function looks fine but needs a bit of
work. Although you cannot see it the arc actually has a fill. In
order to see the fill we will first have to remove or hide the ellipse,
but we're happy with the way the ellipse looks so instead of deleting
the statement or cutting it to the clipboard we'll comment it out.
Commenting out a statement or a group of statements is the process of
adding comment tokens to the statement/s that cause the statement/s to
be ignored by the compiler. Comment tokens in Processing are two
forward slashes “//” as mentioned previously. The easiest way to
comment out the ellipse statement is simply to place the comment tokens
at the start of the statement so it looks like this:
//ellipse(width/2, height/2, 100, 100);
You might have also noticed that when you comment out a statement,
syntax highlighting causes the statement to turn grey. This means we
can now run the program and Processing will no longer draw our ellipse,
until we uncomment the statement by deleting the comment tokens. To
comment out a block of code select the lines of code you wish to
comment out and in the PDE click:
Edit → Comment/Uncomment
This will toggle your selection between a commented state and a
standard block of non-commented code. Commenting and uncommenting is
just simply a convenient and easy way of testing or debugging a program
by including and excluding statements easily without having to retype
out a statement that has been deleted or using an operating system's
clipboard.
Commenting out the ellipse statement reveals that the arc is drawn with
a fill.
To remove the fill we will use the noFill() function. So between the
ellipse commented statement and before the arc statement add the
following code:
noFill();
The order in which commands are issued to Processing is very important.
Functions such as rectMode() and noFill() not only effect the command
that directly follows them (such as the arc statement being effected by
the noFill() function) but they also effect all statements that follow
there after that rely on these special functions. So what that means is
that if we were to place the noFill() function before an uncommented
ellipse statement followed by the arc statement both the ellipse and
the arc would have no fill. This is obviously not what we want, we only
want the arc to be without a fill and subsequently run the ellipse()
function before noFill().
If you were to run the sketch at this point it might look as though the
noFill() command has removed the arc completely from the Display
Window, but this is not the case. In Processing 2D primitives such as
triangles, arcs, quads, ellipses and rectangles are actually made up of
both a fill and a stroke. We've already seen that the fill can be
controlled with the noFill() function, the fill() function and
that Processing's default setting is to draw all 2D primitives
with a fill.
The stroke is the outline that surrounds all 2D primitives and looks
like a line of various inclinations, dimensions and weights. The stroke
can also be turned off with a function similar to the noFill()
function, as you might have guessed it's noStroke().
To turn the stroke or fill back on or to simply edit an existing stroke
or fill we use the stroke() or fill() functions. Both of these
functions accept parameters in the form of a grayscale color, an RGB
value or a RGBA value by default. You can also control how Processing
accepts parameters for these two functions with the colorMode()
function. We'll be changing our black stroke (which seems to have
disappeared, because it's camouflaged into the black background) to a
red smile. Add the following statement after the noFill statement:
stroke(255,0,0);
The stroke()
function can be used in a similar way fill() is used but for editing
the color of lines.
This statement simply informs Processing that any strokes that are
drawn after this statement is run will consist of a color that is fully
red, with no green and no blue in other words (255, 0, 0). Now we have
a smile floating above our text, so we're going to uncomment the
ellipse statement and when we run the sketch our smile is restored to
it's elliptical face.
The smile is looking a little too high up on the face so we're going to
move it down, this is easy because we already have the style of the
smile so we just need to offset it's y position. To do this we are
going to edit the arc() function once more to the following state:
arc(width/2, height/2 + 10, 50, 50, 0, PI);
Notice that because we are using an inverted Cartesian graph adding 10
to the arc's current y value actually moves the arc down, inversely if
we subtracted 10 we would move the smile up. At first getting used to
this system might be a little tricky, but it's certainly worth noting
because this type of graph system is used in many graphics based
software packages.
Adding Eyes
What's a smiley face without eyes. Add the following code to your
sketch after the previous arc statement:
stroke(0,0,0);
fill(0,255,0);
ellipse(width/2-15, height/2-15, 20, 30);
ellipse(width/2+15, height/2-15, 20, 30);
As we changed the stroke to red in our previous statement to draw the
smile, we need to change it back to black in order to draw the strokes
encompassing the eyes so we add the second stroke statement to our
program to change the stroke color back to black. Having also turned
the fill off for the arc statement we need to turn it back on for the
eyes and set it to green, we can conveniently achieve both of these
tasks with stroke() and fill() function calls.
Let's take a look at the X and Y parameters of the ellipse functions
that actually draw the eyes and how the expressions used in these
statements have been modified. For the eye on the left's X parameter 15
has been subtracted, and for the eye on the right's X parameter 15 has
been added.
When working with expressions like this it's important to remember that
certain mathematical operators have precedence over others. For example
* and / have precedence over + and -, this means that the expression
width/2-15 is actually being evaluated like so (width/2)-15. This
effect is known as operator precedence. Finally the Y positions of the
ellipses have been offset by subtracting 15 and rendered less circular
in form and more oval-shaped by making their height's greater than
their widths.
|
|
Previous