Two players loop one figure, one slightly faster, printing a moire record of the drift.
Two electric pianos repeat the same original twelve-note figure; the second plays a few percent faster, slides a note ahead of the first and locks there, the process minimalist composers called phasing. Each player is a ring of beads whose radius follows the melody's contour, turning so the sounding note sits under the playhead. Inside, every note is printed as a dash in a frame that turns with the steady player and sinks one bar at a time toward the center, so the steady notes stack into straight spokes while the drifting ones shear into spiral arms, a moire record of the whole piece. The right column shows the composite melody for the current offset as a piano roll, with its emergent upper and lower lines traced, and plots the offset over time with each figure's lock-in marked. Notes are FM electric piano tones queued sample-accurately by a lookahead scheduler that predicts each player's onsets at its current rate.
Try it. Click for sound. Drag the rings to turn player two by hand and release to settle on the nearest note. Switch between Process (hold, drift one note, lock) and steady Drift, nudge ahead one note with the button, space or the right arrow, change the drift rate with the buttons or the up and down arrows, F cycles three figures and M mutes.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a phase music machine with JavaScript, the HTML canvas element and the Web Audio API: two players loop the same twelve-note melody, one slightly faster, so they drift apart and lock back together. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window.
- Write your own twelve-note pentatonic melody as MIDI numbers.
- Keep two positions, pA and pB, measured in notes. Each frame, advance pA by dt / noteLength and pB by the same amount times 1.03, so player two creeps ahead.
- Draw two concentric rings of twelve beads, amber for the steady player and cyan for the drifting one. Rotate each ring so the note it is playing sits under a fixed playhead at the top, nudging each bead outward by its pitch.
- Only after the first click, create an AudioContext and play each note as a short sine or triangle tone with a quick decay, panned left for player one and right for player two. Each frame, predict each player's next note times at its current speed and queue those in the next 100 ms on audioContext.currentTime.
Once that works, make it beautiful:
- Add Process mode: player two holds each offset for four bars, then drifts until it is exactly one note further ahead, and locks again, visiting all twelve offsets.
- Print every note inside the rings as a short arc in a frame that turns with player one, newest at the rim and sinking toward the center each bar. With globalCompositeOperation = "lighter", steady notes stack into spokes and drifting ones shear into spirals.
- Plot the offset over time and mark each lock-in.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as an FM electric piano voice, a piano roll of the composite melody, or letting me drag a ring to set the offset by hand.
