Alle projecten
Creative · Eigen werk

GestureFX

Een instrument dat je met je handen bespeelt, via de webcam.

Rol
Eigen project
Jaar
2025
Stack
  • JavaScript
  • MediaPipe Hands
  • Web Audio API
  • Canvas 2D

Je webcam wordt een instrument: beweeg je hand en het speelt. Drie gekleurde zones, elk met een eigen geluid en effect; de hoogte van je hand bepaalt de toon. In de browser, zonder installatie.

Van gebaren naar positie

Ik begon met gebaren: open hand, vuist, aantal vingers. Die flikkerden aan de randen en hadden smoothing nodig, en dat is vertraging. Bovendien wist niemand welk gebaar wat deed. Dus werd positie het instrument: elke zone is één octaaf (110-220, 220-440, 440-880 Hz) en het geluid volgt je hand continu, als een theremin. De zones staan op het scherm, dus het wijst zichzelf.

Kleine dingen die tijd kostten

  • Links was rechts. Webcamcoördinaten zijn niet gespiegeld; één regel loste het op (x = 1 - x).
  • Stilte tot je klikt. Browsers staan geluid pas toe na een klik of tik.

Keuzes

  • Tracking gebeurt in de browser. De video verlaat je apparaat nooit; de snelheid hangt af van je hardware.
  • Een synthesizer in plaats van samples. Elke toonhoogte is mogelijk en er valt niets te downloaden, maar het klinkt wel meer als een testtoon.

Wat ik nu anders zou doen

Eén oscillator laten doorlopen en de toon laten glijden in plaats van hem elk frame opnieuw te maken, de logging per frame weghalen, en vertraging meten in plaats van op gevoel beoordelen.