About

A binary fractal tree is a recursive geometric structure where each branch spawns exactly two child branches at a specified angle θ. The branch length decreases by a ratio factor r at every recursion level, producing self-similar patterns characteristic of fractal geometry. At depth d the tree contains 2^d − 1 total segments. Misconfigured parameters produce degenerate or visually collapsed trees. This tool renders the full recursive structure on an HTML5 Canvas with real-time wind simulation and HSL color interpolation from trunk to canopy.

The rendering uses trigonometric endpoint calculation per branch. Wind is modeled as a time-varying sinusoidal perturbation Δθ = A ⋅ sin(ωt + φ_depth) applied per recursion level, creating a natural swaying effect. Depth beyond 15 is capped to prevent rendering > 32,768 branches per frame. The tool approximates organic tree forms under the assumption of uniform branching symmetry.

Formulas

Each branch endpoint is computed via polar-to-Cartesian conversion from the parent endpoint. Given a parent tip at (x₀, y₀) with direction angle α and branch length L:

x₁ = x₀ + L ⋅ sin(α)

y₁ = y₀ − L ⋅ cos(α)

At each recursion level, two child branches are created with angles α − θ (left) and α + θ (right), and the new length is scaled:

L_child = L_parent ⋅ r

The total number of segments in the tree is a geometric series:

N = d∑k=0 2^k = 2^d+1 − 1

Wind perturbation per level at time t:

Δθ = A ⋅ sin(ω ⋅ t + k ⋅ 0.5)

Where α is the current branch direction angle, θ is the branching spread angle, r is the length ratio (0 < r < 1), d is the maximum recursion depth, A is the wind amplitude, ω is the wind frequency, and k is the current recursion level.

Reference Data

Depth d	Total Branches	Tip Branches	Length Ratio r = 0.67	Length Ratio r = 0.75	Typical Angle θ
1	1	1	100 px	100 px	25°
2	3	2	67 px	75 px	25°
3	7	4	44.9 px	56.3 px	30°
4	15	8	30.1 px	42.2 px	30°
5	31	16	20.2 px	31.6 px	30°
6	63	32	13.5 px	23.7 px	35°
7	127	64	9.1 px	17.8 px	35°
8	255	128	6.1 px	13.3 px	25°
9	511	256	4.1 px	10.0 px	25°
10	1,023	512	2.7 px	7.5 px	20°
11	2,047	1,024	1.8 px	5.6 px	20°
12	4,095	2,048	1.2 px	4.2 px	20°
13	8,191	4,096	0.8 px	3.2 px	15°
14	16,383	8,192	0.5 px	2.4 px	15°
15	32,767	16,384	0.4 px	1.8 px	15°

Frequently Asked Questions

When the branching angle θ approaches 0°, both child branches overlap the parent direction. The tree degenerates into a single line segment because sin(0) = 0, producing no lateral displacement. Use angles between 15° and 45° for visible branching structure.

Botanical studies suggest ratios near 0.67 to 0.75 approximate real deciduous trees. Leonardo da Vinci observed that the combined cross-sectional area of child branches approximately equals the parent. In this 2D projection, a ratio of r ≈ 0.7 with angles of 25° - 35° gives organic results.

At depth d = 15, the tree has 2¹⁶ − 1 = 65,535 line segments drawn per frame. At 60 fps with wind animation, this is approximately 3.9 million draw calls per second. Beyond this, most browsers drop below interactive frame rates on integrated GPUs.

When left angle θ_L ≠ right angle θ_R, the tree loses bilateral symmetry but retains local self-similarity within each subtree. This produces more organic, wind-blown appearances. Extreme asymmetry (e.g., 10° vs 50°) creates spiraling structures resembling fern fronds.

The current model uses a simple sinusoidal perturbation with phase offset per depth level. This approximates laminar swaying but not turbulence. True turbulent simulation would require Perlin noise or a Navier-Stokes approximation per branch, which exceeds real-time budget at high depths. The phase offset φ = k ⋅ 0.5 creates a convincing wave propagation from trunk to tips.

For a symmetric binary tree with branching ratio r, the fractal (Hausdorff) dimension is D = ln(2) ÷ ln(1 ÷ r). At r = 0.5, D = 1.0 (a line). At r = 0.7, D ≈ 1.94, nearly space-filling. At r ≥ 1.0 the tree expands infinitely and the fractal dimension is undefined.