When I first started out with computer programming, what has grabbed hold of my attention were the drawing functions. Drawing and animating is the instant gratification of computer science learning. One can write the most beautiful code, performing cleaver calculations – but unless there’s more on the screen than a set of numbers, it will fail to grab new student’s interest.

This is one of the things I liked about Turing, it had one of the simplest drawing libraries available. Recently I’ve discovered something better – Processing 1.0 (BETA).

“Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, 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 developed by artists and designers as an alternative to proprietary software tools in the same domain.”

Processing is a language that favours media. It is incredibly easy to put together interactive animations, or computer generated images. Here’s an example applet, followed by the source code behind it.

[java]
/**
* Mouse 2D.
* Processing Example
* Comments by Tony Targonski
*/

// initialize the environment
void setup()
{
// window size
size(200, 200);
// do not outline shapes
noStroke();
// RGB colour mode, 255 max colour, 100 max alpha
colorMode(RGB, 255, 255, 255, 100);
// draw Rectangles from the center, not (default) corner
rectMode(CENTER);
// set framerate to 30 FPS
frameRate(30);
}

// draw frame. Called once during each loop iteration
void draw()
{
// clear the background with 51/255 grey
background(51);
// set drawing colour to 255/255 grey, 80/100 alpha
fill(255, 80);
// draw two rectangles
rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
rect(width-mouseX, height/2, ((height-mouseY)/2)+10, ((height-mouseY)/2)+10);
}
[/java]

I am pretty amazed by how much the environment handles on its own. Setting frameRate(30); will take care of frame rate control, and one can use mouseX and mouseY right away, without initializing or figuring out where is a good place to read updated user input.

I think that Processing is great for prototyping animations, or for working with computer visualization. In fact, it’s already used for teaching at:

• Interface Culture Linz Austria, Visual Programming
• Royal College of Art, MA Design Interactions
• ITIP, New York University, Nature of Code
• Yale School of Architecture, Model Based Design
• MIT Media Laboratory, Computational Media Design

And many others

This Java based language is very simple to use. The cross-platform environment is available for Linux, Mac OS X, and Windows. And the generated applets could easily be embedded into webpages for viewing and sharing, such as in this post.

[Source: Processing, Download, Reference (API)]
– Tony

Read more

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.