|
Chapter: The
Design and Layout Program
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
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 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:
textFont(myFont,42);
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);
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.
The Completed
Design and Layout Program
|
|
Previous
