Draw Heighway Fractal
Draw the Heighway dragon (paper-folding fractal) with fire gradient and symmetry modes. L-system based. Free, offline, client-side, instant, secure.
The "paper-folding" fractal discovered by John Heighway, Bruce Banks, and William Harter at NASA in 1966 (popularised by Martin Gardner in 1967). L-system: axiom FX, rules X → X+YF+, Y → -FX-Y, 90° turns.
Paper folds (1-16). Iter N produces 2^N segments. Iter 15+ takes ~1 s.
How to Use Draw Heighway Fractal
- Pick iterations (1-16). Iter 1 = 2 segments (single L-shape). Iter N = 2^N draw segments. Iter 10 (default, classic look) = 1,024 segments. Iter 16 = 65,536. The "Drawing…" state activates at iter ≥ 14.
- Set segment length (2-20 px). The curve auto-scales to fit the canvas with 40 px padding regardless, but the segment length affects the aspect of unscaled bounds - small values produce taller-narrower bounds.
- Set canvas size (300-1200 px square). HiDPI-aware: backing store is canvas size × devicePixelRatio for crisp Retina rendering.
- Choose colors. Default red on white. Low-contrast pairs trigger an info-toast warning.
- Optional render modes: Show symmetry alternates red/blue per segment (visualises the L-system's recursive left/right structure). Fire gradient lerps red → amber along the traversal (shows direction). If both enabled, gradient wins.
- Press Ctrl+Enter or click Draw Dragon. Stats show: segment count, paper-folds equivalent, total path length, L-system char count, fractal dimension (2.0), render time.
- Copy or Download. Copy puts PNG bytes on clipboard via ClipboardItem (paste straight into image editors). Download saves
heighway-dragon-iter-N.png.
Frequently Asked Questions
What is the Heighway dragon?
A self-avoiding fractal discovered by NASA physicists John Heighway, Bruce Banks, and William Harter in 1966, while folding paper for amusement. Take a strip of paper, fold it in half. Fold again. Continue folding (in the SAME direction each time). Unfold so each crease is exactly 90°. The resulting zigzag shape – the curve traced by the folded strip – is the dragon curve. Martin Gardner popularised it in his 1967 Scientific American “Mathematical Games” column.
Why is its dimension exactly 2?
Self-similarity formula: dim = log(N)/log(S) where N copies are placed at scale 1/S. Dragon: each iter creates 2 copies, each at scale 1/√2 (the diagonal of a unit square). So dim = log(2)/log(√2) = log(2)/(½ log(2)) = 2. Dimension 2 means the infinite-iteration curve IS space-filling – it covers the “dragon island” region with positive Lebesgue measure (a Koch-snowflake-like jagged-boundary region).
Why is the dragon self-avoiding?
Paper physically can’t fold through itself. Mathematically: every dragon-curve segment occupies a unique unit edge on the integer grid. This is provable from the L-system structure. The implication: dragon curves can tile the plane – many copies fit together without overlap (the “twin dragon” tiling). Useful in VLSI layout problems.
What does symmetry mode show?
Red/blue alternation per segment. The Heighway dragon’s recursive construction has perfect left/right symmetry – every fold-rule is mirrored. Symmetry mode highlights this: every even-indexed segment is red, every odd-indexed is blue. You’ll see balanced patterns where each red sub-region is matched by a blue mirror. At iter 10-12 the symmetry pattern produces beautiful interference-like designs.
What does fire gradient mode show?
Lerps from red (#dc2626) at the start (paper’s first crease) to amber (#fbbf24) at the end (paper’s last crease). Reveals the traversal direction – useful for understanding HOW the dragon is drawn. The colour transition follows the path’s progression, NOT spatial layout. So adjacent segments in 2D may have very different colours if they were drawn far apart in the L-system sequence.
Why is iteration capped at 16?
Iter 16 = 65,536 segments. Iter 17 would be 131,072 (and 2× the render time). The L-system string itself doubles each iter – at iter 16 it’s ~300k characters; at iter 18 ~1.2M. Beyond iter 16, segment lengths fall below 1 px and the dragon visually merges into solid filled regions (its space-filling limit). No new visual information from going higher.
How does the L-system actually generate the dragon?
X and Y are non-drawing “state” symbols representing recursion at each step. Starting from FX: apply rules X → X+YF+ and Y → -FX-Y. Iter 1: FX+YF+. Iter 2: FX+YF++-FX-YF+. The +/- before X/Y in the rules create the perfect-90°-fold pattern. Only F characters actually draw (move forward); X and Y exist purely to control the recursion structure.
Is my data secure?
Yes, 100% client-side. L-system expansion and Canvas drawing run in your browser. No parameters or images leave your device. Verify via your browser’s Network tab.