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.

But wait, there's more

5 thoughts on “Making Context Free Art

  1. I am a big fan of this. Honestly, I’m a big fan of everything you’ve done here with the site, but the context free stuff is interesting in itself.

  2. Aww shucks – I’m mainly just noodling about with the hard work other folks did.

    Aight – I’ve got an idea. It took me a bunch of time before I could figure out how to generate that stupid smile generator… and I didn’t get to make different mouths.

    You think you can put a decent smile on that smiley face?

    First thing – download context free the app from
    check out the lesson so you understand fully what the smiley is doing.

    Then show me a smiley face!

  3. New mouth rules:
    rule MOUTH {SQUARE{ s .8 .1 y -.15 b .5}}
    rule MOUTH {TRIANGLE { flip 180 s .35 y -.15 b .5}}
    rule MOUTH {CIRCLE { r 90 s .15 .75 b .5 y -.15 }}
    rule MOUTH { SMILE { y -.3 b .5 s .05 } }
    rule MOUTH { MOUSTACHE { y -.12 b .5 s .08 } }

    rule SMILE {
    ARC2 { y -.12 flip 180 }
    ARC2 { y -.12 r 180 }

    rule MOUSTACHE {
    ARC { y -.12 flip 180 }
    ARC { y -.12 r 180 }

    rule ARC {
    MARK { }
    ARC { size .97 x 0.35 y .2 r -2.5 }

    rule ARC2 {
    MARK { }
    ARC2 { size .97 x 0.35 r -1.5 }

    rule MARK {
    SQUARE { }

Leave a Reply