The Design and Layout ProgramUsing 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
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 http://www.processing.org/reference/tools/ 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 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:
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:
myFont = loadFont("FancyFont-Bold-42.vlw");
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);
The long version of this code would look like this:
PImage mGoat, banner, bkg, 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.
PImage mGoat; PImage banner; PImage bkg; PImage button;