Typography in processing

DSDN 142 Creative Coding

In order to use any text in a processing applet, we must first create a processing font.To do this go to tools > create font. This opens up a new screen (shown on the next page).

Once you have created a font, using it is very similar to using images (the font even gets put into the data folder).

Creating fonts

Typography in processing

DSDN 142 Creative Coding

The font creation screen is for choosing a font then converting it into a format which processing can read.You select a font type, a default font size, and the filename down the bottom. The filename is what is used to import a font into your actual code (similar to loading a sound file with Minim).

Font creation screen

Typography in processing

DSDN 142 Creative Coding

PFont font;

font = loadFont("FFScala-32.vlw"); textFont(font);

text("word", 15, 30); fill(0, 102, 153);text("word", 15, 60);fill(0, 102, 153, 51);text("word", 15, 90);

To use text in our applet, we must first load the font that we have just created and set the current writing font to that imported font.In this example here, I have just created a font with a filename FFScala-32.vlw.

The first thing is declaring a variable which holds a Pfont (processing font) Pfont font; This is the variable which we are going to load our font into.

On the next line, we load our font file into this variable using the loadFont function. The filename goes between the brackets (just like loading a sound file!).

textFont(font); is the code that sets the current font to use. In this case we set it to “font” (our font variable which contains the font file we just loaded in the previous line).

Writing text is as easy as using the line or ellipse functions, all you need to do is pass the text() function 3 parameters; the string you want to put onto the screen, and the x and y position for the placement of the text.

The example prints “word” 3 times in different colours (notice that it just uses the current fill to assign colour).

The code

Typography in processing

DSDN 142 Creative Coding

Scaling

One problem that arises when using fonts in the way described is how do we get dynamically sized fonts? If we have to create a font of a set size it becomes quite hard to have text of varying sizes.

This is one place where the scale() function can come in handy. What scale does is it essentially shrinks or stretches the ENTIRE canvas. What this means is that everything you draw after a call to scale will be either smaller (if you put a number between 0 and 1 into the brackets) or bigger (if you put a number bigger than 1 between them).

void setup(){ size(500,500); PFont font; font = loadFont("Andalus-48.vlw"); textFont(font); smooth();}

void draw(){ background(255); scale(2); text("word", 15, 30); fill(0, 102, 153); text("word", 15, 60); fill(0, 102, 153, 51); text("word", 15, 90);}