Chorus: tap a tune on a pond, and the frogs finish it
The story behind Chorus
Premise Autocomplete, but frogs: you start a melody and something else finishes it, in your style. A pond at dusk with seven frogs, each a note of a pentatonic scale. Audience: web-literate visitors arriving from X or the archive. Perf target: well under a millisecond a frame, with the machine staying quiet
Reference Charley Harper’s flat geometric animals, Hasui Kawase’s banded night skies and water, picture-book frogs
Built with Canvas2D and the Web Audio API, no libraries
Techniques A small music model that echoes your phrase, then continues it by sequence, retrograde and inversion and closes on a cadence; a WebAudio synth (an FM pluck with a pitch drop, a throaty “ribbit” layer, water plops, generated reverb, ambience); an AudioContext pre-warmed in idle time so the first tap doesn’t stall; a woodblock background baked once per resize; a pixel budget, a 30 fps idle and a pause when hidden
Direction A dusk pond printed like a woodblock: indigo to orange sky bands, deep teal water, flat green frogs with cream bellies and amber throat sacs. Fraunces italic and Work Sans
The Story
Most of the machines that finish our sentences are invisible. This one sits on lily pads. There are seven frogs on a pond at dusk, and each one is a note, low on the left and in front, high at the back. Tap three or four of them, or tap the water and the nearest frog sings, then stop.
After a moment the frogs answer. First they sing your phrase back to you, in your rhythm. Then they keep going: they take your opening few notes, move them up or down a step, turn them around or upside down, and walk the tune home to C, with a second frog singing a third above. Play another tune and they answer again, a bit differently, and more frogs join in. By the fourth answer the whole pond sings the last chord.
The thing it’s after is the feeling of “I played three notes and the frogs finished my song.”
The Take
- Tap a frog to hear its note, or tap the water and the nearest frog sings. Drag across the water for a glissando that slides between the frogs you pass.
- Then wait. After a short pause the frogs echo you, then carry it on. A dotted line follows the tune from frog to frog: cream for your part, amber for theirs.
- Play another. Each answer is built differently (a sequence, then a retrograde, then a higher sequence with a bass croak from the big frog at the front), and the final chord grows until all seven frogs sing it, with a glow on the water under them.
- Interrupt them. Tap while they’re singing and they stop and turn to look at you.
The Tech
The music. Your last dozen notes are the phrase. The frogs echo it with your timing, clamped to a steady beat, then continue from your first motif of up to four notes: moved a step (round one), played backwards (round two), moved higher (round three), each with its own rhythm and a little swing. Then an inversion, the motif’s intervals flipped, and a cadence that steps down or up to C and holds. Every note of the continuation stays within a sixth of the one before, and the motif keeps its own direction, so “Twinkle Twinkle” still rises when the frogs take it over. The second frog sings a third above on alternate notes. All of it is checked with a small test harness: across a set of test phrases and four rounds, no big leaps, every answer ends on C, and the first three rounds never repeat each other.
The sound. Every note is synthesised in the browser. A sine voice with frequency modulation gives a soft marimba pluck, and its pitch drops in the first 50 ms like a croak. Under it, a sawtooth an octave down goes through a band-pass filter with a slow wobble for the “ribbit”. Each tap on the water adds a plop, a short falling sine. A reverb impulse is generated in code, darker toward its tail, and after the first tap a quiet bed of insects, lapping water and the odd cricket comes in.
The first tap. Creating an AudioContext on a Mac can block the page for a couple of hundred milliseconds while the audio device opens, and here that landed right on the first tap, the one that matters most. Now the context and its buffers are built during idle time just after the page loads, in small slices that never block a frame. The first tap only has to resume the context and play its note.
The woodblock. The sky and the water are drawn as flat bands of colour with slightly wavy edges, the way a woodblock print lays down its gradients, and baked into a background canvas once per resize together with the treeline, its broken reflection, the moon and the stars. Each frame then draws only what moves: shimmer, ripples, the pads bobbing on springs, the frogs (sacs that swell fast and empty slowly, eyes that turn toward whoever is singing, a sleepy one who wakes up for his note), their reflections, fireflies and the reeds. A paper-grain texture is multiplied over the top, and the frogs’ fills sit slightly off their ink outlines, as in a print.
Quiet by default. The whole frame takes a fraction of a millisecond. The canvas has a pixel budget, it drops to 30 fps when nothing is happening, and both the drawing and the sound stop when the tab is hidden.
The frogs don’t know any music theory beyond what they were given. They’re very keen anyway.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.