No figure on this site is a drawing that was made once and saved. Each one is a function:
it takes parameters and returns SVG, so the same generator produces the 27° incline and
the 5° incline without either being redrawn.
That is the reason the collection can keep growing without the illustrations drifting apart.
A generator is written once, checked once, and every essay that calls it inherits the same
line weights, the same colour roles, and the same behaviour in dark mode. There are
27 of them so far.
beats
cents-rulerThe simple ratios, and the twelve equal steps One octave laid out in cents. Above the line, the frequency ratios of small whole numbers, where they actually fall; below it, the twelve equal steps. The two sets almost never coincide. 6/5 minor third 5/4 major third 4/3 fourth 3/2 fifth 8/5 minor sixth 5/3 major sixth C C♯ D E♭ E F F♯ G A♭ A B♭ B C +16 -14 -2 +2 +14 -16 the ratios of small whole numbers twelve equal steps of exactly 100 cents 1200 cents to the octave
chord-shapeFour triads as stacked intervals Each triad drawn as the semitone distances above its root, with the nearest simple frequency ratio beside each note. The chords differ only in the size of the two stacked thirds, and that difference is the whole of their character. C 1/1 E 5/4 G 3/2 4 3 major 0–4–7 C 1/1 E♭ 6/5 G 3/2 3 4 minor 0–3–7 C 1/1 E♭ 6/5 F♯ 3 3 diminished 0–3–6 C 1/1 E 5/4 A♭ 8/5 4 4 augmented 0–4–8 semitones above the root
circle-of-fifthsThe circle of fifths The twelve pitch classes arranged so that each is a fifth above the last. Keys next to each other differ by one sharp or flat, which is why the notes of a key form a contiguous arc rather than a scattering. C a G e D b A f♯ E c♯ B a♭ F♯ e♭ C♯ b♭ A♭ f E♭ c B♭ g F d one step = one fifth = one sharp outer ring: major keys · inner ring: their relative minors
comma-drift
comma-spiral
dissonance-curve
envelope
euclid-familySix rhythms, all from the same construction Euclidean rhythms generated by Bjorklund's algorithm, which spreads a number of onsets as evenly as a number of steps allows. The patterns were not transcribed from recordings; they are what the algorithm produces, and the names beside them are where each one is already in use. E(2,4) the simplest division E(3,8) tresillo — Cuba, and half the world's pop music E(5,8) cinquillo E(4,9) Turkish aksak E(5,12) West African bell pattern E(7,16) Brazilian necklace one cell per step · filled cells are struck
fifths-chainThe chain of fifths in quarter-comma meantone The fifths laid end to end as the chain they are. The bar under each shows how far that fifth departs from a pure three-to-two, and the last one — where the chain is forced to close — is the wolf. E♭ B♭ F C G D A E B F♯ C♯ G♯ D♯ -5.4 -5.4 -5.4 -5.4 -5.4 -5.4 -5.4 -5.4 -5.4 -5.4 -5.4 +35.7 each fifth's departure from a pure 3:2, in cents one fifth carries the whole error
harmonic-latticeThe Tonnetz Pitch classes placed so that a step east is a fifth and a step north-east is a major third. Every major and minor triad is a triangle, and neighbouring triangles share two notes — which is why the shortest chord changes are the ones that look adjacent. C G D A E B F♯ E B F♯ C♯ A♭ E♭ B♭ A♭ E♭ B♭ F C G D C G D A E B F♯ east — a fifth · south — a major third · south-west — a minor third triads are triangles; a shared edge is two shared notes
harmonic-series
interval-ratio
key-overlapNeighbouring keys differ by one note The seven notes of several major keys, laid out against the chromatic scale. Keys a fifth apart share six of their seven notes, and the one that differs is the note that changes the key signature. C C♯ D E♭ E F F♯ G A♭ A B♭ B E♭ major B♭ major F major C major G major D major A major one note enters and one leaves for each step round the circle
keyboardNotes on the keyboard A piano keyboard with the notes under discussion marked. The keyboard is used throughout this site because it shows distance rather than name, and distance is what the theory is about. C E G 3 notes sounding
metre-treeThree metres as trees Each metre drawn as the bar dividing into beats and the beats dividing again. Simple and compound metres have the same number of beats and differ in the second division; an additive metre has beats of unequal length, which no single division produces. 4/4 ♩ ♩ ♩ ♩ 2 + 2 + 2 + 2 simple 6/8 ♩. ♩. 3 + 3 compound 5/8 ♩. ♩ 3 + 2 unequal beats — additive
mode-compareThe seven modes, brightest first The same seven pitch classes started on each of its degrees in turn, ordered by how many of their notes are raised. Each row differs from the one below it by exactly one note, and that note moves down one semitone each time. C C♯ D E♭ E F F♯ G A♭ A B♭ B C Lydian Ionian Mixolydian Dorian Aeolian Phrygian Locrian brightest at the top, darkest at the bottom each row drops exactly one note by a semitone from the row above
polyrhythm3 against 2 Two evenly spaced pulses over the same span, one in 3 and one in 2. They agree only where both grids land together, and the gap between agreements is the least common multiple — which is what makes one polyrhythm sound like a shape and another like two unrelated things. 3 2 they coincide every 6 subdivisions common grid: 6 equal steps
progression-pathThe seven chords of a key, by distance from home Each triad of the major scale placed at a radius equal to how far its voices must move from the tonic chord. The chords that feel closest to home are the ones that are closest, in the plain arithmetic sense. I C ii D iii E IV F V G vi A vii° B I – vi – IV – V radius = semitones of voice motion from the tonic chord
rhythm-cycle
room-modes
scale-necklaceThe major scale as a cycle The twelve semitones drawn as a cycle, with the notes of the scale filled in. The gaps between filled positions are the step pattern, and reading them round the circle is what makes the scale's asymmetry obvious. C C♯ D E♭ E F F♯ G A♭ A B♭ B 2 · 2 · 1 · 2 · 2 · 2 · 1 steps, in semitones the short chords are the semitones — two of them, unevenly spaced
spectrumFour spectra of the same note The amplitude of each partial for four timbres at the same pitch. These are the exact lists the sound buttons on this site synthesise from, so the picture and the sound are the same data. 1 pure one partial, nothing else 1 2 3 4 5 6 7 8 string all partials, falling 1 2 3 4 5 6 7 8 clarinet even partials nearly absent 1 2 3 4 5 6 7 8 9 bell odd partials only amplitude
stave
tuning-comparison
voice-leadingHow far the voices have to move Three chord changes with their voices joined by the assignment that moves the least in total. The distance is computed over every way of pairing the notes, so a change that shares two of its three notes shows as two flat lines. 2 C major A minor total 2 semitones 1 2 C major F major total 3 semitones 2 3 1 C major F♯ major total 6 semitones the shortest change is the one nobody has to sing far