Ray-traced wine glasses, tuned with water and sung by stick-slip friction on the rim.
Eight wine glasses stand in two rows in front of a sunlit window, and every bowl is ray-traced per pixel against a painted image of the room: the thin walls darken and turn reflective at grazing angles, while the water is a thick lens that bends each ray with Snell's law and shows the room upside down. The front row refracts the back row as well, and the light that passes through pools on the table as caustics traced from about 38,000 rays per glass. Water adds mass to the wall's (2, 0) bending mode, so the pitch follows French's formula f = f0 / sqrt(1 + 2.2 (h/H)^4). A rubbing finger is a stick-slip contact whose friction falls with sliding speed, integrated at the audio rate; that falling friction pumps the mode once per cycle, so the glass sings at its own pitch, and the top view shows the four lobes the vibration draws on the water, with the rim swinging into an oval and back.
Try it. Circle a rim with the pointer to make that glass sing. Drag up or down inside a bowl to pour water in or out and watch its note and cents readout change. Keys 1 to 8 sing the glasses, M mutes; sound starts on the first click. Left alone, it plays a slow chorale and pours an out-of-tune glass back to pitch.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a glass harp, a row of wine glasses tuned with water, 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 canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window.
- Draw 8 wine glasses side by side on a table, in profile: a rounded bowl, a stem and a foot, with a water level inside each.
- Tune them with water. More water lowers the pitch: use f = f0 / sqrt(1 + 2.2 * (h / H)^4), where h / H is how full the bowl is. Choose each glass's empty pitch a little above a C major scale note and its water level so it lands on that note. Show the note name and how many cents off it is.
- Let the user drag up or down inside a bowl to change its water level.
- When the pointer moves along a rim, play that glass: create the AudioContext on the first click, then a sine at the glass's pitch whose volume follows how fast the pointer moves, with a slow fade when it stops.
Once that works, make it beautiful:
- Paint a bright window behind the glasses and render each bowl per pixel from that painted background: the walls barely shift what is behind them but darken toward the edges, and the water flips the view horizontally like a lens, using Snell's law for a cylinder of water.
- Add a highlight down each bowl, a bright rim ellipse, and a soft glow on a glass while it sings.
- Ripple the water surface with four lobes around the rim while a glass sings.
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 stick-slip friction model for the finger, caustics on the table, or an autoplay mode that plays a chorale.
