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 three.

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 intend to implement the same app in several different environments and compare the results.

I can think of three¬†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

Edited in 2014 to add: WebGL is missing from this list. I might have to do something about that…

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.

The input image that drives the imagine app

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.

View the sources and compiled applications for all episodes

The implementations

  1. Episode 1: Processing
  2. Episode 2: Flash / ActionScript
  3. Episode 3: JavaScript &amp Canvas

Leave a Reply

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