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