Technical Blog Entry 2

Second, somewhat delayed technical blog post. Building upon the content of the previous post on procedural text generation this post will cover something more graphical!

html5 canvas goes here
An arbitrary sided shape, a polygon is defined by positional values of it's vertices. Being numeric in nature it is easy to create some sort of rule which produces a list of vertex positions when iterated upon. As can be seen in the header banner above it's simple to randomly assign vertex number, position, even colour (24-bit red, green, blue colour space is ideal for this). One of the most powerful ways of procedurally generating shapes is to create rules which can be applied an arbitrary number of times.

Rule based generations

Rule Based Shape Generation

type:

corners:
depth:

html5 canvas goes here

The web app to the side illustrates this principle; a type of rule can be chosen and applied to a symmetrical N-cornered polygon. The rule simply defines whether to draw a line with a triangle or square in the middle of it but after that the rule is applied <i>again</\i> to each line produced. The depth value determines how many times this process is applied.

This creates some lovely patterns with edges detailed down to the pixel level. Depending on which rule is used snowflakes can be made or the edge tends towards a square, circle, diamond etc. Such shapes with 'infinitely detailed edges are known as fractals and have fascinating mathematical properties <links!> Mention fractional dimension, infinite edge length, zero volume and so on
<piccies>

Fractals: Infinitely Detailed

Mandelbrot Render

html5 canvas goes here

The most famous fractal has to be the Mandelbrot set <link> An iterated function on the complex plane which measures whether a particular complex number remains within the unit circle or leaves it.
<show equation>
Like all fractals it is infinitely detailed and the same overall pattern is repeated at different levels of zoom.

The only limit to the render to the right is the floating point accuracy of the web apps calculation (estimate?)

L-System: Forestry

L-Tree System

html5 canvas goes here

Interesting objects can be created with such rule based shape generation. Heck, that's how natural growth happens resulting in fractal-like patterns appearing all over the place in Biology <pics> A very common pattern can be seen in the growth of plants and trees.

L-Trees systems <link> are an abstract grammar where a sequence of symbols can be replaced by others. By using such symbols to represent branches and leaves they can be used to create their namesake. Wonderfully simple algorithm which draws line segments iterativly (mention turtle drawing tools). Like a fractal render a depth value can be set with the limit replaced with secondary structures (leaves and flowers?) Option of pure, symmetric structures or introducing a little bit of randomness.