otosu
English | 日本語
Drop, hit, glow, sound.
otosu is a generative music piece for the eye and ear: falling balls strike the lines and shapes you draw, and every hit becomes a note and a flash of light.
It aims to let anyone make music by feel, without playing an instrument, and to look good projected on a wall.
Try it: https://otosu.shunyakoide.com
Requirements
- A browser with WebGL 2 (recent Chrome, Edge, Firefox or Safari, on desktop or phone)
- Sound starts after your first click or tap (browsers block autoplay)
- Live MIDI output needs Web MIDI, which in practice means a Chromium-based browser. Recording a .mid file works everywhere
- Once opened, it works offline too. You can install it as an app: "Install" in the address bar on Chrome / Edge, "Add to Home Screen" in the share menu on iPhone / iPad, "Add to Dock" in the File menu on Safari for Mac
Development
Needs Node.js 20.19 or later.
npm install
npm run dev
npm test # physics determinism, no tunneling, MIDI export, and more
npm run lint # Biome
npm run build # type check and production build (dist/)
Built with Vite, TypeScript, three.js and Tone.js. The physics (balls against line segments) is hand-written and deterministic: the same layout always plays the same music.
Deploying your own copy
npm run build produces a static site in dist/; any static host works.
To use npm run deploy (Cloudflare Workers), first remove the routes line in wrangler.jsonc, which points at the author's domain. The site is then served at otosu.<your-subdomain>.workers.dev.
Controls
| Input | Action |
|---|
| Drag | Draw a line or shape (bigger shapes play lower notes; you hear the pitch softly as you draw) |
| 1–5 | Tools: line / pen (freehand) / circle / triangle / square. For shapes, drag outward from the center; the drag distance sets the size |
| Shift + drag | Draw a bumper (bounces balls hard) |
| Right-click (long-press on touch) | Shape menu: toggle the echo / rise / chord effects, or delete the shape |
| Space | Play / pause (pausing stops dropping new balls and lets the rest fade out) |
| M | Mute (built-in sound and MIDI output) |
| C | Clear all shapes |
| S | Copy the current layout as a URL (opening it plays the same music) |
| R | Start / stop recording a .mid file (saved when you stop) |
| F | Fullscreen |
| H | Hide the UI (for projection) |
| , | Open settings |
| Esc | Close the open popover |
The toolbar at the top of the screen has:
- play / pause
- the tools
- tempo (− / + buttons, or scroll)
- volume and mute
- clear all
- popovers: motion / light / sound / settings / scenes
- record video: records the picture and the built-in sound to a video file (press again to stop, then again to save). On iPhone, use this instead of the system screen recording, which captures the sound as noise
- fullscreen (where supported)
| Popover | Contents |
|---|
| motion | Motion on/off (move), shape rotation (spin), and emitter movement (sway) with its style (glide / step) |
| light | Glow, trail style, effects on hit (drip / flowers and their kind: mixed, sunflower, spider lily, daisy, meadow / readout / crosshair / notes / scope / stars), and the backdrop |
| sound | Rhythm (emitter periods), song (chord progression), and a soft chord that keeps playing underneath (hum) |
| settings | Stereo width, sound-to-light offset (light delay), resolution, quality (auto or fixed), MIDI, and the list of keys |
| scenes | Save and load layouts, export / import them as files, copy a link |
Each shape plays a different instrument.
| Shape | Sound |
|---|
| Line | Bell (melody) |
| Pen | Plucked tone (kalimba-like) |
| Circle | Soft kick to tom, tuned to the chord root; bigger circles are lower |
| Triangle | Metal (chime / singing bowl), long decay |
| Square | Wooden click (woodblock-like) |
The harmony shifts every 8 bars. Pick a song in the sound popover:
- bright: C–F–C–G
- dusk: Cm–A♭–E♭–B♭ (minor)
- wistful: F–G–Em–Am
- still: the chord never changes
Line colors stay the same; only the pitches move. Your layout and settings are saved in the browser automatically and come back after a reload.
MIDI output (GarageBand / DAWs)
Record and import (easiest)
- Press R (or
record .mid under MIDI in settings) to start recording. Recording begins on the next beat.
- Press R again to stop;
otosu-<date>-<time>.mid is saved.
- Drag and drop it into GarageBand to import it as a software instrument track.
Send live (via the IAC Driver on macOS; requires a Chromium-based browser such as Chrome)
- Open the Audio MIDI Setup app → Window → Show MIDI Studio.
- Double-click "IAC Driver" and check "Device is online".
- In settings, press
connect under MIDI and allow access in the browser prompt (if no output is chosen yet, IAC is selected automatically when present).
- Create a software instrument track in GarageBand and it will play otosu's notes (GarageBand listens to every MIDI input).
- Circles (kick / tom) and squares (woodblock) are sent as GM drums on the
drums channel (10 by default). Recorded .mid files do the same.
- If the built-in sound doubles up with your DAW, turn off
built-in. Use offset to compensate for DAW latency.
License
MIT
