Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
592
To ensure that the sketch functions properly, please enter the following code into
Processing in the exact order that I present it. As usual, the sketch begins with a title and
global variable declarations:
/* Basic Drawing Application Example
Ira Greenberg, April 17, 2006 */
// fonts
PFont titleFont, clearFont;
The PFont variables were used for label text. I chose to dynamically generate a font by
using Processing’s createFont() function. This function attempts to convert a typeface
installed on your system into the format Processing needs. Later in the sketch, I specified
Arial as the typeface to convert, as it’s a very common face. Don’t worry if you don’t have
Arial installed on your system—you’ll be able to substitute a different face.
// canvas background color
color canvasBg = color(255);
// paint color
color paintColor;
// palette
color[]palette = new color[156];
The palette array was initialized with 156 slots in memory, based on a table 6 swatches
across and 26 swatches down (6 ✕ 26 = 156). This size was arbitrarily based on the size of
the overall palette, as well as the size of each swatch.
// create 3 icons
PImage pencil, brush, eraser;
I used imported images for the three tool buttons and Processing’s built-in PImage data
type. These images need to live in Processing’s data directory. You can download these
images from the Download section of the friends of ED web site (www.friendsofed.com/
downloads.html).
// panels coordinate arrays
float[] menu, tools, canvas;
// buttons coordinate arrays
float[] pencilBtn, brushBtn, eraserBtn;
Each section of the drawing interface, as well as the buttons, was broadly defined as a
coordinate array (with a length of 4), holding each section/button’s x, y, width, and height
values.
//create button state colors
color buttonUp = color(175, 175, 50, 150);
color buttonOver = color(255, 130, 20, 175);
color buttonSelected = color(250, 250, 30, 175);