A bounded sound instrument where every chord is heard, drawn — and sometimes becomes the rhythm.
This is the reference behind the instrument. NŌTO·02 lives exactly between two crowds — the musician and the mathematician — so this page is written to be read both ways at once: the intuition you can hear, and the procedure you can compute. They are the same fact, twice.
♪ By ear — what a player feels∑ By number — what the code does
System model
One number, read three ways
NŌTO·02 treats a MIDI controller as a playable surface for a single, coherent sound object. A key press enters as a MIDI note number and a velocity. That one number is then read three ways at once — as a frequency to sound, as a pitch-class shape and colour to draw, and as a term in a frequency ratio that builds the harmonic figure.
MIDI / keynumber + velocity
note statewho is held
voice stackoscillators
audio graphtone · space
figure + ringratio · rhythm
screen + airseen + heard
ConstraintOne self-contained index.html — vanilla JavaScript, SVG, Web Audio, Web MIDI. No framework, no build-time magic, no black box.Visual ruleFlat Byrne/Euclid primitives in red·gold·cobalt over 0.5 px construction hairlines, on warm paper or ink. No gradients, shadows, or glow.Musical ruleA few strong, tactile controls instead of a menu maze — but each one changes the actual musical state, now.
Wave to figure · interactive
Read x(t), read y(t), then plot the point
The harmonic figure is a Lissajous curve, and it is easiest to read as wave against wave rather than wave added to wave. One oscillator drives the horizontal position; another drives the vertical. The figure is simply the path traced as those two values meet over time.
Scrub the trace below — or press Run. The highlighted part of each wave is the time already travelled. At the same instant their current values become coordinates: red is the horizontal reading, gold the vertical, and the cobalt point is where they cross.
Trace t0.18
x = 0.00+y = 0.00→point (0.00, 0.00)
1 · horizontal wave
2 · vertical wave
3 · same time, crossed
1 · pick one time value t
2 · read x(t) from the red wave and y(t) from the gold wave
3 · plot the coordinate (x(t), y(t)) in the phase plane
This is the baby version: two sine waves, one point. The full chord figure uses the same idea, then sums several waves on each axis.
Harmonic figure · interactive
Chords become Lissajous knots
For a held set of notes, NŌTO finds a small whole-number frequency ratio against the lowest note, by a continued-fraction approximation with a capped denominator. A fifth resolves to 2:3; a just major triad to 4:5:6. Those integers drive the X and Y axes of the curve and print as its caption.
x(t)=Σ sin(rᵢt+φ), y(t)=Σ sin(rⱼt)
♪By ear
Consonance looks calm. A clean interval settles into a still, closed knot; a restless one writhes and never quite closes — you see the beating before you name it.
∑By number
Small denominators close the curve in few cycles; large or irrational ratios need many, so the path stays open. The equal-tempered tritone (≈45:64) is the worst offender.
Tap a chord to redraw it:
Tuning
Two ways to be in tune
A MIDI note becomes a frequency by the equal-tempered law, where note 69 is A = 440 Hz and every semitone multiplies by the twelfth root of two:
f = 440 · 2(m − 69) / 12
Equal temperament makes every key identical at the cost of every interval being slightly impure. The header's EQUAL ↔ PURE switch moves to 5-limit just intonation, nudging each pitch class by a fixed cent offset so triads lock into whole-number ratios. The major third falls ~14 ¢, the fifth rises 2 ¢:
♪By ear
Pure intonation stops the chord from shimmering — it sits still, beat-free. You stop hearing the seams between the notes.
∑By number
The figure is computed from whichever tuning is live, so switching to pure visibly simplifies the knot: the ratio it approximates gets closer to small integers.
Pitch-class geometry · interactive
SHADOW folds harmony onto time
In Shadow mode the beat is not programmed — it is derived. The held chord's pitch classes are placed directly onto a 12-step ring, root at position 0, and those positions become the onset pattern. Each hit then plays the chord tone that landed there, so the rhythm arpeggiates the harmony.
♪By ear
The chord you hold is the groove. Spread, symmetric chords feel even and rolling; tight clusters lurch and stumble — the same character you heard in their figure.
∑By number
An augmented triad {0,4,8} is a perfect E(3,12); a diminished seventh {0,3,6,9} a perfect E(4,12) — a chord that fills a regular polygon in ℤ₁₂ maps to a perfectly even groove (proved below).
Euclidean pulse · interactive
The other beat is E(k,n)
The second engine runs a classic Euclidean rhythm E(k,n) — distribute k hits as evenly as possible across n steps (defined precisely below). NŌTO uses a 16-step necklace; the Density dial chooses k, a bucket accumulator spaces the hits, and the first one is rotated onto the downbeat. Every onset plays the whole latched chord.
Density5/16
Polyrhythm thread
12-step harmony against 16-step pulse
Shadow naturally lives on a 12-step pitch-class circle; the Euclid engine's grid is 16 sixteenths. Run both at once — anchored to a shared downbeat — and the combined cycle resolves only at lcm(12,16)=48 sub-pulses: three bars of sixteenths, four turns of the 12-ring. Polyrhythm is native to the mechanism, not bolted on.
The voices are curated, labelled PROP. I–VII — each a small oscillator recipe rather than an open synth. Six always-on dials shape any of them; three more (Density · Tempo · Swing) appear only once a beat runs.
Prop.
Voice
Recipe
I
Sine
pure sine
II
Pulse
square wave
III
Trine
triangle
IV
Reed
sawtooth
V
Chorus
detuned saws (≈7 ¢)
VI
Bell
sine + FM partial
VII
Organ
sine + sub-octave
Tone · Space · Motion are live (filter, reverb, vibrato); Attack · Release · Detune are read at note-strike, shaping the next note. Three channels — live, beat, loop — each carry their own voice and dials, so the groove can sit on a different timbre from your hands.
Audio architecture
One short graph; generated notes never collide with your hands
Live notes are sustained voices held in an active map and drawn as the main staff figures. The beat and looper use a separate fire-and-forget pluck() path, so a generated note can never cut off one you are holding. Everything sums into a single master bus that is both sounded and analysed.
voice stackoscillators
master gain
compressor
filterTone
reverbSpace
output+ analyser tap
A shared LFO supplies Motion (vibrato). The analyser tap off the master is what draws the live oscilloscope baseline on the instrument's staff.
Live channelSustained notes in an active map; draw the main staff figures and the cobalt solo knot.Beat channelEuclid and Shadow hits fire short plucks and lighter background flashes — the red knot.Loop channelRecorded events are stored as fractions of the cycle, so the phrase follows tempo — the gold knot.
Capture & export
A recording that carries its own plate
The header's REC button captures the master bus to a 16-bit PCM .wav through an inline AudioWorklet. On stop, the instrument engraves a cover plate: it picks one note you played and draws its bloom-shape — the finite Byrne primitive in its pitch-class colour over a faint construction circle — as a square PNG with the NŌTO wordmark and a caption (note · date · duration). The flat primitive is chosen over the Lissajous because it still reads at thumbnail size.
That image is wrapped into an ID3v2.3 tag as an APIC frame and written as a trailing chunk of the WAV, so the take carries its own artwork before it downloads. (Cover-art support varies by player — foobar2000 and MediaMonkey read it; macOS Finder often does not.)
Apparatus
Definitions & propositions
Everything claimed above, made precise — and, where it was loose, corrected. After Byrne, the figures are the proof; here is the prose that backs them. Every statement is checkable against the source, and the constants below match the running instrument to the stated tolerance.
Notation
Write ℤ_n = {0,1,…,n−1} for the n pulses of one cycle, addition modulo n. A rhythm is a subset S ⊆ ℤ_n; its elements are onsets, with k = |S|. The inter-onset intervals are the cyclic gaps between consecutive onsets; they sum to n. For a frequency ratio r > 0, its size in cents is ¢(r) = 1200 · log₂ r.
Definition 1— Euclidean rhythm E(k,n)
For 0 < k ≤ n, the bucket recurrence the instrument runs — add k each pulse, and whenever the accumulator reaches n emit an onset and subtract n — places an onset at pulse i exactly when a multiple of n is crossed:
E(k,n) = { i ∈ ℤ_n : ⌊(i+1)k ∕ n⌋ > ⌊ ik ∕ n⌋ }, then rotated so 0 ∈ S.
A rhythm of k onsets in ℤ_n is maximally even when its inter-onset intervals take only the two consecutive integer values ⌊n∕k⌋ and ⌈n∕k⌉, themselves spread as evenly as possible.
Proposition 1— E(k,n) is well-formed and even
E(k,n) has exactly k onsets, and every gap equals ⌊n∕k⌋ or ⌈n∕k⌉ — so by Definition 2 it is maximally even.
ProofThe onset count telescopes: Σ ( ⌊(i+1)k∕n⌋ − ⌊ik∕n⌋ ) = ⌊nk∕n⌋ − 0 = k over i = 0 … n−1. Each pulse adds k∕n < 1 to the running value ik∕n, so it crosses an integer at most once per pulse and, on average, once every n∕k pulses; consecutive crossings are therefore ⌊n∕k⌋ or ⌈n∕k⌉ pulses apart. ∎
Proposition 2— regular polygons are exactly Euclidean
If k ∣ n then E(k,n) = { 0, n∕k, 2n∕k, …, (k−1)n∕k }: all gaps equal n∕k — perfectly even.
ProofWhen k ∣ n the accumulator reaches exactly n every n∕k pulses, so the onsets are the multiples of n∕k: one gap value, the least possible spread. ∎
In ℤ_12 the divisor cases are precisely the symmetric chords:
k
E(k,12)
chord
2
{0, 6}
tritone
3
{0, 4, 8}
augmented triad
4
{0, 3, 6, 9}
diminished seventh
6
{0, 2, 4, 6, 8, 10}
whole-tone
Corollary— the Shadow theorem, and its limit
Shadow maps a chord's pitch classes to onsets on ℤ_12. By Proposition 2, a chord that fills a regular polygon — a single transposition orbit with generator g = 12∕k — is sent to the perfectly even groove E(k,12). The four chords above are the only such cases in twelve-tone space.
Red ink. Transpositional symmetry alone does not imply evenness — an earlier draft of this page claimed it did. Counterexample: {0,1,6,7} is invariant under transposition by 6, yet it is two semitone clusters — maximally uneven. It is a union of two orbits, not one regular polygon, so Proposition 2 does not apply. Only single-orbit chords are Euclidean.
Proposition 3— when the harmonic figure closes
For axis signals built from frequencies in ratio a : b, the Lissajous curve is a closed loop, of period 2π ∕ gcd(a,b), if and only if a∕b ∈ ℚ; otherwise it is quasi-periodic and never closes, filling its bounding box densely.
ProofThe curve is periodic iff its two coordinate functions share a common period, i.e. iff a∕b is rational; for integers the least common period is 2π∕gcd(a,b). An irrational ratio yields an orbit equidistributed in the box, so the path is dense and non-closing. ∎
Hence a consonance — small coprime integers — closes in few cycles into a clean knot, while the equal-tempered tritone, ratio 2^{1∕2} ∉ ℚ, never closes: what you see is its rational shadow 45 : 64, whose large integers give a long period and a dense tangle.
Proposition 4— the pure-tuning offsets are forced
In pure mode each pitch class p is tuned to its 5-limit ratio r_p, and the displayed offset is exactly ¢(r_p) − 100p. The instrument's stored table is precisely this, to within 0.1¢:
pc
ratio
¢ (just)
offset
C
1/1
0.00
0.0
E
5/4
386.31
−13.7
F♯
45/32
590.22
−9.8
G
3/2
701.96
+2.0
A
5/3
884.36
−15.6
B
15/8
1088.27
−11.7
The full twelve ratios are 1/1, 16/15, 9/8, 6/5, 5/4, 4/3, 45/32, 3/2, 8/5, 5/3, 9/5, 15/8. The just major third sits 13.7¢ below equal temperament and the fifth 2.0¢ above — the corrections that null the beating you watched go still in the figure.
Sources
J. Clough & J. Douthett, “Maximally Even Sets,” Journal of Music Theory 35 (1991). · G. T. Toussaint, “The Euclidean Algorithm Generates Traditional Musical Rhythms,” BRIDGES (2005). · Lissajous closure follows from periodicity / Weyl equidistribution. · O. Byrne, The First Six Books of the Elements of Euclid (1847).
Colophon
How it is built
The source lives as numbered CSS and JavaScript modules under src/. A zero-dependency Node assembler concatenates them, in load order and sharing one global scope, into the single self-contained index.html the site serves — byte-for-byte what you would get hand-joining the modules, and still human-readable. Type is set in Cormorant Garamond, Hanken Grotesk and JetBrains Mono. Everything else — the audio, the MIDI, and all the geometry on this page — is vanilla. The visual language is after Oliver Byrne's coloured Elements of Euclid, 1847.