Bernie’s Big Web Graphics Programming Environment Shootout

In which I harness the power of public expectation to motivate myself to write more software posts, by loudly committing to write a series of four.

A graphics programming environment is a language or library suitable for drawing pretty patterns. In this series I’m interested in raster drawing environments, in which you can directly manipulate pixels rather than using higher level constructs like HTML or SVG.

I can think of four graphical programming environments that can be deployed on the web, and they’re all very different:

1. Processing is a tool for creating interactions that can be deployed as a Java applet (sure there are loads of other Java-based graphics environments, but this list has to end somewhere)
2. Flash / ActionScript is the granddaddy of web graphics environments
3. Canvas is a relatively recent addition to the HTML specification
4. Google Native Client is a (currently) Chrome-only environment for safely running native machine code in a browser

The imagine app

Imagine is a fun little app that I threw together in a few hours while learning Processing. It’s a black canvas, and moving your mouse over the canvas releases a stream of particles that spell “imagine” in furry technicolor letters:

It’s a simple app that exercises a few basic functions that I’d expect in any graphics environment: drawing of shapes, basic arithmetic, trigonometry and image file reading.

Each frame when the mouse is down, a number of sparks are released near the pointer, following a power distribution that decreases further away from the mouse pointer. Grey sparks are released over the background and coloured sparks over text. The text is defined in a specially constructed input image (left) where the red and green channels are interpreted as the initial X and Y velocity and the blue channel is a mask to mark the text. This image was created in Photoshop, with bevel effects used on the red and green channels to create the effect that the coloured sparks always fly away from the text. The photoshop image is part of the source download below.

Download the sources and compiled applications for all episodes

The implementations

This is a work in progress. I’ve written up my experience with two of the four environments, and will update this section when I’m finished.

1. Episode 1: Processing
2. Episode 2: Flash / ActionScript
3. Episode 3: JavaScript &amp Canvas
4. Episode 4: Google Native Client (in progress)