Learning Processing: A Beginner's Guide to Programming Images ...

318 Learning Processing
17.7
Display text character by character.
In certain graphics applications, displaying text with each character rendered individually is required. For
example, if each character needs to move independently, then simply saying text( “ a bunch of letters ” ,0,0)
will not do.
Th e solution is to loop through a String , displaying each character one at a time.
Let’s start by looking at an example that displays the text all at once. See Figure 17.8 .
PFont f;
String message = " Each character is not
written individually." ;
void setup() {
size(400,200);
f = createFont( " Arial " ,20,true);
}
void draw() {
background(255);
fill(0);
textFont(f);
text(message,10,height/2);
}
We rewrite the code to display each character in a loop, using the charAt( ) function. See Figure 17.9 .
int x = 10;
for (int i = 0; i < message.length(); i + + ) {
text(message.charAt(i) ,x, height/2);
x + = 10;
}
All characters are
spaced 10 pixels
apart.
The fi rst character is at pixel 10.
Each character is displayed
one at a time with the
charAt() function.
Calling the text( ) function for each character will allow us more fl exibility in future examples (for
coloring, sizing, and placing characters within one String individually). Th is example has a pretty
major fl aw, however. Here, the x location is increased by 10 pixels for each character. Although this
is approximately correct, because each character is not exactly 10 pixels wide, the spacing is off . Th e
proper spacing can be achieved using the textWidth( ) function as demonstrated in the following code.
Note how this example achieves the proper spacing even with each character being a random size!
See Figure 17.10 .
int x = 10;
for (int i = 0; i < message.length(); i + + ) {
textSize(random(12,36));
text(message.charAt(i) ,x, height/2);
x + = textWidth(message.charAt(i));
}
textWidth() spaces the characters out properly.
Each character is not written individually.
fi g. 17.8
Displaying a block of text all at once using text().
fi g. 17.9 (Note how the spacing is incorrect.)
fi g. 17.10 (Note how the spacing is correct even
with differently sized characters!)