Skip to content

The web canvas

/marble/ is the sixth shell: the identical core compiled to wasm, drawing through WebGPU, with a page of JavaScript as the host.

WebGPU in a secure context — https://, or localhost when you serve a build yourself. Chrome and Edge, Safari 26, Firefox 141+. If the page says the browser has no WebGPU it means exactly that (a LAN address over plain http:// hides it; serve HTTPS).

  • Marble mode — tap or click = drop · drag = comb · two-finger twist = vortex · two-finger pinch = fold · pen = stylus wake with pressure · mouse right-drag = vortex, Shift-drag = fold, middle-drag = wake.
  • MIDI in on Chrome and Edge through Web MIDI: connect an instrument and it plays straight in, all three dialects. Safari and Firefox degrade to gestures only, quietly.
  • The settings panel at the top left mirrors the desktop settings window where Marble mode has the concept — the thirteen layouts with the brass arrangement and the string tuning, the medium, the look, expression routing, the operators’ knobs, presets, paper dip and print export, About. It persists in your browser.
  • The instruments as overlays: every keyed layout is drawn over the water from the engine’s probe — a circle and a note name per cell, the theremin as its axis with a tick at every C, the brass with a HUD of the fingering the engine holds. Under the brass the panel has three valve checkboxes and a slide slider that send CC 110–113 straight into the engine, as a controller would; the overlay follows the engine’s state. Layout overlay switches it, per browser.
  • Replay: Replay a recording… opens a .sumireplay from the desktop or a tablet and plays it on the scripted clock, the pointer and Web MIDI muted meanwhile; ?replay=<url> does the same from a link — the picture alone, since the web has no sound core. Replay →
  • Play mode is web-deferred: there is no WebMIDI output here yet, and no sound engine in the page — the Suzu lab beside it runs the synth alone.

Every live demo on this site is the web canvas with a scene:

/marble/?scene=vortex&A=2&R=0.25&embed=1

scene is one of drop, feed, tine, vortex, rankine, wake, viscous, pinch, ripple, lamb_oseen, scroll, torsion, chladni, burst, spark, chirikov, anod; the other parameters are that scene’s slider keys (the formula’s symbols — see each operator page); embed=1 hides the settings panel and hint; pace is the number of frames between steps (default 2 — the mathematics is applied as a run of small passes so you see it take effect; 0 = instant); medium=0|1 runs the whole scene as ink on washi or as the Anod discharge — the toggle is on every scene and permanent for the run. Outside a scene, ?layout=N opens a layout (transient, never stored), ?overlay=1|0 the overlay, ?valves=1,3 and ?slide=0.5 a fingering, and ?replay=<url> a recording. Every scene works on two ring clusters, top-left and bottom-right, so one operator shows two orientations or two signs at once. A scene runs a deterministic script on a fresh sheet, so a URL is a reproducible picture; Replay runs it again. This is also how the site guarantees it contains no second implementation of any operator: every moving picture here is an <iframe> of this page.

The web build is part of the same cross-backend regression as Metal, D3D11 and OpenGL: the canonical deformation script produces a field that matches the Metal reference within a documented tolerance, checked headlessly in the release gates. What you see in the browser is the engine, not a port of it.

midi-sink 2.0.0-rc.5 · AGPL-3.0 · source