A romanesco head of cones on cones on cones, with a dive into its endless florets.
The head is a cone covered in florets placed by phyllotaxis: each new floret turns by the divergence angle (the golden angle, 137.5 degrees) and sits a constant factor closer to the tip, so florets shrink with their distance from the apex and line up in logarithmic spirals. Every floret is the same cone again, tilted out along the surface normal. A level-of-detail recursion draws cones that are big on screen as a deeply shaded body plus their children, sorted far to near, and small ones as sprites that were ray cast at startup with two more levels of bump-mapped florets, crevice occlusion, wrap lighting and a waxy sheen. Mip-mapped sprite atlases (one per tilt and window-light angle) and a silhouette mask for accumulated occlusion keep thousands of florets at 60 fps, and because detail is only generated where it is visible, the camera can dive floret after floret and keep finding the same head.
Try it. Drag to orbit. Scroll, press Space or click a floret to dive into it; click empty space or press Escape to rise. Drag the sliders (or use the arrow keys) to change the number of floret levels and the divergence angle, and press G to snap back to the golden angle.
Phyllotaxis with a logarithmic spiral
Level-of-detail recursion with a hierarchical painter's algorithm
Ray-cast, bump-mapped sprite atlases with mip levels
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a romanesco cauliflower, the famous real-world fractal, with JavaScript and the HTML canvas 2D context (no WebGL). 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, scales by devicePixelRatio and resizes with the window. Use a dark, moody background like a food photo.
- Write a tiny 3D toolkit: vectors, a camera that orbits a target, and a perspective projection to screen.
- Model a cone by its base center, unit axis and height. Place florets on its surface with phyllotaxis: floret i turns by i times 137.5 degrees around the axis and sits at slant distance exp(-k i) from the apex, so florets shrink toward the tip. Each floret is a smaller cone whose axis points out along the surface normal, tilted a little toward the parent's axis.
- Recurse two or three levels. Collect the smallest cones, sort them far to near, and draw each as a filled triangle plus ellipse (the cone's silhouette), shaded by how much its axis faces a light.
Once that works, make it beautiful:
- Replace flat cones with a pre-rendered sprite: ray cast one cone per tilt angle into an offscreen canvas, with lighting per pixel, and draw it rotated and scaled with setTransform.
- Use level of detail: subdivide only cones that are large on screen, so you can zoom much deeper without drawing more.
- Darken florets that sit near their parent's base. Those crevices are what make it read as romanesco.
- Animate a slow orbit, drag to rotate, and add a slider for the divergence angle to show why only the golden angle packs well.
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 an infinite zoom that dives into a floret, bump-mapped sub-florets inside each sprite, or a fixed sunlight with soft cast shadows.
