15,916,941 members
Articles / Programming Languages / XML

# Create a Fractal Christmas Tree

Rate me:
22 Dec 20023 min read 245.7K   4.2K   60   32
This program explores how trees are made using a simple fractal algorithm.

## What is a Fractal?

A fractal is a shape that is symmetric in scale, meaning that it looks the same, or similar, magnified as it does unmagnified. There are many naturally occurring objects that exhibit this self-similarity in scale. Trees, coastlines, mountain ranges, and clouds are some examples.

## How Do You Make a Fractal?

A fractal is typically made using recursion. Given a line segment, and operation is performed on that segment which generally yields one or more new segments. The same operation is then performed again, on the new segments. In order to prevent the program from going into an infinite loop, the recursion algorithm usually includes a test that prevents it from operating on a segment smaller than a single pixel.

## How Does this Program Create a Tree?

Creating a tree is very simple. Given the "stem" as a seed "branch":

1. Draw the branch.
2. Select a point on the branch where two new branches will be placed, one on each side of the current branch.
3. From the user inputs, determine the angle and length of these two new branches.
4. Recurse using the left branch.
5. Recurse using the right branch.

This is accomplished in very few lines of code:

C#
```public void Start(Line seed)
{
h15=Math.Abs(seed.Size.Height)/5;
Fractal(seed, depth);
}

private void Fractal(Line l, int depth)
{
// draw the branch in a color based on its length
int len=l.Length;
if (len < 3)
{
gr.DrawLine(pbr3, l.StartPoint, l.EndPoint);
}
else if (len < h15)
{
gr.DrawLine(pbr2, l.StartPoint, l.EndPoint);
}
else
{
gr.DrawLine(pbr1, l.StartPoint, l.EndPoint);
}

while ( (depth != 0) && (l.Length > 1) )
{
// get the second segment when we split the line
Line l2=l.SplitAt(bp)[1];

// if no change, then exit.
if (l2.Length==l.Length)
{
return;
}

// get the left and right branch starting points
Line bp1=l.SplitAt(bp+MathEx.Dev(bpDev))[1];
Line bp2=l.SplitAt(bp+MathEx.Dev(bpDev))[1];

// the new "master" branch starting point has no randomness
l=l2;

// get the left and right branches
(int)(bp1.Length*bl/100+MathEx.Dev(blDev)));
(int)(bp2.Length*bl/100+MathEx.Dev(blDev)));

// recurse both branches
Fractal(lineLeft, depth-1);
Fractal(lineRight, depth-1);
}
}```

You will notice that the above code looks a bit more complicated than it needs to be, what with all those `MathEx.Dev` function calls. These take the user's specified +/- deviation and adjust the branch angle, length, and position randomly. This makes our trees much more natural looking!

## A Note About the User Interface

The program is set up to autogenerate the tree when the main parameters (branch point, angle, and length) are changed. Changing the +/- deviation and color does not automatically regenerate the tree. After changing these parameters, click on the "Generate" button. Once you add randomness, click on the "Generate" button several times to see different trees.

On slow computers, you may want to turn off auto-generation.

Play with the "depth" spin control. This controls the level of recursion. Going higher than 4 can take a long time to generate the tree. You can get a better understanding of the algorithm by setting the depth to `1`, then incrementing it.

## A Note about the Code

This program includes a rough prototype of what I call my "Application Automation Layer". Have fun exploring the concepts behind it. For example, the GUI is generated from a text file, and the color picker controls are "replicated":

The color channel (red, green, or blue):

```GUI:ColorChannelPicker
STATIC s1 at (0, 3) caption "#:"
SPIN spChannel at (15, 0) size (40, 20) storage value
options (min:0 max:255 step:1) \
onchange "ColorChannelChangeEvent(@, #)"
COLORBOX clrbox at (60, 0) size (20, 20) storage channelColor
GUIEND```

The color picker (one of three), which has three color channels and the final color:

```GUI:ColorPicker
INHERIT inhRed at (0, 0) postfix R gui ColorChannelPicker
INHERIT inhGreen at (90, 0) postfix G gui ColorChannelPicker
INHERIT inhBlue at (180, 0) postfix B gui ColorChannelPicker
COLORBOX clrbox at (270, 0) size (60, 20) storage compositeColor
GUIEND```

And the main `GUI` itself:

```GUI:MainForm
STATIC s1 at (10, 13) caption "Branch Point:"
STATIC s2 at (10, 33) caption "Branch Angle:"
STATIC s3 at (10, 53) caption "Branch Size:"
STATIC s4 at (150, 13) caption "%"
STATIC s5 at (150, 33) caption "degrees"
STATIC s6 at (150, 53) caption "%"

STATIC s7 at (200, 13) size (100, 15) caption
"Deviation +/- :" options (rightjustify)
STATIC s8 at (200, 33) size (100, 15) caption
"Deviation +/- :" options (rightjustify)
STATIC s9 at (200, 53) size (100, 15) caption
"Deviation +/- :" options (rightjustify)

SPIN spBP at (100, 10) size (50, 20) storage branchPoint
options (min:20 max:80 step:1) \
onchange "AutoUpdateCheck"
SPIN spBPDev at (300, 10) size (50, 20) storage
bpDev options (min:0 max:9 step:1)

SPIN spBA at (100, 30) size (50, 20) storage
branchAngle options (min:20 max:160 step:1) \
onchange "AutoUpdateCheck"
SPIN spBADev at (300, 30) size (50, 20) storage

SPIN spBS at (100, 50) size (50, 20) storage
branchSize options (min:20 max:80 step:1) \
onchange "AutoUpdateCheck"
SPIN spBSDev at (300, 50) size (50, 20) storage
bsDev options (min:0 max:9 step:1)

STATIC s10 at (350, 13) caption "%"
STATIC s11 at (350, 33) caption "degrees"
STATIC s12 at (350, 53) caption "%"

STATIC s13 at (10, 83) caption "Large Branches:"
INHERIT inhColor1 at (100, 80) prefix clr1 gui ColorPicker

STATIC s14 at (10, 108) caption "Small Branches:"
INHERIT inhColor2 at (100, 105) prefix clr2 gui ColorPicker

STATIC s15 at (10, 133) caption "Leaves:"
INHERIT inhColor3 at (100, 130) prefix clr3 gui ColorPicker

BUTTON btnGenerate at (10, 170) size (80, 25)
caption "Generate!" \
onselect "EventUpdateTree"

CHECKBOX ckAutoGen at (100, 175) size (100, 20) caption
"Auto Generate" storage autoUpdate

STATIC s16 at (200, 178) size (70, 15) options
(rightjustify) caption "Depth:"
SPIN spDepth at (275, 175) size (50, 20) storage
depth options (min:1 max:10 step:1) \
onchange "AutoUpdateCheck"

OWNERDRAW fractalTree at (10, 200) options
(autosizeW:10 autosizeH:10) \
onpaint "EventPaintTree()"  \
onsize "EventUpdateTree()"

GUIEND```

## Prior Art

Many years ago, I wrote a program for the Reuben H. Fleet Space Theatre in San Diego, California (http://www.rhfleet.org/ [^]) as part of their symmetry exhibit. I believe the exhibit is now permanently on display. This program is based on one of the two exhibits that I made for the Space Theatre. The other exhibit demonstrated the self-similiarity of coastlines.

A list of licenses authors might use can be found here.

Written By
Architect Interacx
United States
Blog: https://marcclifton.wordpress.com/
Research: http://www.higherorderprogramming.com/
GitHub: https://github.com/cliftonm

All my life I have been passionate about architecture / software design, as this is the cornerstone to a maintainable and extensible application. As such, I have enjoyed exploring some crazy ideas and discovering that they are not so crazy after all. I also love writing about my ideas and seeing the community response. As a consultant, I've enjoyed working in a wide range of industries such as aerospace, boatyard management, remote sensing, emergency services / data management, and casino operations. I've done a variety of pro-bono work non-profit organizations related to nature conservancy, drug recovery and women's health.

 First Prev Next
 My vote of 5 JamesHollowell18-Dec-12 14:49 JamesHollowell 18-Dec-12 14:49
 My vote of 5 Mohsen Kazemi1-Jul-10 10:13 Mohsen Kazemi 1-Jul-10 10:13
 database Member 384134123-Feb-07 19:41 Member 3841341 23-Feb-07 19:41
 Printing Heath Stewart2-Jan-03 6:52 Heath Stewart 2-Jan-03 6:52
 Re: Printing Marc Clifton2-Jan-03 7:04 Marc Clifton 2-Jan-03 7:04
 Very interesting Sameh Ahmed27-Dec-02 22:41 Sameh Ahmed 27-Dec-02 22:41
 dataMatrix David Stone23-Dec-02 13:34 David Stone 23-Dec-02 13:34
 Re: dataMatrix Marc Clifton23-Dec-02 14:00 Marc Clifton 23-Dec-02 14:00
 Re: dataMatrix freshthinking14-Jun-03 0:26 freshthinking 14-Jun-03 0:26
 If you use properties when the code is compiled the property is converted into get... and set... methods by the compiler.
 Pretty :-) Taka Muraoka23-Dec-02 11:51 Taka Muraoka 23-Dec-02 11:51
 Re: Pretty :-) Marc Clifton23-Dec-02 15:29 Marc Clifton 23-Dec-02 15:29
 Re: Pretty :-) Taka Muraoka23-Dec-02 15:50 Taka Muraoka 23-Dec-02 15:50
 Re: Pretty :-) Marc Clifton24-Dec-02 1:16 Marc Clifton 24-Dec-02 1:16
 Re: Pretty :-) Taka Muraoka24-Dec-02 12:12 Taka Muraoka 24-Dec-02 12:12
 WOW! Now lets add some christmas decoration.... Anonymous23-Dec-02 9:58 Anonymous 23-Dec-02 9:58
 Re: WOW! Now lets add some christmas decoration.... funkycoder30-Dec-02 21:50 funkycoder 30-Dec-02 21:50
 Getting a System.NullReferenceException... Uwe Keim23-Dec-02 5:53 Uwe Keim 23-Dec-02 5:53
 Re: Getting a System.NullReferenceException... Marc Clifton23-Dec-02 8:05 Marc Clifton 23-Dec-02 8:05
 Very Cool Paul M Watt23-Dec-02 5:43 Paul M Watt 23-Dec-02 5:43
 Cool! Shog923-Dec-02 5:34 Shog9 23-Dec-02 5:34
 Thanks, Marc! Roger Wright23-Dec-02 5:22 Roger Wright 23-Dec-02 5:22
 Re: Thanks, Marc! Marc Clifton23-Dec-02 5:28 Marc Clifton 23-Dec-02 5:28
 Shweeeeeet tree Marc Jason Henderson23-Dec-02 5:22 Jason Henderson 23-Dec-02 5:22
 Last Visit: 31-Dec-99 18:00     Last Update: 13-Jun-24 10:13 Refresh 1