Course Home | Documentation | Lab Hours/Tutoring | Projects | Quizzes | Schedule | Submit

Saint Louis University

Computer Science 1050
Introduction to Computer Science: Multimedia

Michael Goldwasser

Spring 2016

Dept. of Math & Computer Science

Module 15 : Strings, Text, Font


New processing syntax:


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)
with sample usage as
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

Michael Goldwasser
CSCI 1050, Spring 2016
Last modified: Saturday, 26 March 2016
Course Home | Documentation | Lab Hours/Tutoring | Projects | Quizzes | Schedule | Submit