An Introduction To Programming With Processing

The Design and Layout Program

Using what we've learned thus far from this guide, you should be able to construct a program that “sketches” a prototype for an interface to an online portfolio similar to the interface01.pde sketch.

Program Notes for Interface01.pde

The PDE Tools menu

Create Font Tool

Under the Tools menu in the PDE are additional build automation tools and other tools that members of the community have contributed to Processing. More tools can be downloaded to add to the functionality of Processing by downloading and installing the necessary files from A useful tool that comes with the PDE is the Create Font tool. This tool allows you to package any font you'd like to use in your sketch so that users accessing your sketch do not have to have that font installed on their computers in order for the sketch to display correctly. To use the Create Font tool in the PDE click:

Tools → Create Font..
The Create Font tool can be used to ensure that font's you have used in your sketch will display correctly on other users' systems regardless of whether they have the same fonts installed on their systems or not.
The Create font dialogue box appears in which you can scroll down to and select the font you would like to package with your sketch. Choose a size you would like to have the font displayed at by specifying a numerical value in the size field (values are in pixels). The size value determines the size of the characters of the font that will be exported as bitmaps, and although you can change what size you would like to display a font as in your sketch even after it's been exported it is recommended that you use the font in your sketch at the same size that you exported it as for best results. Up-scaling a font is not recommended and as a result if you do plan on using the font in different sizes it is best to use the Create Font tool to export the font at the largest size and use Processing font() function to down-scale the font only when necassary.
When you are happy with your selection click “ok” and Processing will create a file with the extension .vlw in your sketch's data folder, it is important that you know the exact name of this file as you will need to load it just like you loaded an image into Processing by using the PFont class and instantiating an object from it. To use the font in your sketch, you will need to follow a procedure very similar to that of loading and displaying images. Start by creating a new object that will serve as the container for your font, by adding the following statement:
PFont myFont;
PFont is a special data type in Processing used for storing fonts, in a similar way that PImage works with images. myfont is the name we have chosen to create an object that inherits the qualities of the PFont class. Next you will need to load the font into your sketch, to do so add the following statement:
myFont = loadFont("FancyFont-Bold-42.vlw");
The loadFont() function accepts one parameter that is the name of the font, including it's extension, enclosed within double quotes. We will then need to specify what font we would like to use to display text in our sketch, because you are permitted to use more than one type of font in a sketch the next statement tells Processing which font it is you would like to render the text that follows this statement:
The textFont() function accepts two parameters, the name of the PFont object you have created (which is myFont in this case) and the size at which you would like the text that follows to be rendered at. All the calls to the text() function (which is used to render text within a sketch) that follow this statement will use the parameters set in textFont() for rendering text, until textFont() is called again with a different set of parameters. Finally you can draw the text to the Display Window with the text() function:
text("Welcome to my\nProcessing Portfolio",  width/2, height/2);
Completed Design and Layout Program
You might notice something strange about the literal string parameter for the text() function. Between the words “my” and “Processing” are the characters \n. This is known as an escape character and escape characters are not rendered within a sketch. Escape characters are used to format text before they are drawn to the screen. In my Interface01 sketch there is a break between “Welcome to my” and “Processing Portfolio”, this is because the \n is known as a new line escape character and has the function of inserting a break between characters. This prevents having to use the text() function twice, first to render the text “Welcome to my” then adjust the Y parameter in the next call to text() to render the rest of the sentence. Using a short-cut like this can save your program some overhead, but also comes with the expense of making your code look a little less readable, particularly if you have never seen an escape character before. Another place where a short-cut has been used in the Interface01 program is in the statement where multiple instances of the PImage class have been created as holders for images that will be used throughout the rest of the sketch. The following statement demonstrates this:
PImage mGoat, banner, bkg, button;
The long version of this code would look like this:
PImage mGoat;
PImage banner;
PImage bkg;
PImage button;
As you can see using a shortcut in this way can save you quite a bit of typing and can actually make your code even easier to read.

Download the example file