The logistic map's bifurcations, Mandelbrot bulbs and a cobweb, linked in one picture.
For every column of the bifurcation diagram a value of r is iterated past its transient and the points it then visits are binned into a density buffer, jittered samples accumulating progressively, each colored by the period of its attractor. Substituting z = r(1/2 - x) turns x' = rx(1 - x) into z' = z^2 + c with c = r/2 - r^2/4, so the strip below is the Mandelbrot set along its real axis, warped to line up with r and scaled by |dc/dr| so its bulbs keep their shapes, with each bulb painted in the color of its period: every period doubling sits exactly over a cusp. The superstable parameters R_n are found by Newton's method and the ratios of their gaps converge to Feigenbaum's delta, 4.6692, while the forks shrink by alpha, -2.5029. The Feigenbaum dive zooms around r_infinity by exactly delta in r and |alpha| in x per level, and each column restarts from where its last sample ended, so even near r_infinity, where transients are long, the self-similar copies arrive flipped at the same size.
Try it. Hover or drag across the diagram to choose r and watch the cobweb, the rhythm of x_n, the Lyapunov strip and the point c on the Mandelbrot axis follow. Click to lock r, scroll or double-click to zoom (Shift double-click zooms out), and use the arrow keys to step r or zoom. F starts the Feigenbaum dive, R resets the view.
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 logistic map explorer 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.
The logistic map is x = r * x * (1 - x). As r grows from 2.8 to 4 its long-run behavior doubles its period again and again, then turns chaotic.
Start simple:
- Make a canvas that fills the window and stays sharp on high-DPI screens. Use the left two thirds for a bifurcation diagram with r from 2.8 to 4 across and x from 0 to 1 up.
- For each column of pixels, pick its r, start at x = 0.5, iterate 300 times to forget the start, then iterate 300 more and count how many times each pixel row gets hit. Store the counts in a Float32Array and draw them with ImageData, brightness rising with the count.
- On the right, draw a cobweb plot for the r under the mouse: the parabola y = r x (1 - x), the diagonal y = x, and the path that steps vertically to the curve and horizontally to the diagonal, about 100 times. Draw a vertical line on the diagram at that r.
Once that works, make it beautiful:
- Keep adding samples with a slightly random r inside each column, a few hundred columns per frame, so the diagram sharpens progressively instead of freezing the page.
- Detect the period at each r (iterate until the orbit returns within 1e-6 of where it was) and color the branches by period, with chaos in a warm gold.
- Below the diagram, draw a small strip of the Mandelbrot set along its real axis, using c = r/2 - r*r/4 for each column so its bulbs line up with the period doublings above.
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 zooming with the mouse wheel, measuring Feigenbaum's constant 4.669 from the doubling points, or plotting the Lyapunov exponent as a strip under the diagram.
