John Resig - Algorithmic Ink in JavaScript

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 {}
	SPIKE { r 90 }
	SPIKE { r 180 }
	SPIKE { r 270 }
}

rule SPIKE {
	LSPIKE {}
}
rule SPIKE {
	LSPIKE { flip 90 }
}

rule LSPIKE {
	SQUARE {}
	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}
}

rule MOUSECLICK{
  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.