Computer Vision → Sound Synthesis

Use the index fingertip to control a square wave oscillator. X → pitch, Y → filter cutoff. No envelopes, just subtractive synthesis.

Audio: stopped Camera: idle Vision: idle
Freq: — Hz
Cutoff: — Hz

Edit here (student section)

Try these:

  • Make pitch lower by changing PITCH_MIN_MIDI or the range size.
  • Quantize pitch by wrapping with Math.round(...).
  • Narrow or invert the filter range (CUTOFF_MIN_HZ/CUTOFF_MAX_HZ).
Cheat sheet (1–2 line tweaks)
  • Quantize: const midi = Math.round(PITCH_MIN_MIDI + x * PITCH_RANGE);
  • Invert X: const x = 1 - clamp01(iTip.x);
  • Softer filter: set CUTOFF_MAX_HZ = 3000
  • Fixed pitch (no mapping): const midi = 60;
  • Map Y to resonance (bonus): see code comment in apply().
Troubleshooting
  • Open via HTTPS (or localhost), and allow camera.
  • If embedded, ensure the iframe uses allow="camera; microphone; autoplay".