Nutsmuggling

Context Free is a multiplatform language that allows designer to produce these semi-randomized decorations and animations in a simple way.¹This is my most successful attempt a Context Free image:

I’ve realised this image to decorate yogabenessere.it.

In this brief tutorial I will explain how my Indian pattern is composed by Context free.

First thing, download ContextFree. It’s free, as in free beer, but you can donate some money if you like the product.
Context Free illustrations are generated by grammars. A grammar is a set of rules. Here is the grammar that generated my illustration:

startshape CANVAS

rule CANVAS {
   8*{ rotate 135 x 33.5 y 10}GHIRIGORI{}
   GHIRIGORI{x 15 y 10}
}

rule GHIRIGORI {
   MULTISPIRAL{}
   MULTISPIRAL{rotate 180 y 4}
}
rule MULTISPIRAL {
   BRANCH_C { x 0 y 3 }
   BRANCH_A { x -0.5 y -2 s 0.23 rotate 210}
   CIRCLE { x -0.8 y -2 s 0.23}
   BRANCH_A {x  4 y 7.3 s 0.4 rotate -30 }
   BRANCH_C {x 4.3 y  8.5 s 0.25 rotate -10 }
   CIRCLE{x 4.24 y  9.1 s 0.25}
   BRANCH_A{ s 0.25 x 6.42 y 1.5 r 230}
   CIRCLE{s 0.25 x 6 y 1.5}

}
rule BRANCH_C {
    10* {y -0.2}CIRCLE{s 0.5}
    SPIRAL_C{}
}
rule BRANCH_A {
    10* {y -0.2}CIRCLE{s 0.5}
    SPIRAL_A{}
}
rule SPIRAL_C {
    CIRCLE { size 0.5 }
    SPIRAL_C { y 0.2
         rotate -3
         size 0.995 }
}
rule SPIRAL_A {
    CIRCLE { size 0.5 }
    SPIRAL_A { y 0.2
         rotate 3
         size 0.995 }
}

Scary, huh?
Don’t run away yet!

Let’s start from the first and most important line:

startshape CANVAS

This line tells the compiler: “The first (and only) things you must draw is a CANVAS. And what’s a CANVAS? Well, look at the following lines:

rule CANVAS {
   8*{ rotate 135 x 33.5 y 10}GHIRIGORI{}
   GHIRIGORI{x 15 y 10}
}

This is the CANVAS shape definition.² Paraphrasing we could say:

To draw a CANVAS:
* Draw 8 GHIRIGORIs; each one will be rotated 135 and shifted x33.5 and y 10
* draw another GHIRIGORI

This is what a GHIRIGORI looks like:

A GHIRIGORI is in turn made of two opposing MULTISPIRALs, and so on.

The final shape definitions are the most important ones, for they’re one actually doing most of the drawing:³

rule SPIRAL_C {
    CIRCLE { size 0.5 }
    SPIRAL_C { y 0.2
         rotate -3
         size 0.995 }
}
rule SPIRAL_A {
    CIRCLE { size 0.5 }
    SPIRAL_A { y 0.2
         rotate 3
         size 0.995 }
}

They are almost⁴ the only rules containing a primitive shape, in this case a circle.

CIRCLE { size 0.5 }

This means: “draw a circle HALF the previous size”.

And where all the rest of the magic comes from?
From most important feature of Context Free: recursion. The fanciest rules of context free are recursive, which means that the call themselves ad infinitum, or rather, as long as they produce visible results. So this is what happens

• Spiral draws a circle half the previous size
• Spiral calls itself
• Spiral draws a circle half the previous size
• Spiral calls itself
• etc etc…

This goes on until the circle becomes a 1px circle. This is our spiral:

Now that we have got to the bottom we climb back to the top: circles form spirals, spirals form branches, branches form multispiral, multispirals form ghirighori, ghirigori form a canvas; the startshape directive calls our canvas, and this is it.

As you see the logic behind Context Free is simple but very powerful.

Context Free exports png and svg images, which can be imported into your editor of choice and greatly enhanced. You can also exports a movie of the image formation. Here’s a movie of my Indian Pattern, inaugurating my flickr pro account:

Take a look at the Context free image gallery for a number of beautiful examples. My personal advice is to choose an example and start customising it to get basic grasp of Context Free. And do not forget to take a look at the official documentation.

Enjoy!
Davide

Notes

1. It should be noted that, as Loris Zena pointed out, a context free grammar is a specific type of grammar. [↩]
2. If you’re familiar with programming, you can think of shape definitions as functions. [↩]
3. All of the drawing actually, with the exclusion of the small dots positioned at spirals intersections, drawn by CIRCLE{s 0.25 x 6 y 1.5}, defined in the MULTISPIRAL rule. [↩]
4. See the previous note [↩]