Module 15 : Strings, Text, Font

• Topics
• Resources
• In-Class Activities
• Sample Quiz Question

Topics

• String, Text, Fonts

New processing syntax:

• text() function
• textSize() function
• textAlign() function
• textFont() function
• createFont() function
• textWidth() function
• textAscent() function
• textDescent() function


• The String class (and its most important methods, such as charAt(), length(), and substring())

Resources

• processing.org tutorial on Typography

• processing.org tutorial on Strings and Drawing Text

• Watch Daniel Shiffman Video 17.0, Strings and Drawing Text (18 minutes)
  (available at learningprocessing.com and YouTube)

• Pages 94-97 of Chapter 7 of Reas/Fry text

In-Class Activities

Try to recreate any of the following sketches.

Character-by-character Text
We demonstrate use of rendering character-by-character text with use of the textWidth() function to determine the actual width of the individually rendered characters. The top string is drawn as a single piece of text while the bottom is drawn character-by-character (with the bounding boxes for emphasis).

Implementation: code

Centered Text
In this version, we wish to have both pieces of text centered horizontally. While this is easy for the first piece which is drawn as a single string, for the second version (drawn character-by-character), we must first determine the sum of the widths and then go back and place them on the screen starting with the leftmost.

Implementation: code

Rainbow Text
In this version, we pick a random color for each character of the second piece of text.

Implementation: code

Flying Text
This animates characters of a string that "fly" into their final place. In the demonstration below, press any key to repeat the animation with the existing random paths, or click with the mouse to start over with new random paths. The animation is created by having each individual character follow a path along an inward spiral. The spiral radius and the incremental change in angle for each is picked using randomness.

Implementation: code

Rotating Text
Rotations can be quite useful when working with text. The following example relies upon a user-defined function to render a string character-by-character around a circle. Although we have not yet worked extensively with text, there is a String type in Processing that allows you to extract a single character using the charAt(j) syntax where j is an index into the string (with 0 being the index of the first character). We created this version using a function with signature:

void textArc(String msg, float radius, float startAngle, float stopAngle, boolean faceOutward)

textArc("UNIVERSITAS SANCTI LUDOVICI", 202, 0.7*PI, 2.3*PI, false);

(Spoiler: solution)

Great Seal Improved
Our first version of the great seal evenly spaced the letters of the string around a circle, but this looks sloppy because some letters such as "I" were skinny and thus the inter-letter spacing was inconsistent. This time choosing the angles for the centers of the characters in proportion relative to the individual textWidth() for each character.

(Spoiler: solution)

Sample Quiz Question