---
author: Chris Hodapp
comments: true
date: 2011-08-29 03:27:43+00:00
layout: post
slug: context-free
title: Context Free
wordpress_id: 504
categories:
- CG
- Project
- Technobabble
---

My [last post](http://hodapple.com/blag/isolated-pixel-pushing/) mentioned a program called [Context Free](http://www.contextfreeart.org/) that I came across via the [Syntopia](http://blog.hvidtfeldts.net/) blog as his program [Structure Synth](http://structuresynth.sourceforge.net/) was modeled after it.

I've heard of [context-free grammars](http://en.wikipedia.org/wiki/Context-free_grammar) before but my understanding of them is pretty vague. This program is based around them and the documentation expresses their [limitations](http://www.contextfreeart.org/mediawiki/index.php/Context_Free_cans_and_cannots); what I grasped from this is that no entity can have any "awareness" of the context in which it's drawn, i.e. any part of the rest of the scene or even where in the scene it is. A perusal of the site's [gallery](http://www.contextfreeart.org/gallery/) shows how much those limitations don't really matter.

I downloaded the program, started it, and their welcome image (with the relatively short source code right beside it) greeted me, rendered on-the-spot:

[![](http://hodapple.com/blag/wp-content/uploads/2011/08/welcome-685x656.png)](http://hodapple.com/blag/wp-content/uploads/2011/08/welcome.png)

The program was very easy to work with. Their quick reference card was terse but only needed a handful of examples and a few pages of documentation to fill in the gaps. After about 15 minutes, I'd put together this:

[![](http://hodapple.com/blag/wp-content/uploads/2011/08/spiral-first-20110823-685x685.png)](http://hodapple.com/blag/wp-content/uploads/2011/08/spiral-first-20110823.png)

Sure, it's mathematical and simple, but I think being able to put it together in 15 minutes in a general program (i.e. not a silly ad-hoc program) that I didn't know how to use shows its potential pretty well. The source is this:

    
    startshape MAIN
    background { b -1 }
    rule MAIN {
       TRAIL { }
    }
    rule TRAIL {
       20 * { r 11 a -0.6 s 0.8 } COLORED { }
    }
    rule COLORED {
       BASE { b 0.75 sat 0.1 }
    }
    rule BASE {
       SQUARE1 { }
       SQUARE1 { r 90 }
       SQUARE1 { r 180 }
       SQUARE1 { r 270 }
    }
    rule SQUARE1 {
       SQUARE { }
       SQUARE1 { h 2 sat 0.3 x 0.93 y 0.93 r 10 s 0.93 }
    }


I worked with it some more the next day and had some things like this:

[![](http://hodapple.com/blag/wp-content/uploads/2011/08/tree3-abg-300x225.png)](http://hodapple.com/blag/wp-content/uploads/2011/08/tree3-abg.png) [![](http://hodapple.com/blag/wp-content/uploads/2011/08/tree4-lul-283x300.png)](http://hodapple.com/blag/wp-content/uploads/2011/08/tree4-lul.png)

I'm not sure what it is. It looks sort of like a tree made of lightning. Some Hive13 people said it looks like a lockpick from hell. The source is some variant of this:

    
    startshape MAIN
    background { b -1 }
    rule MAIN {
        BRANCH { r 180 }
    }
    rule BRANCH 0.25 {
        box { }
        BRANCH { y -1 s 0.9 }
    }
    rule BRANCH 0.25{
        box { }
        BRANCH { y -1 s 0.3 }
        BRANCH { y -1 s 0.7  r 52 }
    }
    rule BRANCH 0.25 {
        box { }
        BRANCH { y -1 s 0.3 }
        BRANCH { y -1 s 0.7  r -55 }
    }
    path box {
        LINEREL{x 0 y -1}
        STROKE{p roundcap b 1 }
    }


The program is very elegant in its simplicity. At the same time, it's a really powerful program. Translating something written in Context Free into another programming language would in most cases not be difficult at all - you need just a handful of 2D drawing primitives, a couple basic operations for color space and geometry, the ability to recurse (and to stop recursing when it's pointless). But that representation, though it might be capable of a lot of things that Context Free can't do on its own, probably would be a lot clumsier.

This is basically what some of my OpenFrameworks sketches were doing in a much less disciplined way (although with the benefit of animation and GPU-accelerated primitives) but I didn't realize that what I was doing could be expressed so easily and so compactly in a context-free grammar.

It's appealing, though, in the same way as the functions discussed in the last post (i.e. those for procedural texturing). It's a similarly compact representation of an image - this time, a vector image rather than a spatially continuous image, which has some benefits of its own. It's an algorithm - so now it can be parametrized. (Want to see one reason why parametrized vector things are awesome? Look at [Magic Box](http://magic-box.org/).) And once it's parametrized, animation and realtime user control are not far away, provided you can render quickly enough.

_(And as [@codersandy](http://twitter.com/#!/codersandy/statuses/108180159194079232) observed after reading this, [POV-Ray](http://www.povray.org/) is in much the same category too. I'm not sure if he meant it in the same way I do, but POV-Ray is a fully Turing-complete language and it permits you to generate your whole scene procedurally if you wish, which is great - but Context Free is indeed far simpler than this, besides only being 2D. It will be interesting to see how Structure Synth compares, given that it generates 3D scenes and has a built-in raytracer.)_

My next step is probably to play around with [Structure Synth](http://structuresynth.sourceforge.net/) (and like Fragmentarium it's built with Qt, a library I actually am familiar with). I also might try to create a JavaScript implementation of Context Free and conquer my total ignorance of all things JavaScript. Perhaps a realtime OpenFrameworks version is in the works too, considering this is a wheel I already tried to reinvent once (and badly) in OpenFrameworks.

Also in the queue to look at:



	
  * [NodeBox](http://nodebox.net/code/index.php/Home), "a Mac OS X application that lets you create 2D visuals (static, animated or interactive) using Python programming code..."

	
  * [jsfiddle](http://jsfiddle.net/), a sort of JavaScript/HTML/CSS sandbox for testing. (anarkavre showed me a neat sketch he put together [here](http://jsfiddle.net/anarkavre/qVVuD/))

	
  * [Paper.js](http://paperjs.org/), "an open source vector graphics scripting framework that runs on top of the HTML5 Canvas."

	
  * Reading [generative art](http://www.manning.com/pearson/) by Matt Pearson which I just picked up on a whim.


