Algorithm Ink and ContextFree.js – generative art with Javascript


Currently Firefox, Safari and Opera have reasonable support for the Canvas HTML element. With IE the only major remaining laggard, there are a lot of people starting to experiment with Javascript’s new graphical capabilities. I mentioned John Resig’s Processing.js library in May, and now Aza Raskin has released the ContextFree.js library, which brings another generative drawing language to web-standards software development.

Besides being pretty, why is ContextFree.js interesting? Because it shows the power of Open web technologies for making graphically-enabled, compelling interaction. The true power of the web revolves around anyone being able to dive in, see what someone else has done, and expand upon it. Canvas lowers the cost of entry to creating graphical mashups and other dynamic, graphical content. It also shows the progress the web has made: a year ago, this demo would not have been possible. Canvas wasn’t ready, and Javascript interpreters weren’t fast enough. Looking at the qualitative difference in speed from Firefox 2 to Firefox 3 indicates the amazing and substantial progress made towards speeding up Javascript since the last major browser release cycle.

ContextFree.js is a Javascript port of the Context Free open source generative art application by Chris Coyne. It basically defines an extremely simple grammar that is designed to generate rule-based artwork with very few lines of code.

Aza has also released the Algorithm Ink website, which uses ContextFree.js to create an open source art gallery. Using Algorithm Ink, you can load, tweak, and share generative art through a web interface. When you see something you like, you can view the source for the artwork and use it in your own creations. Very cool.

ContextFree.js & Algorithm Ink: Making Art with Javascript
ContextFree.js at Google Code
Algorithm Ink
The original Context Free by Chris Coyne
Drawing Graphics with Canvas
Processing.js – visualization library for Javascript

Discuss this article with the rest of the community on our Discord server!