Where this comes from
Twelve puts old ideas on one instrument you can play. Here is who had them, where the sound comes from, and what was made for the page.
The Half-Turn
Multiplying every note by 7 (counting in half-steps, round the twelve) turns the notes in half-step order into the circle of fifths. Ernst Krenek described the technique in lectures in 1936; Herbert Eimert called it the Quintverwandlung; in Bartók’s String Quartet No. 3 a cluster of half-steps (C♯ D D♯ E) opens out into fifths (C♯ G♯ D♯ A♯). Multiplication (music), Wikipedia
Ethan Hein pointed out in 2018 that C, D, E, G♭, A♭ and B♭ sit in the same places on both circles while the other six trade places across them. That is the move this site animates. Chord pizzas, Ethan Hein
Circle of Modes by travisdoesmath switches a ring of modes between fifths and chromatic order and sorts the modes by brightness. We did not find a version where the ring turns while a scale keeps playing, but a search is not proof, so this page makes no claim to be first.
Colour by fifths
Each note’s colour follows its place on the circle of fifths, 30 degrees of hue per step, with C red. Stephen Malinowski’s Harmonic Coloring for his Music Animation Machine assigns the artist’s colour wheel to the circle of fifths in the same spirit. Harmonic Coloring, Music Animation Machine
Alexander Scriabin gave the notes colours for his clavier à lumières, the keyboard of lights in Prometheus: Poem of Fire, built for its 1915 performance in New York. Clavier à lumières, Wikipedia
The sound
Piano: Salamander Grand Piano V3 by Alexander Holm (a Yamaha C5), licensed CC BY 3.0. Seventeen notes from F♯2 to F♯6 at one loudness were trimmed to five seconds and re-encoded for the web.
Every frequency on the page is computed, with A4 at 440 Hz in equal temperament. The recorded piano was tuned the way pianos usually are, slightly stretched: before correction its notes measured from about 7 cents flat in the bass to about 14 cents sharp at the top. Each sample is shifted at playback so its fundamental matches the number on screen.
The first tap plays a small synthesized note while the piano loads. The room sound is generated in the browser.
What was made for the page
The paper (by day and at night) and the tuning fork are images generated with AI (Higgsfield, GPT Image 2.5). Everything that teaches is computed in your browser: the keys, the ring, the shapes, the names and the numbers.
Type: Mona Sans (GitHub) and Fragment Mono (Wei Huang), both under the SIL Open Font License. The sharp, flat and natural signs are three glyphs taken from Bravura Text (Steinberg, SIL Open Font License) and renamed, as that licence asks of changed copies. Licence texts: Mona Sans, Fragment Mono, Bravura.
Privacy
No accounts and no tracking. The microphone is only asked for when you tap “Sing a note”, and what it hears stays on your device. Your browser remembers three small choices (keys or guitar, sound on or off, lamps or paper) so the site opens the way you left it.