Sculpt fractals by dragging affine parallelograms while the chaos game redraws them.
Each map of an iterated function system is drawn as the parallelogram it sends the reference square to, and the attractor is the one shape made of shrunken copies of itself under those maps. The chaos game finds it: pick a map at random, weighted by its determinant, apply it, plot the point, and repeat a few hundred thousand times a frame into a density buffer that is tone-mapped logarithmically as ink on paper. Every point also carries a color averaged with the color of the map that just fired, so each sub-copy is tinted by the history of maps that reached it, and while you drag, the buffer fades instead of clearing so the shape follows your hand. Presets include Barnsley's fern, the Heighway dragon, the Lévy C curve, the Sierpinski triangle and carpet, a Koch curve, a pentaflake and a golden spiral. The autopilot nudges handles and morphs between presets by blending their maps, which is safe because a blend of contractions is still a contraction.
Try it. Drag inside a parallelogram to move a map, drag its round side handles to rotate, stretch and skew one axis, and drag the square corner to rotate and scale the whole map. The toolbar switches presets, adds or removes maps and rolls a random system; keys 1-9 pick presets, Tab cycles the selected map, Q and E rotate it, [ and ] scale it, R randomizes and Space toggles the autopilot.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive iterated function system (IFS) fractal editor with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it a warm paper color.
- Represent each map as six numbers [a, b, c, d, e, f], meaning x' = a x + b y + e and y' = c x + d y + f. Start with Barnsley's fern: [0, 0, 0, 0.16, 0, 0], [0.85, 0.04, -0.04, 0.85, 0, 1.6], [0.2, -0.26, 0.23, 0.22, 0, 1.6] and [-0.15, 0.28, 0.26, 0.24, 0, 0.44].
- Draw the attractor with the chaos game: start at (0, 0), pick a map at random (weighted by |ad - bc|, with a small minimum so thin maps still fire), apply it, and repeat about 100,000 times a frame.
- Count hits per pixel in a Float32Array and shade each pixel by log(1 + hits) as dark ink on the paper, with putImageData.
Once that works, make it editable:
- Draw each map as the parallelogram it sends the square [-1, 1] x [-1, 1] to.
- Let me drag inside a parallelogram to move the map (change e and f), and drag a handle at the corner to rotate and scale it. Clear the buffer on every change so the fractal redraws live.
- Give each map a color, and give every point a color averaged with that of the map that just fired (color = (color + mapColor) / 2). Accumulate color sums next to the hit count so each sub-copy is tinted by the maps that built it.
- Add a few presets on number keys: the Sierpinski triangle, the Heighway dragon and the Levy C curve.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as separate handles for skewing each axis, morphing smoothly between presets, or exporting a high-resolution render.
