Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
594
The createFont() function dynamically generates a font based on the typeface name
argument passed to the function. Again, I used Arial as it’s a very common face, and is
likely installed on your computer. If you don’t have Arial (or if you dislike it), you can substitute
it with any face installed on your computer. If you’re not sure what faces are
installed, you can run the command println(PFont.list()); in Processing, which will
output all your installed fonts.
// create icons
pencil = loadImage("pencil_cursor.png");
brush = loadImage("brush_cursor.png");
eraser = loadImage("eraser_cursor.png");
To load the cursor PNG images, you need to first import them into the sketch’s data directory
using the Add File command, found under the Sketch menu.
// create panel coordinate arrays
menu = new float[]{
0, 0, width, 25 };
tools = new float[]{
0, menu[3], 50, 165 };
canvas = new float[]{
tools[2], menu[3], width-tools[2], height-menu[3]+1 };
// create button coordinate arrays
pencilBtn = new float[]{
tools[0]+5, tools[1]+10, tools[2]-11, 45 };
brushBtn = new float[]{
tools[0]+5, pencilBtn[1]+ pencilBtn[3]+5, tools[2]-11, 45 };
eraserBtn = new float[]{
tools[0]+5, brushBtn[1]+ brushBtn[3]+5, tools[2]-11, 45 };
// create slider coordinate arrays
sliderBar = new float[]{
width-150, menu[1]+menu[3]/2, 75, menu[1]+menu[3]/2 };
sliderHandle = new float[]{
sliderBar[0]+sliderBar[2]/2, sliderBar[1]-3, 6, 6 };
// create clear button coordinate array
clearBtn = new float[]{
width-45, 6, 31, 13 };
I initialized the coordinate arrays, using existing interface elements as references in defining
the specific coordinate values. Laying out an application based on these types of relationships
adds flexibility to the GUI. For example, if three buttons are sized and placed
based on the width of the tool pane, it doesn’t matter if the application window eventually
scales up or down—the buttons will resize appropriately and remain in the correct place
in the interface. In this sketch, I didn’t follow this rule religiously, but rather used it when
it seemed convenient. Although laying elements relative to each other adds flexibility, it