Interactive design · Interactive collection

Sound Toys

Ten playable Web Audio instruments that share one rule: pitch sets hue, and register and loudness set saturation and brightness.

sound-toy-deploy.pages.devLiveOpen full size
Pick an instrument and play. Sound starts after your first click, as browsers require.
Role
Design & development
Period
2026
Status
Live
Platform
Cloudflare Pages
Built with
  • JavaScript
  • Web Audio API
  • Canvas
10
instruments
11,714
lines of code
26
commits
01

One color rule

Every instrument in the set colors sound the same way. The pitch of a note sets its hue, its register sets saturation, and its loudness sets brightness, so the same note looks the same wherever it appears.

Pitch to color

Each of the twelve pitch classes has a fixed hue, shared by every instrument.

CC♯DD♯EFF♯GG♯AA♯Bpitchmaps tohueRegister setssaturationLoudness setsbrightnessOne color ruleacross everyinstrument
02

The instruments

  • A theremin, beat frequencies, and Karplus-Strong plucked strings.
  • IPA vowel formants and a Doppler model.
  • A resonance study, an acoustic field simulation, and animal hearing ranges shifted into the human range.
  • A live spectrum analyzer that drives a radial pitch wheel, an oscilloscope, and a spectrogram.

Display settings

Choose a layout and palette. Your settings are saved in this browser.

Palette
Homepage layout
Motion

Display settings do not change the project selection or publication permissions. Orbital and index layouts use the same project data.

Harmonic drawing

The homepage drawing is a small interactive made for this portfolio. It is separate from the project examples.

3
25

Drag across the center drawing or use these controls. The drawing does not require sound, network access, or continuous animation.