A phosphor XY scope draws a 4D tesseract, knots and text from the stereo sound you hear.
The left channel drives the beam horizontally and the right channel vertically, so every picture here is literally the sound. Each period of the tone the scene is rebuilt, flattened into strokes and resampled into exactly sampleRate / f stereo samples: a rotating tesseract is one Eulerian circuit through its 32 edges (every vertex has degree four, so no edge is retraced), the knots are single closed curves, and lettering is a run of strokes joined by fast, dim jumps, since there is no blanking input. The pitch is how many times a second the picture is redrawn, and switching scenes interpolates the two sample streams, so the sound morphs with the image. The same ring buffer feeds back-to-back AudioBuffers on the audio clock and the screen, which draws only samples whose play time has passed, with each segment's brightness inversely proportional to beam speed, an exponentially decaying phosphor layer (long-persistence channels normalized so their afterglow trails rather than saturates) and a four-level bloom pyramid.
Try it. Click for sound (keep the volume low). Drag the screen to spin the 3D figures, pick a scene with the buttons or 1 to 6 (left and right arrows or space step through them), change the pitch with the up and down arrows, P switches between P1 green, long-persistence P7 and P3 amber phosphors, 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 an XY oscilloscope music toy with JavaScript, the HTML canvas element and the Web Audio API, where the left channel moves a glowing beam horizontally and the right channel moves it vertically, so the sound draws the picture. 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. Draw a dark screen with a faint graticule.
- Write a function that returns a shape as a list of 2D points in [-1, 1], starting with a rotating cube: rotate its 8 corners in 3D and walk its edges in one continuous order, retracing where you must.
- Resample the path into exactly sampleRate / 110 points at constant speed, so the picture is redrawn 110 times a second and you hear 110 Hz. Rebuild it every period so the rotation advances.
- Without sound, draw each frame's share of the samples. Only after the first click, create an AudioContext and queue the same samples as back-to-back stereo AudioBuffers (x left, y right) about 100 ms ahead on audioContext.currentTime, and draw only samples whose play time has passed.
Once that works, make it beautiful:
- Draw the beam onto an offscreen canvas that never clears: each frame fade it slightly toward black, then add the new segments with globalCompositeOperation = "lighter" in phosphor green. Make each segment's brightness inversely proportional to its length, because a fast beam deposits less light.
- Add bloom by drawing a small downscaled copy of the phosphor back on top, scaled up.
- Add more scenes, such as a torus knot, a rose curve and text, and let me drag to rotate.
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 a 4D tesseract traced as an Eulerian circuit, crossfading the sample streams to morph between scenes, or a long-persistence P7 phosphor.
