Inspired by a tool that "visualizes sound as a 3D data structure": twelve note pads arranged by fifths, with glowing columns that rise with volume. Drag to orbit. Tap a pad to hear it.
Drag = orbit · wheel/pinch = zoom · tap pad = play note
A perfect fifth is a 3:2 frequency ratio — the simplest interval after the octave, so it sounds maximally consonant. It spans 7 semitones. Because 7 and 12 share no factors, stacking fifths (C→G→D→A…) visits all 12 pitch classes before returning to C. That closed loop is the ring you're orbiting.
Move clockwise one step and the new key gains one sharp: G major has 1 (F♯), D has 2, A has 3… Move counter-clockwise and you add flats: F has 1 (B♭), B♭ has 2. Neighbouring keys share 6 of 7 notes, which is why modulating to a neighbour sounds smooth.
In any major key three chords do most of the work:
The I–IV–V–I button traces exactly this trip around the ring.
The original tweet's idea: map musical properties to spatial axes. Here, angle encodes harmonic distance (position on the circle of fifths), and column height encodes loudness — like the Web Audio pipeline: oscillator → gain → output, where gain drives both what you hear and what you see. Nearby pads = harmonically related sounds.
Start at C ≈ 261.63 Hz (middle C). Multiply by 3/2 and you get ≈ 392.4 Hz — almost exactly G. Do it twelve times and you land ≈ 1.36% sharp of where you started: the famous Pythagorean comma. Equal temperament fixes this by shrinking each fifth to 2^(7/12) ≈ 1.4983 instead of 1.5, so the circle closes perfectly — that's the tuning this demo (and your piano) uses.
| Key | ♯/♭ | Key | ♯/♭ |
|---|---|---|---|
| C | 0 | F | 1♭ |
| G | 1♯ | B♭ | 2♭ |
| D | 2♯ | E♭ | 3♭ |
| A | 3♯ | A♭ | 4♭ |
| E | 4♯ | D♭ | 5♭ |
| B | 5♯ | F♯/G♭ | 6♯/6♭ |
Order of sharps: F C G D A E B — itself a chain of fifths.
Each clockwise step on this ring adds seven semitones and wraps modulo twelve. Starting at C, pitch class zero, the path is zero, seven, two, nine, four, eleven, six, one, eight, three, ten, five, then zero. Seven and twelve are relatively prime, so none repeats before all twelve have been visited. The ring places each next step thirty degrees away. The oscillator frequency is two hundred sixty one point six three times two raised to semitones divided by twelve. A seven semitone step multiplies frequency by roughly one point four nine eight three, giving G near three hundred ninety two hertz. This differs slightly from a pure three to two ratio. Twelve equal tempered fifths span eighty four semitones, exactly seven octaves, so the pitch class circle closes. The original volume slider connects loudness to column height. Major key selection highlights its seven notes. The one four five one sequence moves from tonic to the counterclockwise neighbor, then the clockwise neighbor, then home. In C that is C, F, G, C. These spatial relationships are a teaching aid; the browser’s Web Audio oscillator synthesizes the sound rather than playing a recording.