EARTH 801
Computation and Visualization in the Earth Sciences

Lesson 5: Text that changes or is responsive

PrintPrint

syntax introduced: +=

It’s a little more fun to do something with the text you draw to the screen instead of having it just sit there. Since Processing draws text as an image, you can treat a word just like any other shape.

Example 5.3

Here’s an example in which a word follows the mouse around on the screen (code modified from Reas and Fry, 2007).

// The word "follow" follows the mouse
// its position is tied to the mouse position.

PFont font1;

void setup() {
   size(300, 300);
   font1 = loadFont("AcademyEngravedLetPlain-48.vlw");
   textFont(font1);
   textAlign(RIGHT);
   fill(0);
}

void draw() {
   background(124, 194, 250);
   text("follow", mouseX, mouseY);
}
black word follow moves around blue display screen
Screenshot of output of program above. The word "follow" trails the mouse around the screen
E. Richardson adapted from Reas & Fry

Example 5.4

Here’s an example of a word changing color frame by frame:

// The word "embarrassed" changes color from neutral to red.

PFont font1;
int opacity   = 0;
int direction = 1;

void setup() {
   size(400, 200);
   font1 = loadFont("AmericanTypewriter-Bold-48.vlw");
   textFont(font1);
   textAlign(CENTER);
}

void draw() {
   background(175, 124, 124);
   opacity += 1 * direction;
   if ((opacity < 0) || (opacity > 255)) {
      direction = -direction;
   }
   fill(255, 0 , 0, opacity);
   text("embarrassed", width/2,height/2);
}
red word embarrassed on pink background
Screenshot of program above in which text color changes as the program runs.
E. Richardson

The program in Example 5.4 makes use of the new piece of syntax += which is a compact way to combine addition with assignment. Let's say you have two values: x and y. In Processing,x += y is the same as x = x + y. You are adding the value of y to x and reassigning x the new resulting value all in one step.

Example 5.5

Here’s an example of words that move across the screen

PFont font;
float x1 = 0;
float x2 = 200;
int x1speed = 1;
float x2speed = 0.73;

void setup() {
   size(800, 200);
   font = loadFont("Trebuchet-BoldItalic-48.vlw");
   textFont(font);
   fill(0);
}

void draw() {
   background(204);
   x1 += x1speed;
   x2 += x2speed;
  
   if (x1 >= 550) {
      x1=550;
      x2speed=0;
      strokeWeight(3);
      line(765,0,765,height);
   }
  
   fill(68,143,232);
   text("Braves",x2,100);
   fill(160,8,8);
   text("Cardinals",x1, 50);
}
words Cardinals and Braves move left to right across screen
Screenshot of program in Example 5.5 above
E. Richardson
cartoon Eliza alerting you that instructions come nextThe program in Example 5.5 (screencast walk-through here) (and a captioned version) is meant to demonstrate visually my interpretation of how the last month of the 2011 major league baseball season went for the St Louis Cardinals and the Atlanta Braves. With about a month to go, the Braves had a huge lead in terms of the number of games they had won and seemed to be certain to get into the playoffs. However, they collapsed and lost most of their games over the last month of the season while the Cardinals won so many games that they finished with a better record -- by just one game -- and they got into the playoffs instead. So in the program above, both teams are moving in the same direction, which is kind of like a proxy for time passing. The Cardinals are moving faster because they are catching up, and at the end when both words stop moving, you see that the Cardinals are just a little bit ahead. I added a black vertical line to draw your attention to that fact.

This is an example of a visual representation of an idea or a time-dependent process, which is something that this programming language is good at doing. My guess is that you can be more creative than I am. See if you can come up with moving, changing, or interactive words that represent some kind of idea or process and illustrate it with your program!

Exercises

5.2 Write a program with words that move up and down instead of right and left.

5.3 Modify the program in 5.2 with words that also change color as they move.

5.4 Tell a story with moving words

Turning in your work

Turn in either 5.3 OR 5.4 to the Lesson 5 dropbox. ** Please zip your whole folder when you turn it in instead of just including your .pde file for this exercise. The reason is that your loaded font is included as a file in your folder where your .pde file also lives. If you don't include the whole thing then I have to go digging around to load the font when I run your program.

What I'm looking for

In your program I want to see that you can successfully load a font and use it, and I'd ideally like to see some kind of creative thinking about what you want to do with the words or letters that you have decided to draw to the display window.