Groove

What it is

A vinyl record on a turntable, drawn on a plain 2D HTML canvas with no WebGL, whose spiral groove is cut from the music it plays. Three short loops — Lamplight, a fingerpicked waltz of Karplus–Strong plucks; Tidewater, slow additive-sine organ chords with a melody on top; Clockwork, a music-box figure of inharmonic bells — are synthesised in the browser into an 18-second mono sample buffer at 22,050 Hz, from a seeded generator, so every visit cuts the same record. That buffer is looped twelve times across 120 turns of groove, a 3:36 side, and the groove’s sideways wiggle at every point is the sample value under the stylus there. The whole record is drawn once to an offscreen canvas at device resolution (capped at 2,048 pixels square), every turn of it, in half-degree segments whose brightness follows the loudness of the samples they span, so louder bars read as lighter bands on the vinyl; a lead-in of one and a quarter turns, a two-turn run-out and a locked groove sit at either end.

A loupe rides the stylus and redraws the groove under it live, magnified so that one groove pitch spans 38 pixels at the default dial — about 32 times on a wide desktop stage and about 50 times on a phone — with a dial that takes it from roughly a third of that to three times. Inside it, sustained chords are fat wiggles, a rest is a straight line and the run-out is a smooth spiral. The wiggle is exaggerated — drawn at 0.4 of the groove pitch for a full-scale sample, which the caption under the loupe states — because a real groove modulation would be invisible at screen scale. Frame 0 is the needle already down 66.5 seconds into the side, a spot where every one of the three tracks has notes ringing.

Tap Sound and the needle plays the very samples the groove was cut from: one looping AudioBufferSourceNode whose playback rate is set every frame from the platter’s angular velocity divided by the 33⅓ rpm rate, with a reversed copy of the buffer taking over the moment the platter turns backwards and a small servo keeping the audio position under the stylus. Drag the record and you scratch it — pitch, tempo and direction follow your hand, a held record goes quiet, and on release a first-order flywheel with a 0.45-second time constant pulls the platter back to speed. Stop lets it coast down on a slower 1.3-second constant; 33⅓, 45 and 78 change the motor speed, and because the record was cut at 33⅓ the music plays 1.35 or 2.34 times as fast. Tap the tonearm to lift or drop the needle, Cue eases it back to the lead-in, and the readout names the live rpm, the direction, the track and the position on the side.

The vinyl is black in every theme; the platter, the tonearm and the label — the site’s accent colour, printed with a made-up Groove House imprint and catalogue numbers MT-001 to MT-003 — take their colours from the page’s theme tokens, and a static specular sheen lies across the grooves. The AudioContext is created only on the first Sound tap and closed when you leave the page. With reduce-motion on, the motor is held and the platter stands still until your hand turns it, while the loupe still shows the groove. The synthesis, the spiral geometry, the stylus solve and the flywheel live in a pure TypeScript module with unit tests; the component owns the pixels, the pointer events and the audio.

How to use it

• Drag the record to scratch it — the needle plays at the speed and direction of your hand.
• Tap Sound to hear the groove. Tap the tonearm to lift or drop the needle.
• Switch tracks — Lamplight, Tidewater, Clockwork — and a new groove is cut.
• Pick 33⅓, 45 or 78 rpm; Stop lets the platter coast; Cue sets the needle in the lead-in.
• Slide Loupe to zoom the magnifier from a third to three times its default.

More experiments

• Antikythera — Canvas, Mechanism, Gears
• Rolling Shutter — Canvas, Photography, Optics
• Foam — Canvas, Computational Geometry, Physics

See every experiment