Algorithmic Ink in JavaScript

The always-excellent Aza Raskin had a little bit of fun recently – inspired by my recent Processing.js work – to port the popular Context Free Art language to JavaScript, using Canvas.

Renamed Algorithm Ink the result is a complete way to programmatically generate elegant pieces of artwork. Aza took the result a step further and built an in-browser IDE, gallery, and real-time result viewing. It appears to work best in Firefox 3, from my initial testing.

The result of one piece might look like this:

But that’s the beauty since you’ll likely never get the same piece of art twice. All works are seeded with a bit of randomness in order to create unique works. For example here is the CFA code that generated the above image:

startshape scale

rule scale{ 
	SPIKES{ s .03 }

rule SPIKES {
	SPIKE { r 90 }
	SPIKE { r 180 }
	SPIKE { r 270 }

rule SPIKE {
rule SPIKE {
	LSPIKE { flip 90 }

rule LSPIKE {
	LSPIKE { y 0.98 s 0.99 r 1}
rule LSPIKE 0.005 {
	SPIKE { r 90 }
	SPIKE { r -90 }
	LSPIKE { y 0.98 s 0.99  r 1}

  SPIKES{ s .025 }

The code is quite simple – just a set of rules that are initiated and seeded based upon a few parameters. More information can be found in the Context Free Art documentation.

Of course the entire Context Free port is open source: contextfree.js. Looking through the source you’ll note that the result is much more math-heavy than Processing performing frequent matrix-based transformations to the display. The result, however, is that pieces written in CFA (as shown above) involve much less, obvious, mathematical calls and is a much-purer result.

I think this particular port shows a ton of promise: It shows that it’s possible to create elegant works using JavaScript while doing it in a completely standards-based way. I’m excited to see people start to play around with this – I think it shows a lot of promise.

Posted: June 11th, 2008

Subscribe for email updates

7 Comments (Show Comments)

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.

Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

John Resig Twitter Updates

@jeresig / Mastodon

Infrequent, short, updates and links.