Mudra Visualizer
A real-time hand-tracking visual instrument using MediaPipe and p5.js. Maps hand gestures (mudras) to four visual modes, particle trails, geometric halos, energy fields, and constellation maps. Uses One Euro Filter for smooth tracking and WebGL shaders.
View project →GitHub: prahlaadr/mudra-visualizer
Why I Built This
Wanted to create a visual instrument for DJ sets that responds to hand gestures (mudras from Indian classical dance). No hardware needed — just a webcam.
How It Works
MediaPipe Hands tracks 21 hand landmarks in real-time via webcam. p5.js renders four visual modes: particle trails, geometric halos, energy fields, constellation maps. One Euro Filter smooths noisy tracking data. WebGL shaders handle glow and blur effects. Each mudra (hand pose) triggers different visual parameters.
Notable Technical Details
- One Euro Filter for jitter-free hand tracking
- 4 visual modes mapped to hand poses (mudras)
- WebGL shader pipeline for glow and blur effects
- Runs at 60fps in browser with no dependencies beyond MediaPipe and p5.js