Demonstration

A video showing GraphGrow in action should be gracing this screen shortly.

The Competition:
www.electricsheep.org

Animates "fractal flames" (a type of iterated function system) using a "chaos game" method.

Looks nice enough, but...

Re-invent the wheel...
...only squarer!

• Interactive design and analysis.
  graphgrow.svg
• Recursive renderer.
  graphgrow-engine.c
• Pipeline architecture.
  ./parameters | ./calculations | ./make-scene |
  graphgrow-engine | ppmtoy4m | mpeg2enc

Iterated Function Systems

• Start from a seed.
• Apply a set of rules.
• Rinse, repeat as required.

Graph-Directed IFS

• Not all rules need be applied at each step.
• Directed graph controls ("directs") rules.

Fractal Dimension

Topological dimension is a natural number that describes "how connected" a set is.

For example a collection of disconnected points has a topological dimension of 0 and a connected area has a topological dimension of 2.

Hausdorff dimension is a non-negative real number that refines the concept of topological dimension, and also relates it to other properties of space such as area or volume.

Fractals have Hausdorff dimension greater than their topological dimension, most often with a fractional part.

Ball Covering

• Covering a shape with smaller balls requires more balls.
• "How many more" is one way to measure fractal dimension.

Hausdorff Dimension: Informally

• X is the fractal shape to measure.
• r is the size of each ball, which is reduced towards 0.
• N_r(X) is the number of balls of that size required to cover the shape.
• d is the dimension to calculate.

The formal definition of Hausdorff Dimension is rather more involved!

Dimension Calculation (1)

Given the curve definition:

Solve this equation for d:

Dimension Calculation (2)

This can be done with the help of some logarithms:

Approximately, d = 1.261859507...

GDIFS Dimension Calculation

Hausdorff Dimension in Graph Directed Constructions
R Daniel Mauldin & S C Williams, AMS Vol. 309, No. 2 (Oct. 1988), 811-829

The dimension of a graph-directed construction is the maximum of the dimensions of each strongly connected component. The dimension of a SCC can be found by solving:

Iterative numerical calculations can find approximate solutions.

Open Set Condition

The calculated dimension is not always valid!

For self-similar sets, the existence of a feasible open set is a natural separation condition which expresses geometric as well as measure-theoretic properties.

The Open Set Condition tells when then dimension is valid, but checking that it holds is non-trivial for anything beyond 1 dimension. (GraphGrow renders 2D fractals.)

Informally, if the Open Set Condition doesn't hold, then the fractal overlaps with itself and the dimension calculations count the overlapped parts multiple times, which is the wrong thing to do.

On The Open Set Condition For Self-Similar Fractals
Christoph Bandt & Nguyen Viet Hung & Hui Rao, 2004-10-25

So, take the dimension calculations with a kilo of salt!

Scalable Vector Graphics

eXtensible Markup Language (XML).
A grammar/syntax for structured documents.

Scalable Vector Graphics (SVG).
A vocabulary for describing vector graphics in XML.

Document Object Model (DOM).
A model of the document inside the browser.

Core Javascript (ECMAScript).
A scripting language that can manipulate the DOM.

User Input (Event Model).
Events (eg, mouse clicks) can trigger scripts.

Dynamic SVG

Use ECMAScript to manipulate the SVG DOM.

// SVG uses this XML namespace.
var ns = "http://www.w3.org/2000/svg";
// Create a new pane object.
growPane = newPane();
// Create an SVG element to draw into.
growPane.renderCanvas =
    SVGDocument.createElementNS(ns, "g");
// Link into the DOM, so it will be drawn.
growPane.appendChild(growPane.renderCanvas);
// Arbitrary data can be embedded.
// Functions are values, and can be "anonymous".
growPane.onActivate = function() {
    grow(growPane.renderCanvas);
};

GraphGrow creates everything apart from the top level <svg> element dynamically.

Interactive SVG

• User input triggers events in the browser.
• These events can trigger script functions.
• Scripts need to tell the browser which events each element responds to.

// What to do when a button is clicked.
function buttonClick(evt) {
  activatePane(evt.currentTarget.button.pane);
  evt.stopPropagation();
}
// Tell the browser about that action.
button.addEventListener(
  "click", buttonClick, false
);

Drag-and-drop requires adding/removing listeners in response to events.

GraphGrow has some bugs in this area...

Rendering Methods

• Recursion: explore all paths until the detail is too small to display.
• Chaos Game: pick one long path at random until the image is dense enough.

Oversampling For Anti-Aliasing

• Improves quality by smoothing irregularities.
• Uses considerably more time and memory.

Homogeneous Coordinates (1)

An affine transformation is a combination of rotation / shearing / scaling (which can be represented by a 2x2 matrix multiplication) and a translation (a vector addition).

Using 3 coordinates instead of 2 makes the code much simpler:

Homogeneous Coordinates (2)

Two homogeneous points are equivalent when:

Transformations are now just a 3x3 matrix multiplication:

(With 9 parameters instead of 6, these are more general than affine transformations which have g=0, h=0, i=1.)

Scene Description Language

scene ::= GG0 [ rules ]

rule ::= node >-[ transformation | colour ]-> node

Example (echo "1.7" | ./spiral):

GG0 [
  0 >-[  5.493936680830965e-02,  1.563692725406522e-01,  0.000000000000000e+00,
        -1.563692725406522e-01,  5.493936680830965e-02,  0.000000000000000e+00,
         0.000000000000000e+00,  0.000000000000000e+00,  1.000000000000000e+00
      |  1.000000000000000e+00,  5.000000000000000e-01,  0.000000000000000e+00, 1.000000000000000e-01
      ]-> 0
  0 >-[  8.901212663192369e-01, -3.127385450587679e-01,  5.493936680830965e-02,
         3.127385450587679e-01,  8.901212663192369e-01, -1.563692725406522e-01,
         0.000000000000000e+00,  0.000000000000000e+00,  1.000000000000000e+00
      |  0.000000000000000e+00,  5.000000000000000e-01,  1.000000000000000e+00, 5.000000000000000e-03
      ]-> 0
  0 >-[  5.493936680830965e-02,  1.563692725406522e-01,  9.450606331916903e-01,
        -1.563692725406522e-01,  5.493936680830965e-02,  1.563692725406522e-01,
         0.000000000000000e+00,  0.000000000000000e+00,  1.000000000000000e+00
      |  1.000000000000000e+00,  5.000000000000000e-01,  0.000000000000000e+00, 1.000000000000000e-01
      ]-> 0
]

• GG0 format animations are just a sequence of scenes.
• GG0 format is easy to write, and almost as easy to read.

Pipeline Architecture

GraphGrow-Engine reads a sequence of GG0 scenes from stdin and writes a sequence of PPM images on stdout.

Helper programs to manipulate parameters are similar:

generate a line with 750 steps
./line 1.001 1.86 750 |           
convert each number to a scene
./spiral |                        
render scenes to images
./graphgrow-engine 720 576 4 |    
convert images to YUV format
ppmtoy4m -S 420mpeg2 -F 25:1 |    
encode to DVD-format MPEG video
mpeg2enc -f 8 -a 2 -o spiral.m2v  

Videos

Some videos rendered with GraphGrow-Engine should grace this screen shortly.

The End

That's it!

GraphGrow is online at:

http://claudiusmaximus.goto10.org/GG/