|
Chapter: Visual
Representations
of Code
Formatting Text
You might have noticed that the text is supposed to be in the center of
the Display Window but looks more like it's leaning to the right hand
side of the window.
Processing allows us to align text relative to the coordinates we
specified for the text() function's X and Y parameters. The relative
positions are LEFT, RIGHT or CENTER. I have typed them in upper case
because that is the format that Processing accepts them in, when
entered as a parameter for the textAlign() function. So let's fix the
text alignment so that it is in the center of the Display Window, add
the following line of code directly above the text statement:
textAlign(CENTER);
If you were to re-run the sketch, the updated version should have the
text directly in the center of the Display Window. As we are using a
procedural programming style to create this sketch, Processing needs
statements input in a particular order. We'll discuss procedural
programming and other programming paradigms in more detail a bit later,
but for now it's worth noting the emphasis on the order that statements
are placed in. Placing the textAlign() function before the text()
function ensures that the textAlign() function is run before the text()
function thereby ensuring that by the time Processing gets to drawing
the text in the Display Window it already knows that the parameters
that relate to the text's coordinates within the text() function refer
to the CENTER of the text.
The point indicated in the illustration is determined by the text()
function's X and Y parameters. As you can see this point does not move
when using textAlign() the text's alignment to this point is what
changes.
Next we'll have a look at the size of the text. Currently it looks like
the text is drowning in a sea of greyness, we're going make the
text a little bigger in an attempt to place more visual emphasis on it,
within the composition. The textSize() function allows us to set the
size of text in pixels. Size is input as a number which is a parameter
of the textSize() function.
Add the following statement before the text statement:
textSize(24);
Now we're starting to get somewhere, although white text on a grey
background does not exactly jump out at you. So in keeping with one of
the main processing.org color schemes we're going to use a black
background with light blue text, we'll address these requirements as we
examine how to use color in Processing.
Color
Color in Processing can be input in several different formats such as
RGB (Red, Green, Blue), HSB (Hue, Saturation, Brightness) or
Hexadecimal notation. RGB is the default color mode but this can be
changed with the colorMode() function.
Lets have a look at how to change the background color. Add the
following statement to your sketch directly after the size() statement:
background(0,0,0);
The background() function accepts up to three parameters, in our case
the first parameter is the Red value followed by the Green value and
finally the Blue value. As we want a black background all of these
values are set to 0, the minimum value for the current color mode of
RGB. The maximum value for these parameters is 255, this gives you a
total of 256 different color values for each color (remember 0 is also
a value). If we wanted a white background we would enter 255 for
each of the three parameters of the background() function. Later we
will have a look at a shorthand version for displaying greyscale colors
such as black, white and various levels of grey.
Now onto the color of the text. The textAlign() and textSize()
functions set parameters not just for the text currently displayed but
for all text that is created thereafter. Until these functions are used
again and their parameters are changed they will remain in
Processing's memory and effect all text that is drawn to the Display
Window following their execution.
The fill() function acts in a similar fashion, it accepts color values
and will effect everything that is drawn to the Display Window that has
a fill after the function is evoked. We will have a look at how to
modify this behaviour a bit later, for now lets focus on getting the
text to display in a light blue.
In the PDE click:
Tools → Color Selector
The Color
Selector is accessible within the PDE from the tools menu
The Color Selector dialogue box is useful for finding the specific HSB,
RGB or Hexadecimal color values of a color. In our case the RGB values
for the light blue I'm looking for are R 191, G 233 and B 255. I can
now use these values in my sketch. Before the text() statement add the
following statement:
fill(191, 233, 255);
This statement sets the color of the text to light blue color.
Before we continue drawing shapes, lets make a few adjustments to the
horizontal position of the text so that we can have some space to draw
a smiley face in the center of the Display Window. Once again we're not
going to input a specific number into the Y parameter of the text()
function, instead we're going to use an expression so that we can have
Processing do the work for us just in case we feel like changing the
dimensions of the sketch once it's complete.
Basically we want to keep most of the text's characteristics as is, but
just place it closer towards the bottom of the Display Window about
three quarters of the way down. We know that the height system variable
contains the height of the Display Window and that dividing it by 2
will return a value that is half the size of the Display Window's
height. As a result we can deduce by use of some simple mathematics
that dividing the height value by 4 will give us a value that is a
quarter of the height of the Display Window. If we then multiply this
value by 3 we will have a value that is three quarters in length of the
height of the Display Window. So our expression would look like this:
(height/4)*3
What this reads as is “height divided by four then multiplied by
three”. Just like in mathematics anything within parenthesis is
evaluated before that which is outside of parenthesis. So the
expression height/4 is first evaluated, the answer of this expression
is then multiplied by 3.
Modify your text statement to look like this:
text("Hello World", width/2, (height/4)*3);
Now we can ensure that whatever the height of our Display Window may
be, Processing will always place our text three quarters of the length
down the Y axis of the Display Window.
The new Hello
World Program in Processing.
|
|
Previous
