Yet Another Coding Blog : graphics

Drawing Fractal Trees - Part 3

Avi Pilosof — Thu, 24 Jul 2008 03:02:12 GMT

The Application Itself

Firstly, here's what we're aiming towards:

Download the code:

Screenshot:

Writing The Application

Now, when I originally wrote the bones of the app it was very simple; everything fit in the single Page.xaml.cs file; there's actually very little to it. Since then I've expanded it to cater for all sorts of UI niceties and expansion opportunities, so it's a little bigger (and that's what's in the ZIP above). I'll concentrate on the basics for the purposes of the blog post; you can download the full source and inspect the complexities.

Step 1: Creating the Final Command Set

This step involves taking the Axiom and a set of rules, and using it to generate a final set of drawing commands/operations. The method below is in a class called LSystem, which is also where the axiom and rules are stored:

   1: public string FinalCommandSet(int depth)

   2: {

   3:     string res = Axiom;

   4:     for (int i = 1; i <= depth; i++)

   5:     {

   6:         foreach (LSystemRule rule in Rules)

   7:         {

   8:             res = res.Replace(rule.From, rule.To);

   9:         }

  10:     }

11:

  12:     return res;

  13: }

Given the "depth" of recursion, we just loop through the latest string we have and apply all the rules at each step, starting with the axiom.

Now that we have this string, we need to walk through it and draw the final result.

Step 2: The Recursive Drawing Algorithm

   1: int DrawSegment(Canvas uiRoot, string commandString, int stringPos,

   2:                 Point curPos, double curAngle, double curLength)

   3: {

   4:     Random rnd = new Random();

   5:     int i=stringPos;

   6:     while ( i < commandString.Length )

   7:     {

   8:         char c = commandString[i];

   9:         switch (c)

  10:         {

  11:             case '[':

  12:                 i = DrawSegment( uiRoot, commandString, i+1, curPos,

  13:                                 curAngle, curLength );

  14:                 break;

15:

  16:             case ']':

  17:                 return i;

18:

  19:             case 'F':

  20:                 Point newPos = FromAngleAndMagnitude(curPos, curAngle,

  21:                             curLength + rnd.Next(this.Randomness/3));

  22:                 DrawLine( uiRoot, curPos, newPos );

  23:                 curPos = newPos;

  24:                 break;

25:

  26:             case 'P':

  27:                 if ( this.DrawPetals && (rnd.Next(100) < 90) )

  28:                     DrawPetal(uiRoot, this.Petal, curPos, curAngle);

  29:                 break;

30:

  31:             case '-':

  32:                 curAngle -= this.Angle + rnd.Next(this.Randomness);

  33:                 break;

34:

  35:             case '+':

  36:                 curAngle += this.Angle + rnd.Next(this.Randomness);

  37:                 break;

  38:         }

  39:         i++;

  40:     }

41:

  42:     return i;

  43: }

First thing to note here is that the function is meant to be called recursively. The cases for '[' and ']' (lines 11 and 16) deal with that.

Next up, notice the overall loop; it's pretty much: "Step through each character of the string, act on that character, update our current pen settings (angle/position) as you go, and then move onto the next character."

Notice also that the function returns the final position in the string (i)that it ended up on; this is so that when you call it recursively, it reads as far as it can, then tells the caller where to continue from (see line 12).

At each call to the function, we pass in these args:

uiRoot	The canvas to which we'll be adding any drawn lines. This is the same through all recursive calls.
commandString	The original/total string of commands. Stays the same through all calls.
stringPos	The current position in the command string; this changes through each recursive call.
curPos	The current position of the "pen" on the canvas; starts at the tree's origin, and changes with invocation of 'F'.
curAngle	The current angle/heading of the "pen" on the canvas; starts at 90 degrees, and changes with invocations of '+'/'-'.
curLength	The current length of a line when drawing with 'F'. This usually remains constant, but I added it in to allow for some funkier fractals that shrink with each recursion.

Step 3: Drawing a Line

Finally, drawing a single line on the canvas is a matter of adding a Line shape to the canvas's Children member (slow, but simple). However, we only know the current location, the direction of the line, and the length. We need to convert this to a Start/End set of points.

A little trig:

   1: private Point FromAngleAndMagnitude(Point origin,

   2:                 double angle, double magnitude)

   3: {

   4:     double radians = DegreesToRadians(angle);

   5:     return new Point(

   6:         (int) (magnitude * Math.Cos(radians)) + origin.X,

   7:         (int) (magnitude * -Math.Sin(radians)) + origin.Y

   8:     );

   9: }

And that's pretty much it. Everything else is window dressing!

Further Reading

Here's what happens when you take this technique just a little further: http://www.speedtree.com/gallery/
Here's more info about the topic in general: http://vterrain.org/Plants/
Here's info about using fractals to generate whole scenes (not just plants): http://vterrain.org/

Avi

Drawing Fractal Trees - Part 2

Avi Pilosof — Sat, 19 Jul 2008 06:06:55 GMT

L-Systems

We've established that drawing the tree will use the concept of self-similarity. To put this in action, we're going to use what's called an L-System. Here's a crash-course...

Firstly, we establish that we have a "pen" that at any given time has a current position and a current heading/angle. It's always touching the paper, so when it moves forward, you get a line drawn. If you ever learned LOGO in school, this will be familiar.

Let's define a very simple set of operations.

Operator	Meaning
F	Move forward by a fixed amount.
+	Turn a little to one side.
-	Turn a little to the other side.
[	Remember your current position and heading, and store in a stack for later retrieval.
]	Retrieve the previous position/heading from the stack.

So if we feed something like "F+F+F+F" to our pen, we'll get a square, provided the angle that "+" uses is 90 degrees.

Take something a little more complex, such as "F[-F][+F]". This will draw a Y shape; walk it through on paper and see. The key thing to connect at this point is that the "[" and "]" characters are perfectly represented by a recursive call to the same function that's doing the drawing. Save that for later.

So we have our set of operators, we need one more thing: A way to generate an interesting string of operations that will draw the tree. The way we do that is by defining two things:

A starting point; an "axiom".
A rule (or set of rules) that transform a given set of operations into a new set of operations.

We then keep applying these rules to the resultant set of operations (starting with the axiom) as many times as we want. For example:

Axiom: F
Rule: F => +FF (this reads as: "Every time you see an 'F', replace it with '+FF'")

Execution example:

Iteration #	Current Set of Operations
0	F
1	+FF
2	++FF+FF
3	+++FF+FF++FF+FF

Feed the final string above into our "pen", and it will draw stuff. Not a tree though; not with that rule. If you want a tree, go with a rule like this:

F => FF-[-F+F+F]+[+F-F-F]

Wait, what?! Doesn't look anything like a tree, does it? But it turns out that when you apply that rule a few times to the axiom "F", it generates a set of operations that draws something very similar to a tree (depending on what angle you rotate with each +/-).

Check it out:

There is no randomness in this image; it's a direct drawing of the above rule (with 3-4 iterations of the rule), using a fixed distance for F and a fixed angle for +/-. Altering the distance that the pen moves with each F will make a larger/smaller tree; altering the angle can make a profound difference to the shape.

There are different rules that will produce different looking plants. For more examples, see this page.

To me, this is mind-blowing. That such a simple system with such basic rules and operations can generate something that looks so eerily "natural" is a little spooky. And reminds me that I had the same effect with the physics tutorial: Simple rules can make complex behaviour. I think there's some deep philosophical insight buried there.

What's left to do now is take this knowledge and apply it to a Silverlight program that can allow the user to alter the parameters in real-time, introduce some randomness, and maybe a little more life to the image.

Stay tuned...

Avi

Drawing Fractal Trees - Part 1

Avi Pilosof — Sat, 19 Jul 2008 04:02:20 GMT

Table Of Contents

Part 1: Basic fractal theory (this page)
Part 2: L-Systems - drawing trees.
Part 3: Implementation in Silverlight, live demo, code download.

A Brief Explanation of Fractals

In plain English, a fractal is a shape whose constituent parts are really just copies (scaled down) of the whole. Here's a simple example, the Koch Curve:

Take a look at the first part made up of 4 line segments. Make a copy of that whole part in your head, shrink it down, and rotate it so that it fits on top of one of the line segments. Notice how that looks like the beginnings of the second part? Keep going (forever), and that's your fractal: Any little bit of it is just a scaled down copy of the rest of it. You can zoom in infinitely and keep seeing the same pattern.

It's a very powerful concept that can generate stunning images when taken further.

But what really strikes me about fractals is that they're real; they're everywhere in the physical world. From lightning to river networks to broccoli to the layout of African villages! And also, to trees, which is where we come in.

Fractals in Trees

If you look at the "Y" shape created by a stylised tree branch, it's identical in concept to the branch that it spawned off, which is identical to its parent branch, etc, etc, until you reach the trunk - which forms the "axiom" of this fractal.

This series of posts will describe a Silverlight program based on this observation that allows users to generate random fractal plants by defining an axiom, a rule to iterate over, and a set of preferences that they can tweak.

Avi