Procedural flowers open from bud to bloom, with ruffled, translucent, veined petals.
Each petal is a parametric surface: a midrib that rises at an opening angle and bends back along its length, a blade whose cross-section is an arc (wrapped around the axis in the bud, gently cupped when open), and a margin that ruffles. The ruffles are growth-driven buckling: the edge grows longer than the midrib, so the excess buckles out of plane as the flower expands. A small software renderer rasterizes thousands of triangles into a visibility buffer (depth, triangle and barycentrics), resolves a G-buffer once per visible pixel, splats stamens as sphere impostors, and renders a shadow map from the sun. Every pixel is then shaded once with wrap lighting, soft filtered shadows, a velvet sheen, radiating veins and translucency, so a petal lit from behind glows in its own pigment. Each species (petal count, whorls, outline, curl, palette, veins, spots and center) is drawn from a seed, and gets its own invented Latin name.
Try it. Tap (or press Space or Enter) for a new species: the flower closes and a new bud opens. Drag to orbit, hold the pointer down (or hold F) to fast-forward the bloom, and use the left and right arrow keys to turn it.
Parametric surfaces with growth-driven edge buckling
Software rasterizer with a z-buffer and deferred shading
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a 3D flower that opens from bud to full bloom, with JavaScript and the HTML canvas 2D context only (no WebGL, no libraries). Put everything in a single index.html file with no 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, over a soft green garden gradient.
- Write a tiny 3D toolkit: vectors, an orbiting perspective camera and a projection to screen.
- Model a petal as a parametric surface P(u, v): u from base to tip, v across the blade. Its midrib rises at an opening angle, the half width follows a smooth profile like sin(pi * u), and the blade is cupped across its width. Build a grid of quads for each of 6 petals arranged around the center.
- Sort all quads far to near (the painter's algorithm) and fill each one with a color shaded by how much its normal faces a light.
- Animate a bloom parameter from 0 to 1 that lowers the opening angle and grows the petals.
Once that works, make it beautiful:
- Replace the painter's algorithm with your own triangle rasterizer and a z-buffer writing into ImageData, so petals that interpenetrate still look right.
- Interpolate normals and (u, v) per pixel, and shade with a gradient from the throat to the tip, thin veins that radiate from the base, and a soft wrap-lit diffuse.
- Ruffle the petal edges with a sine wave whose amplitude grows with |v| and with the bloom.
- Add a stem, a few green sepals and a ring of stamens, and drag to orbit.
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 a shadow map for soft self-shadowing, petal translucency when the sun is behind it, or a random species generator.
