Week 12 - Working with Text and Data

Today:

  • Strings in Java/Processing
  • Working with Fonts
  • Text on screen

String data type

This semester we’ve already used text in a few basic ways using the text() built-in function.

We’ve also printed text to the console using the println() and print() functions.

Processing also comes with a built-in data type called String. Unlike int, boolean, and float for example, String is built out of a class, thus it is capitalized. Other similar data types that are built from classes are Capture and Movie.

String is not just from Processing. It comes from the underlying Java language, so you can find documentation

More info on String in the Processing reference. You could also look at the extensive Java reference for String for a glimpse into the wider world of Java.

A string is an array of characters. It is defined in a String class. Since we’ve worked with and created classes we know that means we can create individual string objects, and that objects have defined methods.

String methods

There are a number of built-in methods for working with Strings.
Here are a few:

charAt()
String name = "Purchase College";
char c = name.charAt(0);
print(c);
length()

Don’t confuse this with the length property of an array. When you want the length of a String object you must use the parenthesis since it is a method.

String name = "Purchase College";
print(name.length());
change case with toUpperCase() or toLowerCase()
String name = "Purchase College";
println(name.toUpperCase());
println(name.toLowerCase());
equals()

Technically, a String object’s name references a location in memory. When we use a String name in our code and then compile and run the code, Processing looks up what is stored in memory at that location. Depending on how a String was created, it’s possible that two strings that look the same might actually not come up as equivalent if we compare using our standard == comparator. For this reason, it’s best practice to use the equals() method.

Example:

String greeting1 = "Hi";
String greeting2 = "Hola";
String greeting3 = "Hi";

println(greeting1.equals(greeting2);
println(greeting1.equals(greeting3);

Combining Strings aka Concatenation

It’s quite easy to combine two strings.

String message = "Hi";
String name = "Raoul";
println(message + " " + name);

Display text onscreen

You must start with a font. You have two choices:

  • Use a system font that all computers have (Helvetica, Arial)
  • OR use a custom font

The general process:

To show text on screen you must render it in pixels.

  1. Create a global PFont you can use to store the font in memory.
  2. Use createFont() to specify the specific font and size. This is usually done in setup() as it only should happen once.
  3. Somewhere in your sketch, specify that you want to display that font with textFont()
  4. Specify a fill() color for displaying your text onscreen.
  5. Use the text() function, specifying the String, x and y positions. It is helpful to have a background color in order to make your text more crisp.

Example Using a system font

PFont f;

void setup(){
  size(400,400);
  //use a system font
  f = createFont("Helvetica", 18);
}

void draw(){
  fill(0);
  textFont(f, 18);
  text("The quick brown fox jumped over the lazy dog.", 50, 100);
}

Example Using a custom (downloaded) font

Processing uses a font format called vlw to load and display custom bitmapped fonts. A bitmapped font is a font rendered into pixels. The process is to place a custom/special font in your sketch’s data folder. This would also let you package up a sketch with a custom font and send to another person who might not have that font installed. The easiest way to do this is to use the Create Font tool in the Tools > Create Font… menu. This will let you select a font installed on your machine to be package with your sketch.

Now that you’ve added in a custom font file, you can use loadFont() to load and use it in your sketch.

PFont f

void setup(){
  size(400,400);
  f = loadFont("ZXX-18.vlw");
}

void draw(){
  fill(0);
  textFont(f, 18);
  text("The sky above the port was the color of television, tuned to a dead channel", 50, 100);
}

Text properties

textAlign() - You can specify the alignment of text when it’s drawn. Options: LEFT, RIGHT, CENTER.

Star Wars text

Union Pacific

Importing Data

Importing a text file

String[] lines = loadStrings("filename.txt");
println("There are "+lines.length+" lines of text.");
for (int i = 0; i < lines.length; i++){
  println(lines[i]);
}

In-class exercise: Star Wars crawl text