About

A binary spiral is a fractal structure formed by recursively splitting each node into two children while arranging them radially. At depth d, the tree contains 2^d nodes. Each node is placed in polar coordinates at angle θ = θ_base + i ⋅ 2π2^d and radius r = r₀ + d ⋅ Δr. Incorrect parameterization leads to overlapping nodes or visual collapse. This tool computes exact polar placements and renders the full tree in real time on an HTML Canvas.

The generator supports up to depth 10 (1024 leaf nodes). Adjusting the angular spread φ below 0.3 rad produces tight spirals. Values above 1.5 rad create open fan structures. Color is mapped per depth level using linear interpolation between two user-defined colors. Animation rotates the global angle offset at a configurable rate. This tool approximates continuous spirals using discrete binary branching. It does not produce Archimedean or logarithmic spirals natively.

Formulas

Each node in the binary spiral is positioned using polar-to-Cartesian conversion. For a node at depth d with sibling index i (ranging from 0 to 2^d − 1):

θ_i,d = θ₀ + i ⋅ 2π2^d + d ⋅ φ + ω_t

r_d = r₀ + d ⋅ Δr

Cartesian coordinates derived from polar:

x = r_d ⋅ cos(θ_i,d)

y = r_d ⋅ sin(θ_i,d)

Color interpolation between start color C₀ and end color C₁ at depth d with maximum depth D:

C(d) = C₀ + dD ⋅ (C₁ − C₀)

Where θ₀ = initial angle offset, φ = angular spread per depth level (controls spiral tightness), ω_t = animation rotation offset at time t, r₀ = initial radius from center, Δr = radius increment per depth level, D = maximum tree depth.

Reference Data

Depth d	Total Nodes	Leaf Nodes	Connections	Visual Character
1	3	2	2	Simple fork
2	7	4	6	Basic cross
3	15	8	14	Emerging spiral
4	31	16	30	Clear spiral arms
5	63	32	62	Dense spiral
6	127	64	126	Fractal detail visible
7	255	128	254	High density pattern
8	511	256	510	Complex fractal
9	1023	512	1022	Very dense fractal
10	2047	1024	2046	Maximum complexity
Angular Spread Reference
φ = 0.2 rad		Tight coil, nodes overlap at depth > 6
φ = 0.5 rad		Classic spiral, good separation
φ = 1.0 rad		Wide spiral arms
φ = 1.5 rad		Fan-like structure
φ = π rad		Symmetric binary tree (no spiral)
Radius Step Reference
Δr = 10 px		Compact, overlapping at high depth
Δr = 30 px		Balanced spacing
Δr = 50 px		Wide rings, needs large canvas
Node Count Formula
Total nodes		2^d+1 − 1
Leaf nodes		2^d
Internal nodes		2^d − 1

Frequently Asked Questions

At depth d, there are 2^d nodes sharing the same radius ring. The arc distance between adjacent nodes equals 2π ⋅ r_d2^d. When this value drops below twice the node radius, visual overlap occurs. Increase Δr (radius step) or decrease depth to resolve this.

Setting φ = π produces a symmetric binary tree with no spiral character. As φ decreases toward 0, each depth ring rotates relative to its parent, creating the spiral winding effect. Values between 0.3 and 0.8 rad produce the most visually distinct spirals.

Total nodes follow 2^d+1 − 1 and connections equal nodes minus 1. At depth 10, this means 2047 nodes and 2046 line segments. The canvas handles this without performance issues on modern hardware.

Yes. The SVG export reconstructs all nodes and connections as vector elements with exact coordinates. It scales to any resolution without pixelation. PNG export is rasterized at the current canvas dimensions. For print use at 300 DPI, prefer SVG.

Each RGB channel is linearly interpolated between the start color C₀ and end color C₁. At depth d with max depth D, the interpolation factor is dD. This creates a smooth gradient from root to leaves. Setting both colors identically produces uniform coloring.

Yes. The tool checks the prefers-reduced-motion: reduce media query. When active, animation is disabled by default and the animate toggle is turned off. Users can still manually enable animation if desired.