Fractal Tree Drawer - Online Recursive Art & Chaos Game

A fractal tree is a self-similar structure generated by recursively splitting each branch into smaller sub-branches. Starting from a single trunk, each branch divides into two (or more) smaller branches at a specific angle, with each sub-branch being a scaled-down version of its parent. This recursive process mimics the branching patterns found throughout nature—from real trees and river networks to blood vessels and lightning bolts. The mathematical beauty lies in how a few simple rules (angle, length ratio, depth) produce stunningly complex and organic-looking forms.

The Chaos Game, coined by mathematician Michael Barnsley in 1988, is a fascinating paradox: completely random choices can produce perfectly deterministic fractal shapes. The algorithm works by starting at any point, then repeatedly selecting a transformation at random from a predefined set (an Iterated Function System or IFS) and applying it. For example, the Sierpinski Triangle emerges by repeatedly moving halfway toward a randomly chosen vertex of a triangle. Despite the randomness, after thousands of iterations, a precise fractal pattern appears. The famous Barnsley Fern uses four affine transformations with specific probabilities to generate a lifelike fern—all from pure mathematics and randomness.

Recursion depth determines how many levels of branching the tree has. At depth 1, you see only the trunk. Depth 2 adds primary branches. Each additional depth adds exponentially more branches (2^depth total). Lower depths (4-7) produce sparse, stylized trees, while higher depths (10-14) create dense, realistic canopies with thousands of branches. However, higher depths also increase computational load—depth 14 means over 16,000 branch segments. For most artistic purposes, depths between 8 and 12 offer the best balance of detail and performance.

Branch Angle controls how widely the sub-branches spread from their parent. Small angles (10-20°) create tall, narrow trees like poplars or pines. Larger angles (40-60°) produce wide, spreading canopies like oaks. Branch Ratio determines how much shorter each child branch is compared to its parent (e.g., 0.7 means each sub-branch is 70% the length of its parent). Higher ratios (0.75-0.85) create fuller, denser trees, while lower ratios (0.4-0.55) produce spindly, delicate shapes. Together, these two parameters define the tree's overall silhouette and character.

An Iterated Function System is a collection of affine transformations (combining scaling, rotation, and translation) each assigned a probability. When applied repeatedly via the Chaos Game algorithm, the IFS converges to a unique fractal attractor—a shape that remains unchanged under all the transformations combined. The Barnsley Fern IFS uses just 4 transformations with probabilities 0.01, 0.85, 0.07, and 0.07, yet produces an astonishingly realistic fern. IFS fractals are widely used in computer graphics, image compression, and modeling natural phenomena because complex organic shapes can be encoded in just a handful of numbers.

Real trees exhibit fractal-like branching because it's an evolutionary optimization for resource distribution. The recursive branching pattern maximizes sunlight exposure for leaves while minimizing the total length of branches needed to support them—essentially solving an efficiency problem. This is why similar branching patterns appear across vastly different scales in nature: river deltas, lung bronchi, coral structures, and neural dendrites all follow fractal-like rules. The ratio of branch diameters in real trees often follows Leonardo da Vinci's rule (the sum of the cross-sectional areas of branches equals that of the parent), and the branch length ratios we model correspond to real botanical growth patterns.

For the Sierpinski Triangle, around 5,000-10,000 iterations begin to reveal the distinctive triangular void pattern. For the Barnsley Fern, 20,000-50,000 iterations produce a recognizable fern shape, but 100,000+ iterations fill in the finer details for a lush, complete appearance. The first few hundred iterations are typically discarded (the "burn-in" period) as the algorithm converges toward the attractor. With modern JavaScript and Canvas rendering, even 500,000 iterations complete in under a second, so you can comfortably use high iteration counts for crisp, detailed results.