A new, simplified version of the 2–5–1 / Circle of Fifths tool is coming soon.
New version coming soon — click the graphic to read a short technical blog about how it works.
Under the hood: 2–5–1 Explorer tech notes
The original 2–5–1 Explorer combined three ideas:
a circle-of-fifths visual, a small chord engine, and Web Audio based playback.
The goal was to show how II–V–I functions across keys, not just in C.
The circle of fifths was implemented as a 12-step ring,
ordered by perfect fifths (C–G–D–A–E–B–F♯–D♭–A♭–E♭–B♭–F).
For a given key, the tonic (I) sits at some index,
the dominant (V) is one step clockwise,
and the supertonic (II) is two steps clockwise.
That mapping is what makes the II–V–I highlight work on top of the circle.
Each key was backed by a small lookup table of chord names and chord tones:
for example, in C major the app used
Dm7 (D F A C) for II,
G7 (G B D F) for V,
and Cmaj7 (C E G B) for I.
A simple progression engine then stitched together variations
like 2–5–1, 6–2–5–1, and 3–6–2–5–1.
For sound, the browser's AudioContext was used
to generate sine waves for each chord tone.
A basic envelope (fast attack, short release)
kept chords clear while avoiding clipping when four notes played at once.
Timing was derived from a tempo slider, converting BPM into seconds per beat
and scheduling each chord with setTimeout.
The upcoming version will keep the musical logic,
but focus on a cleaner interface: fewer controls, clearer typography,
and a single, SVG-based circle that works equally well on touch and desktop.
Audio will still be powered by Web Audio, but with a slightly softer synth voice
to make repeated II–V–I loops more pleasant for long practice sessions.