Processing: Creative Coding and Computational Art

Setting
The Setting section includes the basic functions just discussed. One issue that may be new
to you is the concept of a rendering state or graphics context. Graphics application software
can make it seem that color is generated on a per-shape basis. If you need a blue rectangle,
you grab the paint bucket tool, select a blue color, and click in your shape (or some
similar procedure). What a tool like the paint bucket conceals is how color is implemented
as a state change in a programming language like Java and Processing. As a comparison,
I’ve included the code for a simple Java graphics application followed by its Processing
equivalent. Both programs generate the same output, except that the Java program does it
in 19 lines (not including comments or skipped lines), while Processing does it in 5. Do not
try to run the Java application from within Processing; it will not work. (As an aside, for the
few experienced Java readers out there—and this comes from Ben Fry directly—classes
from the java.awt.* and javax.swing.* packages should not be used within Processing,
as they will generate inconsistent results.) What the Java vs. Processing code comparison
should show you is how much stuff Processing handles under the hood, or encapsulates,
making our coding lives happier. Here’s the Java version:
import java.awt.*;
import java.applet.*;
public class SimpleJavaExample extends Frame {
//constructor
public SimpleJavaExample(){
setSize(200, 200);
setBackground(Color.white);
// this program still requires window closing behavior
}
//main method
public static void main(String[]args){
new SimpleJavaExample().setVisible(true);
}
//overrides default paint method
public void paint(Graphics g){
g.setColor(new Color(0, 0, 200));
g.fillRect(25, 50, 50, 50);
g.fillOval(125, 50, 50, 50);
g.setColor(new Color(0, 0, 0));
g.drawRect(25, 50, 50, 50);
g.drawOval(125, 50, 50, 50);
}
}
In Processing, to get the same output, you can just write the following:
size(200, 200);
background(255);
fill(0, 0, 200);
rect(25, 25, 50, 50);
ellipse(150, 50, 50, 50);
PROCESSING LANGUAGE API
725
A