Create complex visual elements with Processing language

I was having a kind of …insomnia attack last Friday night, so I decided to search the openSUSE repositories for interesting applications. I was using openSUSE (11.1) at the moment, with lots of additional repos [1] from the excellent Build Service, so there were a lot of things there to explore. One thing led to another, and soon I ended up downloading Processing. What is this? The package description looked interesting:

Processing is an open source programming language and
environment for people who want to program images, animation,
and interactions. It is used by students, artists, designers,
researchers, and hobbyists for learning, prototyping, and production.
It is created to teach fundamentals of computer programming
within a visual context and to serve as a software sketchbook
and professional production tool. Processing is an alternative
to proprietary software tools in the same domain

I thought “ok, this is promising, let’s have a closer look at it”, and waited a couple minutes for all 85MB of packages to be downloaded and installed from the Education repository (no Ubuntu packages yet, but you can just download a tarball with linux binaries). Then I started the application with the command:

dimitris@laptop:~> processing

From the first glance, the Processing IDE reminded me the Arduino board IDE and there was a reason for it; after a while exploring the Processing website, i read that Arduino’s IDE actually uses Wiring language which is a derivative of Processing language. Here is a screenshot:

As you see, this is meant to be very simple: there’s a “sketchbook” where you write your code, a toolbar with “Play”, “Pause”, “Export” icons and the usual menu. Below the sketchbook you see the “message” area, where all plaintext output appears (useful for debugging your code).

The target group of this language/IDE is  artists, scientists and generally technical users who want to visualise their ideas. What kind of visualisations? I am talking about 2D or even 3D animations. The workflow is straightforward: you write some C-like commands in the sketchbook area and then you just hit the “Play” button to see the resulting visualisation. The animations are produced by the underlying Java engine, which is included in the Processing package itself (no need for separate Java downloads).

What the code looks like? You can take a look at the online reference (also available from the menu Help in the IDE), but here is the obligatory “Hello, World” thingy:

void setup()
{
  println("Hello, World!");
}

Note that, every Processing sketch has this setup() method — a kind of main(). This example prints “Hello, World” to the output, but this is not what Processing really aims to. Instead, Processing‘s killer feature is the ability to easily draw objects. For instance, to draw “hello, world” you should load a font, set it up, and then just draw the letters. All the drawing is always done in a special draw() method. Here’s the code from the example tutorials:

PFont fontA; //A font variable. You must first create the desired one
  // using the 'Create Font...' option in the Tools menu.
void setup()
{
  //Set the size of the canvas
  size(200, 200);
  //Turn on antialiasing for smoother edges
  smooth();
  // Load the created font.
  fontA = loadFont("Courier-48.vlw");
  textAlign(CENTER);
 
  // Set the font and its size (in units of pixels)
  textFont(fontA, 24);
 
  // Only draw once
  noLoop();
} 
 
void draw()
{
  //Set the background color (0-255), 0 is black.
  background(0);
  // Set the fill color of the letters: light green
  fill(204, 204, 0);
  // Draw
  text("Hello World", 100,100);
}

These are all very simple, except a very important detail: in Processing, statements in draw() are executed repeatedly, until the program is stopped. Thus, each statement “is executed in sequence and after the last line is read, the first line is executed again”. This is the default behaviour, which I disabled with the noLoop() call.

Here’s the result:

If you comment out noLoop(), you won’t see any difference. Until you decide to do something more in draw(). For instance, here is a text scroller:

PFont fontA; 
 
void setup()
{
  size(200, 200);
  smooth();
 
  fontA = loadFont("Courier-48.vlw");
  textAlign(CENTER);
  textFont(fontA, 24);
} 
 
//global variable
float x=width;
 
void draw()
{
  background(0);
  fill(202, 202, 0);
  text("Hello World", --x,100);
  if (x < 0) x=width;
}

All I did was to erase noLoop(), add a new control variable for horizontal position and then draw Hello World. If x goes below zero, then set it back to canvas width. Notice two things. First, there is no for() loop here. It’s not needed since Processing will keep repeating the contents of draw() indefinitely. Second, all standard C-style coding conventions are being respected by Processing. The result is this:

If you click on the image, you will see the animation running, embedded in your browser (you need to have Java plugin installed!). Caution Firefox users: there is a known bug in Firefox with Processing applets — you can only see the animation applet in Konqueror, Opera and Internet Explorer, as long as you have the Java plugin installed of course…

Either way, there are many videos in YouTube that demonstrate what Processing can really do. Check this out:

Finally, Free Software relies on people putting their hard work to beautiful projects, which we all enjoy, so it’s nice to mention them. It’s us say “thank you”. So, Processing (not to be confused with Information Processing language) is the brain-child of Ben Fry and Casey Reas, initiated when they were both at the MIT Media Lab, and is being distributed under a GPL (for the IDE) and LGPL (for the core libraries) license. Thanks, guys for a wonderful tool! 🙂

[1] Here are some of the openSUSE repositories I use in my distro:
science
Education
KDE:Community
KDE:KDE4:Factory:Desktop
KDE:KDE4:Factory:Extra-Apps