blag/hugo_blag/content/posts/2011-08-29-context-free/index.md

---
title: Context Free
date: "2011-08-29"
author: Chris Hodapp
tags:
- CG
- Project
- Technobabble
---

My [last post](./2011-08-27-isolated-pixel-pushing.html) 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:

![welcome.png](./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:

![spiral-first-20110823.png](./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:

```bash
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:

![tree3-abg.png](./tree3-abg.png)

![tree4-lul.png](./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:

```bash
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.