Tag Archives: javascript hacks

Project Idea: Context Free or Processing Header Plugin for WordPress

An iteration or so of the website ago I hacked in a random art generator into the background of the title of my website using ContextFree.js by Aza Raskin.  It was a cool little hack, but what would be really nice is to make it shareable.

I’d like a WordPress Plugin that finds the heading of your website and inserts a little Canvas element, includes either processing.js or contextfree.js and picks a sketch, then plops it in the background of your website’s title.  How cool would that be?

Making Context Free Art

If you are reading this post in your feed reader, you’ll want to click through to my actual website. Trust me on this one.

I was really impressed with Aza Raskin’s ContextFree.js experiment. I like how the simple rules of a context free art piece generate complex forms. See below, that text will turn into something I can’t exactly predict.
I’ve added a few comments to help you understand what’s going on there.

//all context free art starts with a single rule.  Ours will start with a rule named face.
startshape FACE
//and here is the rule FACE
rule FACE{
//a FACE rule means that we should draw the rules EYE MOUTH and HEAD.
 // flip an eye over to the other side of the face.
 EYE{flip 90}

//OH NO! We have two rules named HEAD.  Context free will randomly pick one
rule HEAD{ CIRCLE{}}
rule HEAD{  SQUARE{}}

rule EYE{CIRCLE { s .1 b .5 y .12 x .3}}
rule EYE {SQUARE { s .1 b .5 y .12 x .3}}
rule EYE {SQUARE { s .1 b .5 y .12 x .3 r 45}}
rule EYE {TRIANGLE { s .1 b .5 y .12 x .3}}
rule EYE {TRIANGLE { s .1 b .5 y .12 x .3 r 60}}

rule MOUTH {SQUARE{ s .8 .1 y -.12  b .5}}

And here is a randomly generated face, all made up of squares, circles, and triangles:

Want more faces? Go mess about with my face generator on Aza’s demo site.

update: in the comments Chris came up with a bunch of great mouths for an even better face generator!
The art is context free because any rule can be executed without knowing the context of the other rules – they are side-effect free. (these are the kind of problems that work well on lots of processors)
It gets much better. If you are using a modern browser, you’ll see that the heading of my website now is using this to generate random art up there in that previously wasted space.
Reload the website, you’ll see different art generated according to a handful of tiny algorithms. If you can see this, you might want to switch from Internet Explorer to Firefox or Safari. They both support the cool stuff that I’m doing, but you can’t see right now.