Processing

Conceived by a couple of grad students working with John Maeda at the MIT Media Lab, Processing is an open source programming language and environment for designers. Built on top of Java, the platform is a simplified way of allowing digital artists (who might have no familiarity with coding), information designers (who might have some), or even skilled animators (who might have plenty) to construct programs that allow for dancing typography and iterative motion. Seven years in the making (hat tip to Design Observer), creators Ben Fry and Casey Reas released version 1.0 over the holiday weekend.

In an attempt to learn how to make information graphics dance around on the screen, I’ve learned the basics of ActionScript and have attempted (with little success) to learn the rudiments of Ruby On Rails. I’m dubious about the utility of a language built on top of another somewhat defunct language, but the ability to manipulate typography within a web browser without having to muck around with a timeline is intriguing.

This example from the Processing site’s “Exhibition” section is well within the realm of what’s possible in Flash, but it has a pleasant polish to it:

Iceland population graphic

Venture outside the world of information graphics and into digital art and you get Processing applications like this, a music video for Radiohead’s “Bodysnatchers” generated by a reactive program that responds to audio input:


Bodysnatchers – Zeno Music Visualiser from Glenn Marshall on Vimeo.

And finally, here’s an applet I pulled directly from the examples that come with the v1.0.1 package, exported, and then uploaded to my server. The code is 17 lines long:


void setup()
{
size(200, 200);
noStroke();
colorMode(RGB, 255, 255, 255, 100);
rectMode(CENTER);
}


void draw()
{
background(51);
fill(255, 80);
rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
fill(255, 80);
int inverseX = width-mouseX;
int inverseY = height-mouseY;
rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
}

This could be worth playing around with.

This entry was posted in design, web development and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>