# ravnoor-kaur/airband architecture

> Architecture diagram of the GitHub repository ravnoor-kaur/airband, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ravnoor-kaur/airband
- Repository: https://github.com/ravnoor-kaur/airband

## Overview

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: [`src/main.js`](https://github.com/ravnoor-kaur/airband/blob/main/src/main.js) (Frame Orchestrator), [`src/instruments/instrument.js`](https://github.com/ravnoor-kaur/airband/blob/main/src/instruments/instrument.js) (Instrument Template), [`src/tracking/handTracker.js`](https://github.com/ravnoor-kaur/airband/blob/main/src/tracking/handTracker.js) (Hand Tracker), [`src/instruments/drums.js`](https://github.com/ravnoor-kaur/airband/blob/main/src/instruments/drums.js) (Drums)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Camera Tracking"]
  node_tracker["Hand Tracker<br/>[handTracker.js]"]
  node_motion["Hand Smoothing<br/>[motion.js]"]
end

subgraph group_interaction["Gestures and Modes"]
  node_main["Frame Orchestrator<br/>[main.js]"]
  node_gestures["Gesture Model<br/>[gestureModel.js]"]
end

subgraph group_instruments["Air Instruments"]
  node_base["Instrument Template<br/>[instrument.js]"]
  node_drums["Drums<br/>[drums.js]"]
  node_piano["Piano<br/>[piano.js]"]
  node_guitar["Guitar<br/>[guitar.js]"]
  node_theremin["Theremin<br/>[theremin.js]"]
end

subgraph group_presentation["Audio and Display"]
  node_audio["Audio Engine<br/>[audioEngine.js]"]
  node_display["Status Display<br/>[display.js]"]
  node_effects["Hit Effects<br/>[effects.js]"]
end

node_player(("Player"))
node_webcam["Webcam"]
node_mediapipe["MediaPipe"]
node_tone["Tone.js"]

node_player -->|"starts app"| node_main
node_player -->|"grants access"| node_webcam
node_main -->|"unlocks audio"| node_audio
node_audio -->|"starts"| node_tone
node_main -->|"starts and reads"| node_tracker
node_webcam -->|"provides video"| node_tracker
node_tracker -->|"detects landmarks"| node_mediapipe
node_main -->|"uses hand connections"| node_mediapipe
node_main -->|"smooths hands"| node_motion
node_main -->|"loads and classifies"| node_gestures
node_main -->|"routes updates and drawing"| node_drums
node_main -->|"routes updates and drawing"| node_piano
node_main -->|"routes updates and drawing"| node_guitar
node_main -->|"routes updates and drawing"| node_theremin
node_drums -->|"creates instrument"| node_base
node_piano -->|"creates instrument"| node_base
node_guitar -->|"creates instrument"| node_base
node_theremin -->|"creates instrument"| node_base
node_main -->|"updates status"| node_display
node_main -->|"draws effects"| node_effects

click node_main "https://github.com/ravnoor-kaur/airband/blob/main/src/main.js"
click node_tracker "https://github.com/ravnoor-kaur/airband/blob/main/src/tracking/handTracker.js"
click node_motion "https://github.com/ravnoor-kaur/airband/blob/main/src/tracking/motion.js"
click node_gestures "https://github.com/ravnoor-kaur/airband/blob/main/src/ml/gestureModel.js"
click node_base "https://github.com/ravnoor-kaur/airband/blob/main/src/instruments/instrument.js"
click node_drums "https://github.com/ravnoor-kaur/airband/blob/main/src/instruments/drums.js"
click node_piano "https://github.com/ravnoor-kaur/airband/blob/main/src/instruments/piano.js"
click node_guitar "https://github.com/ravnoor-kaur/airband/blob/main/src/instruments/guitar.js"
click node_theremin "https://github.com/ravnoor-kaur/airband/blob/main/src/instruments/theremin.js"
click node_audio "https://github.com/ravnoor-kaur/airband/blob/main/src/audio/audioEngine.js"
click node_display "https://github.com/ravnoor-kaur/airband/blob/main/src/ui/display.js"
click node_effects "https://github.com/ravnoor-kaur/airband/blob/main/src/ui/effects.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_tracker,node_motion toneBlue
class node_main,node_gestures toneAmber
class node_base,node_drums,node_piano,node_guitar,node_theremin,node_mediapipe toneMint
class node_audio,node_display,node_effects toneRose
class node_player,node_webcam,node_tone toneIndigo
```

## Components

### Camera Tracking

- [Hand Tracker](https://github.com/ravnoor-kaur/airband/blob/main/src/tracking/handTracker.js): `src/tracking/handTracker.js`
- [Hand Smoothing](https://github.com/ravnoor-kaur/airband/blob/main/src/tracking/motion.js): `src/tracking/motion.js`

### Gestures and Modes

- [Frame Orchestrator](https://github.com/ravnoor-kaur/airband/blob/main/src/main.js): `src/main.js`
- [Gesture Model](https://github.com/ravnoor-kaur/airband/blob/main/src/ml/gestureModel.js): `src/ml/gestureModel.js`

### Air Instruments

- [Instrument Template](https://github.com/ravnoor-kaur/airband/blob/main/src/instruments/instrument.js): `src/instruments/instrument.js`
- [Drums](https://github.com/ravnoor-kaur/airband/blob/main/src/instruments/drums.js): `src/instruments/drums.js`
- [Piano](https://github.com/ravnoor-kaur/airband/blob/main/src/instruments/piano.js): `src/instruments/piano.js`
- [Guitar](https://github.com/ravnoor-kaur/airband/blob/main/src/instruments/guitar.js): `src/instruments/guitar.js`
- [Theremin](https://github.com/ravnoor-kaur/airband/blob/main/src/instruments/theremin.js): `src/instruments/theremin.js`

### Audio and Display

- [Audio Engine](https://github.com/ravnoor-kaur/airband/blob/main/src/audio/audioEngine.js): `src/audio/audioEngine.js`
- [Status Display](https://github.com/ravnoor-kaur/airband/blob/main/src/ui/display.js): `src/ui/display.js`
- [Hit Effects](https://github.com/ravnoor-kaur/airband/blob/main/src/ui/effects.js): `src/ui/effects.js`

### Other components

- **Player**
- **Webcam**
- **MediaPipe**
- **Tone.js**

## Connections

- Player → Frame Orchestrator: starts app (evidence: `README.md`)
- Player → Webcam: grants access (evidence: `README.md`)
- Frame Orchestrator → Audio Engine: unlocks audio (evidence: `src/main.js`)
- Audio Engine → Tone.js: starts (evidence: `src/audio/audioEngine.js`)
- Frame Orchestrator → Hand Tracker: starts and reads (evidence: `src/main.js`)
- Webcam → Hand Tracker: provides video (evidence: `src/tracking/handTracker.js`)
- Hand Tracker → MediaPipe: detects landmarks (evidence: `src/tracking/handTracker.js`)
- Frame Orchestrator → MediaPipe: uses hand connections (evidence: `src/main.js`)
- Frame Orchestrator → Hand Smoothing: smooths hands (evidence: `src/main.js`)
- Frame Orchestrator → Gesture Model: loads and classifies (evidence: `src/main.js`)
- Frame Orchestrator → Drums: routes updates and drawing (evidence: `src/main.js`)
- Frame Orchestrator → Piano: routes updates and drawing (evidence: `src/main.js`)
- Frame Orchestrator → Guitar: routes updates and drawing (evidence: `src/main.js`)
- Frame Orchestrator → Theremin: routes updates and drawing (evidence: `src/main.js`)
- Drums → Instrument Template: creates instrument (evidence: `src/instruments/drums.js`)
- Piano → Instrument Template: creates instrument (evidence: `src/instruments/piano.js`)
- Guitar → Instrument Template: creates instrument (evidence: `src/instruments/guitar.js`)
- Theremin → Instrument Template: creates instrument (evidence: `src/instruments/theremin.js`)
- Frame Orchestrator → Status Display: updates status (evidence: `src/main.js`)
- Frame Orchestrator → Hit Effects: draws effects (evidence: `src/main.js`)