This is the log for my flowers project, where I wanted to see how far I could push 3D parametric equations to make procedural flowers in the web browser, and rendering them in a variety of ways.
The flower across time
Exploring a temporal and rotational offset to see how the flowers visually behave
How it started
I wanted to understand flowers, so I set out to replicate them in a 3D WebGL environment, with colors and patterns that resemble nature using math and alogirthms.
First flowers, in GLSL
First I used GLSL shaders and parametric equations to generate the flowers in three.js, and added the color with GLSL shaders.
Flowers in flowers
I put flowers inside flowers, because sometimes that happens in nature: one tiny flower is a floret, and the collection reads as one bigger flower. Then I made flowers out of those collections of flowers, because recursion. It was very laggy.
I got wild with the stamens
I added stamens, then made them procedural, and then I got wild with them. Around here I also got an encouraging fortune, which felt relevant.
Wild shader experiments
Near the beginning I got wild with GLSL shader experiments, trying to replicate some natural patterns and some distinctly unnatural ones.
A plant from a random walk
I used a random walk to grow a "plant." A collection of random walks became a field of the same flower.
Small flowers within flowers
I made the stems green and started adding different flower species to the field. One new type showed up that looked like a butterfly bush.
Grids, to catch the bugs
I started generating flowers in grids, which made it much easier to spot and fix unintended behavior. Also it helped to refine how color worked across the whole system of flowers.
Freaky colors
I added some freaky dark colors. Like, really freaky colors.
Raytracing, in a browser tab
I moved generation onto web workers so it wouldn't take forever, learned how to build a convex hull to check for collisions in 3D space by raycasting and then I found out you can do ray tracing in a web browser. I also wanted to put the flowers in vases, so: a procedural vase generator.
GLSL -—> Color maps
Ray tracing was gorgeous, but the path tracer can't run my fragment shaders, so I had to rewrite all of them to use textures instead. No more GLSL.
Depth of field
Then I found out you can add depth of field. I built a Blender-style image renderer that can export 60,000px images.
Bin packing the bouquet
Convex hulls came back when I started bin packing the flowers into a bouquet. Checking for collisions in 3D space so the shape could be convincing. Depth of field plus a displaced bin pack wasn't as pretty as I wanted in a bouquet, so for v1 I decided to go simpler and use the bin pack itself as the output.
v1
I made a UI that dynamically responds to the color of the flowers, and a procedural progress bar to watch while it works.
v2: 2024 to now: personally knowing flowers
The flowers stopped being "a flower" and started becoming portraits. It turned into a continual sketching process: each render is a sketch of a real flower. These though are still part of creating a larger generative system, just the poster child for each flower is THE portrait.
Abstraction
Exploring ways to reduce geometry for the potential future of showing a field of flowers from afar.
In a field of small flowers, abstraction is important for performance.
Getting to know a daffodil
I got pretty close to duplicating its likeness!
Lilium martagon
The Turk's-cap lily: recurve, wine spots, cinnamon anthers. The spots have white areas around the outside, and the spots are a bit crinkly at the edges.
New flowers! New portraits! Imagined ones!
Eventually I'm planning on using the params I'm refining to make new flowers that don't exist yet.
More variation
