Granular synthesis made visible: every grain is a glowing droplet shaped by its window.
An eight second source is synthesized from scratch (a sawtooth chord through morphing vowel formants, inharmonic bells, Karplus-Strong strings, resonant wind and an FM drone) and drawn as a waveform ribbon colored by zero-crossing rate, amber where it is tonal and cyan where it is noisy. A scheduler fires grains at the chosen density with a little jitter; each reads a short stretch near the play position plus a random spread, at its own playback rate, under a Hann window. Every grain floats above its source as a droplet: its outline is its window, its width is the stretch of ribbon it reads, its height is its pitch, and a bead rides the window as it plays, while the stretch it reads lights up on the ribbon. With sound on, each grain is a Web Audio buffer source with a Hann gain curve on the same clock the picture follows.
Try it. Click for sound. Drag along the ribbon to scrub, or drag in the cloud to set position and pitch together. Drag the value chips sideways (or tap them) to change density, grain size, spread, pitch, pitch jitter and speed. Freeze (F) holds time for drones, Shimmer (S) adds octaves and fifths, arrow keys change spread and size, R resets pitch and jitter, and A toggles the autopilot.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a granular synthesizer with a visual grain cloud, using JavaScript, the HTML canvas element and the Web Audio API. 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:
- Synthesize a source sound in code so there is nothing to load: about four seconds of a few bell tones (sums of sines at inharmonic ratios with exponential decays) followed by a swell of filtered noise. Store it in a Float32Array and copy it into an AudioBuffer.
- Draw the source as a waveform ribbon along the bottom of a full-window canvas: for each pixel column take the minimum and maximum of its samples and draw a vertical line.
- On the first click, create the AudioContext. Run a scheduler every frame that keeps grains booked about 100 ms ahead on the audio clock, at a chosen density (say 30 grains per second). Each grain is an AudioBufferSourceNode that starts at the play position plus a random spread, plays 50 to 200 ms, and goes through a GainNode whose gain follows a Hann window (setValueCurveAtTime), so grains fade in and out without clicks.
- Let the play position creep forward slowly, and let dragging across the ribbon scrub it.
Once that works, make it beautiful:
- Draw every grain as a glowing droplet above the stretch of ribbon it reads: its outline is its window curve, its brightness follows the envelope, and a bead runs along it as it plays.
- Put pitch on the vertical axis: give each grain a playback rate, and add a shimmer option that randomly picks octaves and fifths.
- Add controls for density, grain size, spread and pitch, plus a freeze toggle that stops the play position for drones.
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 magnified view of the region being read, a reverb send, or a richer synthesized source.
