Processing Tutorial 5 - Working With Text

Processing | Text

Quick Tutorial
by John Park

TUTORIAL 5 ::

Processing | Tutorial 5

Using TEXT in the Processing Language

STEP 1: About Text

The first thing we will do when working with TEXT in Processing is to choose a font that is on your computer and tell processing to convert it to a format that it can use. Start with a blank Processing document and save it.

Next go to TOOLS>CREATE FONT

Choose a font and note you have options to turn smoothing on, change font size and to rename what Processing will save that font as. I will choose a font and leave everything else at default settings.

As soon as you hit OK, Processing will create a new folder in the same folder that your Processing (.PDE) file is located. The new folder is called 'Data' and contains a converted font file. The new font file is in a .VLW format. This is important because that 'DATA' folder should now always travel with the .PDE file if you transport or upload your Processing files to the server (see image below of new folder):

STEP 2: Using the FONT in a sketch

Because there may very well be times when you want to use multiple fonts in a sketch, the process of loading and using fonts may seem like it has unnecessary steps. But for now just think of using a text font as having four steps. Below is a simple way to use text.

Below is the text for the above file in case you want to copy and paste it into a Processing program and run it:

***********************************
// TEXT EXAMPLE by JOHN PARK
size(900,600);
background(0);

PFont johnFont;
johnFont = loadFont("PalatinoLinotype-Italic-48.vlw");
textFont(johnFont);

fill(255);
text("Working Text", 300, 300);
***********************************

The important FOUR STEPS are as follows:

PFONT = this tells Processing to use its text rendering engine. Follow the word PFont with whatever variable name that you want to use (you certainly don't have to call your font "johnFont"!).
loadFont(" font name "); = loadFont tells processing to load the font that you created in step one. Notice that the font name has to be in quote marks, that the name must match the font file found in the DATA folder, and that this must be assigned to the name that you used in the PFont step (ie, johnFont).
textFont(); = this is the CURRENT font being used in a sketch. This step seems unnecessary but by setting the text font you can quickly change between multiple fonts in a program by changing the value inside the parentheses to be different fonts that you create.
text("text", xPosition, yPosition) = this is how you actually tell Processing to use the text in a sketch.

Try it out with your own font and text

STEP 3: Getting Decorative with Text

Let's press this lesson a little further by using the text() function in a dynamic sketch. I will use the above steps, but add a void setup() and a void draw() function so the words I choose will repeatedly draw (remember this is what the draw() function allows us to do).

The copy and paste-ready text is below:

******************************************************
float rotater; // variable to hold rotation value

void setup(){
size(900,600);
background(0);
PFont johnFont;
johnFont = loadFont("PalatinoLinotype-Italic-48.vlw");
textFont(johnFont);
}

void draw(){
rotater += .05; // rotation value grows each frame
fill(255,42);
stroke(0,255,45,45);
translate(mouseX,mouseY); // positions next shape at
// the mouse position
rotate(rotater); // Rotation in RADIANS not degrees
text("John", 0, 0); // draws at 0,0 (top left)
}
***************************************************

STEP 4: Advanced TEXT using the Split() command

If you are enjoying using text and want to press it to another level, you may want to explore the split() command. The idea here is that you can load a lot of text into a STRING and then split that text up by what is called a delimiter (aka, a separator). This way, a paragraph of text can quickly become an array of text objects where each item in the array is a word from the paragraph. Here is a simple example:

****************************************************************
String mytext = "This is a quantity of text. You can put a lot of words here!";
String [] myArray = split (mytext, " ");
****************************************************************

The first line loads in the text into a single string called myText.
The second line creates an ARRAY called myArray and populates it with the words from the myText STRING. It uses a space between the characters as the delimiter. So if I wanted to reference a word in the myArray array, I could simply say myArray[0] and the work This would come up.

Here is a simple example using a split() command and the random() command to randomly place words on a screen: DOWNLOAD HERE

Here is a more advanced example: DOWNLOAD HERE