EXPERIMENT_026 // BLOOM.FIELD
A Canvas 2D generative garden of procedural blooms that grows on its own — no login, no product, nothing agentic. Enable your microphone and sound layers a growth pulse, hue shift, and sway on top of the ambient rhythm; decline, and the garden keeps breathing regardless.
LOADING EXPERIMENT...
Smashing Magazine has run a recurring "lovely little websites" showcase since at least 2021 (https://www.smashingmagazine.com/2021/11/showcase-lovely-little-websites/), collecting small, non-utility, exploratory web pieces built for their own sake rather than a business outcome. Bloom Field sits in that lineage: a scattered field of procedural flowers, each one a rosette of hand-drawn petal ellipses around a bright centre, breathing on a slow deterministic rhythm. There is no product behind it and nothing to buy. Sound is optional, not required — grant microphone access and the garden's growth, colour, and sway respond to what it hears; decline, and it keeps growing anyway.
HOW IT WORKS
A fixed seed generates 28 blooms once on mount — position, base radius, petal count (5-9), and base hue are set for the session and never reshuffle. Every frame, each bloom's growth and hue drift come from a deterministic sum of three sine waves at different periods, offset per-bloom by its own phase, so the whole garden never pulses in lockstep. No Math.random() runs inside the render loop — the same (phase, elapsed time) pair always produces the same frame, which is what keeps the idle animation calm and reproducible rather than visually noisy.
Enabling the microphone connects a Web Audio AnalyserNode (1024-point FFT) that extracts RMS loudness, a three-band frequency split (bass/mid/treble), and spectral centroid (pitch) every frame. Those features add a growth pulse, a hue rotation, and a petal-tip sway on top of the ambient baseline described above — they do not replace it. Turning the microphone on or off never produces a jump cut, because the ambient sine drift keeps running underneath the whole time. No audio data is ever sent anywhere: the AnalyserNode reads stay in the browser tab, and there is no fetch or XHR call anywhere in the render loop.
With prefers-reduced-motion enabled, the ambient clock runs at a quarter speed and both the audio-driven growth pulse and sway amplitude are scaled down rather than zeroed. The garden reads as calmer — slower blooms, gentler sway — but keeps moving. A dead static frame was ruled out deliberately: reduced motion is a request for less motion, not none.
WHAT THIS PROVES
Smashing Magazine's recurring "lovely little websites" feature (https://www.smashingmagazine.com/2021/11/showcase-lovely-little-websites/) makes the case that small, zero-purpose, exploratory web pieces are worth building and worth showcasing on their own terms, distinct from portfolio pieces or product demos. Bloom Field is Diana's own entry in that register: nothing here is trying to sell anything or prove an agentic capability. Its only job is to be a small, pleasant thing that responds to you if you let it, and exists regardless if you don't.
The architecture also demonstrates that an audio-reactive generative piece never needs to go blank without permission. Layering a deterministic ambient baseline underneath an optional live-audio layer — rather than gating the whole visual on a mic grant — means the opt-in permission model and the requirement that the experience never be empty are the same design decision, not two separate features bolted together.