Remember last post where I was complaining that I couldn’t find a programming sketch pad? Well I did. It’s called Processing. And I’d like to show you what I drew, but WordPress is obstructing Processing’s Java applets the way iOS obstructs Flash. Which is actually a tangentially relevant simile because of the way I found Processing to begin with.

It started with an ad that played after a TED talk. John Maeda walked on talking about his new exhibit in the Adobe museum. Being mildly interested in both the simplicity guru and the digital art museum, I checked it out. Basically Maeda talks you through the history of digital design, starting sometime around the original Macintosh, and he doesn’t mention Apple since. He does praise Flash, which is made by – surprise surprise – the same company that runs the museum. I can’t think of another reason to praise the source of annoying roll-over ads and addicting simple web games.

Along the way Maeda mentions Processing, which is (surprise again) a project started by two of his former students. It’s a Java-based language designed specifically for graphics and data visualization that comes with its own minimalist IDE. The whole thing is open source, cross-platform, and reasonably well documented. It can handle particle systems, vector fields, and mathematical transformations easily and often transparently; it’s also the basis for Arduino scripting. Maybe I’m only impressed because I’ve never done graphical output before, but Processing has functions to draw points, rectangles, and ellipses simply and intuitively. Anyone with an AP Comp Sci background can pick it up in an afternoon, and I could probably teach it to high school students who’ve taken geometry. That said, it looks too complicated for middle school students because the syntax elements of Processing, which are familiar to me from Java and C++, would likely trip up the kid who keeps forgetting the semicolon. However, learning OOP in Processing will pay big dividends in a “real” language.

So what’s left is for me to demonstrate Processing, and WordPress is a stubborn as ever. So either you can look at some of their demos or, if you’re that interested in my symmetrical mirroring, download Processing and copy the source code under “Read the rest of this entry »”. Even the formatting gets screwed up, so hit command-T.

Processing is a useful tool for prototyping graphical ideas. Whether it is advanced enough to run sophisticated data analysis tools, or simple enough for children, remains to be seen.

//Symmetry: creates a field of dots with four axes of symmetry
//based on the mouse position. Click to change colors.
//This code licensed CC-BY Max Goldstein
//Define the Point class containing two ints and drawing methods
class Point {
int x, y;

Point() {

int getX() {
return x;

int getY() {
return y;

void drawSelf() {
ellipse(SIZE-x, SIZE-y, R, R);
ellipse(x, y, R, R);
ellipse(x, SIZE-y, R, R);
ellipse(SIZE-x, y, R, R);
ellipse(SIZE-y, SIZE-x, R, R);
ellipse(y, x, R, R);
ellipse(y, SIZE-x, R, R);
ellipse(SIZE-y, x, R, R);

//requires larger circle
void undrawSelf() {
ellipse(SIZE-x, SIZE-y, R+1, R+1);
ellipse(x, y, R+1, R+1);
ellipse(x, SIZE-y, R+1, R+1);
ellipse(SIZE-x, y, R+1, R+1);
ellipse(SIZE-y, SIZE-x, R+1, R+1);
ellipse(y, x, R+1, R+1);
ellipse(y, SIZE-x, R+1, R+1);
ellipse(SIZE-y, x, R+1, R+1);

final int SIZE = 400;
final int R=3;
float r, g, b;
Point[] pointList;

void setup() {
size(SIZE, SIZE);
pointList=new Point[25];
//initialize queue
for (int i=0; i0; i--) {
//add and print the new point
pointList[0]=new Point();

void mousePressed() {
fill(255-r, 255-g, 255-b);
for (int i=0; i<pointList.length; i++) {

void randomize() {
background(r, g, b);


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: