Metastaseis-style string glissandi as ruled surfaces on graph paper, and a gas of notes.
Time runs across the graph paper and pitch runs up it in semitones, and every straight line is one string sliding from one pitch to another. Each sheet is defined by two control segments: string k starts a fraction of the way along the first and glides to the matching point on the second, so dozens of slightly rotated straight lines envelope a curve, the ruled surfaces Xenakis drew for Metastaseis and later built as the Philips Pavilion. The stochastic page follows Pithoprakta: start times arrive as a Poisson process, glissando speeds are drawn from the Maxwell-Boltzmann distribution (the length of a 3D Gaussian vector), molecules are inked by kinetic energy, and an inset histogram checks the draw against the theoretical curve. After a click every line under the red playhead is synthesized in JavaScript a few chunks ahead of the audio clock as a gliding sine, panned by its place in the sheet and summed through a generated hall.
Try it. Drag the red handles at the ends of the control segments to twist a surface and hear the massed glissandi change. Press 1 or 2 (or click the title block) to switch between ruled surfaces and the stochastic gas; on the gas page drag up for a hotter, faster gas and right for a denser one. Up and down change the number of strings (or the temperature), R draws a new page, Space pauses, 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 interactive "glissando score" in the spirit of Iannis Xenakis's Metastaseis with JavaScript, the HTML canvas element and the Web Audio API. 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 full-window, high-DPI canvas that draws cream graph paper, heavier every fifth line.
- Treat it as a score: 20 seconds left to right, MIDI pitch 36 to 96 bottom to top.
- Define a "sheet" as two control segments, A and B, each with two draggable endpoints. Draw 30 straight lines: line k starts at the point k/29 of the way along A and ends at the matching point on B. Notice how the straight lines envelope a curve.
- Draw two or three sheets in different inks.
- Sweep a red playhead across the page and loop it.
Then make it sound:
- Start an AudioContext only on the first click and show a small "Click for sound" hint until then.
- For every line under the playhead, run a sine oscillator whose frequency follows the line (convert MIDI to Hz with 440 * 2^((m - 69) / 12)), with a short fade in and out at its ends.
- Update the frequencies every frame so dragging a handle changes the sound immediately.
Once that works, make it beautiful:
- Let lines overshoot their ends in a lighter ink, like an architect's sketch, and dot where the playhead crosses them.
- Add a second page that scatters short glissandi like gas molecules: Poisson start times, and speeds drawn as the length of a 3D Gaussian vector (a Maxwell-Boltzmann distribution) scaled by a temperature you can drag.
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 histogram of speeds against the Maxwell curve, rendering the sound into buffers for hundreds of voices, or exporting the page as an SVG score.
