How ravnoor-kaur/airband works
AirBand is a browser-based webcam music toy. The player starts camera and audio, hand landmarks are tracked and smoothed, gesture classification can select an instrument, and the active instrument updates and draws each frame. The README names drums, piano, guitar, and theremin, though several instrument behaviors and gesture-model functions are still TODOs. The graph reflects visible orchestration and documented capabilities; it does not assume unfinished audio or gesture behavior works.
Main entry points: main.js Frame Orchestrator · instrument.js Instrument Template · handTracker.js Hand Tracker · drums.js Drums
Components 16
Camera Tracking
- Hand Tracker
src/tracking/handTracker.js - Hand Smoothing
src/tracking/motion.js
Gestures and Modes
- Frame Orchestrator
src/main.js - Gesture Model
src/ml/gestureModel.js
Air Instruments
- Instrument Template
src/instruments/instrument.js - Drums
src/instruments/drums.js - Piano
src/instruments/piano.js - Guitar
src/instruments/guitar.js - Theremin
src/instruments/theremin.js
Audio and Display
- Audio Engine
src/audio/audioEngine.js - Status Display
src/ui/display.js - Hit Effects
src/ui/effects.js
Other components
- Player
- Webcam
- MediaPipe
- Tone.js
Connections 20
- Player → Frame Orchestrator: starts app
README.md - Player → Webcam: grants access
README.md - Frame Orchestrator → Audio Engine: unlocks audio
src/main.js - Audio Engine → Tone.js: starts
src/audio/audioEngine.js - Frame Orchestrator → Hand Tracker: starts and reads
src/main.js - Webcam → Hand Tracker: provides video
src/tracking/handTracker.js - Hand Tracker → MediaPipe: detects landmarks
src/tracking/handTracker.js - Frame Orchestrator → MediaPipe: uses hand connections
src/main.js - Frame Orchestrator → Hand Smoothing: smooths hands
src/main.js - Frame Orchestrator → Gesture Model: loads and classifies
src/main.js - Frame Orchestrator → Drums: routes updates and drawing
src/main.js - Frame Orchestrator → Piano: routes updates and drawing
src/main.js - Frame Orchestrator → Guitar: routes updates and drawing
src/main.js - Frame Orchestrator → Theremin: routes updates and drawing
src/main.js - Drums → Instrument Template: creates instrument
src/instruments/drums.js - Piano → Instrument Template: creates instrument
src/instruments/piano.js - Guitar → Instrument Template: creates instrument
src/instruments/guitar.js - Theremin → Instrument Template: creates instrument
src/instruments/theremin.js - Frame Orchestrator → Status Display: updates status
src/main.js - Frame Orchestrator → Hit Effects: draws effects
src/main.js