Computer Science 1050
processing.org tutorial on Typography
processing.org tutorial on Strings and Drawing Text
Pages 94-97 of Chapter 7 of Reas/Fry text
Try to recreate any of the following sketches.
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).
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.
In this version, we pick a random color for each character of the second piece of 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.
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)with sample usage as
textArc("UNIVERSITAS SANCTI LUDOVICI", 202, 0.7*PI, 2.3*PI, false);
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.