PrintNew syntax introduced: Font, loadFont, textFont, textAlign, text, String, char, textLeading
Loading a font, writing text to the display window
If you want to write text to the screen, Processing has many fonts to choose from. You can pick one by choosing “Create Font” from the Tools drop-down menu. Then in your program, you declare the font variable, load the font, and use the text() function to write text to the screen using the font you created.
Note: Even though Processing itself is platform independent, different operating systems have different fonts. I am a Mac user. If you are a PC user, you might not have the exact fonts I demo in my examples below, but the point is that there are lots to choose from and the way you work them into a program is the same.
Example 5.0
Here is an example of a short program I wrote at the end of the 2011 baseball season using text():
// Load a font
// Write text to the screen
PFont font1;
void setup() {
size(400, 200);
font1 = loadFont("Futura-CondensedExtraBold-36.vlw");
textFont(font1);
textAlign(CENTER);
}
void draw() {
background(252, 143, 143);
fill(160, 8, 8);
text("Cards win!", width/2, height/2);
}
Here's a screencast walk-through of the program above. (and a captioned version.) In the program in Example 5.0, I created the font called “Futura-CondensedExtraBold-36.vlw” by choosing it with the Create Font tool. I have to declare the variable of type PFont at the beginning before the setup() block. Inside the setup() block, I load the font. The function text(data,x,y) in the draw() block takes three arguments: data, which is the thing it will write, and x, and y, which are the coordinates that tell it where to write the data. If you want the text to be colored something other than black, specify the color with fill(). It is a little counterintuitive to some folks that fill(), not stroke(), is how this is accomplished, but that's the way it is. Roll with it. Note that in my program, the sentence, “Cards win!” is enclosed in double quotes because it is a String. The text() function doesn’t need to take String data, it can also be a char, int, or float. You can also have more than one font per program.Example 5.1
Here’s an example with multiple fonts.
// Load more than one font
// Write text to the screen
PFont font1;
PFont font2;
PFont font3;
void setup() {
size(600, 200);
font1 = loadFont("BankGothic-Medium-32.vlw");
font2 = loadFont("Baskerville-BoldItalic-32.vlw");
font3 = loadFont("CenturyGothic-Bold-32.vlw");
}
void draw() {
background(252, 143, 143);
textFont(font1);
textAlign(CENTER);
fill(160, 8, 8);
text("Carpenter blanked the Astros", width/2, 50);
textFont(font2);
fill(0);
text("and", width/2, 80);
textFont(font3);
fill(22, 8, 160);
text("The Braves choked again", width/2, 110);
}
Notice that in the program in Example 5.1 I placed each line of text by hand because I specified its x and y coordinates. An alternative to doing this is to define all the text you want to display as a String and then use optional parameters in text() to define a box within which the text is written. This is a nice option because you don’t have to mess with the spacing manually. The syntax for setting text in a box is text(string, xTopLeftCoordinate,yTopLeft Coordinate,width,height).
Example 5.2
Here is an example of setting the text within a box.
// load a font
//write text to the screen in a textbox
PFont font1;
void setup(){
size(400,300);
font1 = loadFont("BankGothic-Medium-32.vlw");
}
void draw(){
background(255);
textFont(font1);
textAlign(CENTER);
textLeading(30);
fill(160,8,8);
String s = "Carpenter blanked the Astros and the Braves choked again";
text(s, 50,20,300,200);
}
Notice how in the above program, the text was automatically broken up over several lines to fit into a box. Processing is also smart enough to break things up at the blank spaces instead of in the middle of words. I set the vertical spacing between lines of text with textLeading(dist) in which dist sets the number of pixels between each line. That keeps the text from being squished too much. Sometimes you just have to use trial and error to get things to look the way you want.
Exercise
5.1: Modify any of my examples to write your own paragraph in a font you like.
Turning in your work
Nothing yet. Stay tuned.