Circle of Fifths — in 3D

Why fifths?

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.

Key signatures

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.

Chord function

In any major key three chords do most of the work:

• I — Tonic: home, rest, resolution.
• IV — Subdominant: motion away from home (one step counter-clockwise on the ring).
• V — Dominant: tension that pulls back to I (one step clockwise).

The I–IV–V–I button traces exactly this trip around the ring.

Sound as a 3D data structure

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.

The math of a fifth

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 signature cheat sheet

Order of sharps: F C G D A E B — itself a chain of fifths.

Try this

• Select C major, press Play scale, and watch the highlights: the scale's 7 notes cluster on one contiguous arc of the ring (F → B). Every major key is such an arc — that's the circle's superpower.
• Switch key to G major: the arc rotates one step clockwise. Only one pad changes (F → F♯).
• Compare sine vs sawtooth: the saw adds harmonics at 2×, 3×, 4×… the fundamental, which is why it sounds brighter at the same volume.
• Turn the volume down and replay — the columns shrink with the gain, the visual/audio mapping from the tweet.