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.
EYE{}
// flip an eye over to the other side of the face.
EYE{flip 90}
MOUTH{}
HEAD{}
}
//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.