# Gesture Music Station

Real-time camera gesture music app built with **React**, **TensorFlow.js** (pose & hand tracking), and **Tone.js**.  
Use your **body** and **finger pinch gestures** to play drums and synth leads in the browser.

---

## ✨ Features

- **Body Gesture → Drum Sounds**
  - Raise right hand above head (nose) → **Kick**
  - Move left hand to the left 25% of the screen → **Snare**
  - Spread both hands wider than shoulder width → **Hi-hat**

- **Finger Gesture → Lead Synth**
  - Thumb + index finger **pinch** is detected using MediaPipe Hands
  - The **vertical position** of the pinch controls the pitch (C4 ~ C5)

- **Live Visualization**
  - WebCam video is drawn on a Canvas
  - Body keypoints (MoveNet) and hand landmarks (MediaPipe Hands) are rendered for debugging and interaction feedback

---

## 🧱 Tech Stack

- **Frontend**: React (Create React App)
- **Pose Detection (Body)**: `@tensorflow-models/pose-detection` (MoveNet)
- **Hand Tracking (Finger)**: `@tensorflow-models/hand-pose-detection` + `@mediapipe/hands`
- **Audio Engine**: `tone`
  - MembraneSynth → Kick
  - NoiseSynth → Snare
  - MetalSynth → Hi-hat
  - Synth → Lead note

---

## 🔧 Getting Started

### 1. Install

```bash
npm install

필요 라이브러리:

npm install @tensorflow/tfjs @tensorflow-models/pose-detection
npm install @tensorflow-models/hand-pose-detection @mediapipe/hands
npm install tone

2. Run Dev Server

npm start

브라우저에서 자동으로 http://localhost:3000 이 열립니다.

---

🎹 How to Play

1. Click "Start (카메라 + 오디오 허용)"

   • 브라우저 카메라 권한을 허용해야 합니다.

2. 카메라 프레임 안에 상반신과 손이 잘 보이도록 위치합니다.

3. 아래 제스처를 시도해 보세요.

Body Gestures (Drums)

• Right hand up (above nose) → Kick
• Left hand to the left side (x < 25% width) → Snare
• Both hands spread wider than shoulder width → Hi-hat

Finger Gesture (Lead)

• Thumb + Index finger pinch

  • Pinch distance가 작아질수록 핀치로 인식
  • 화면에서 손의 높이(y) 에 따라 음계가 바뀜 (C4 ~ C5)

---

⚠️ Notes

• 조명이 너무 어두우면 포즈 인식/손 인식이 잘 안될 수 있습니다.
• Chrome / Edge 브라우저를 권장합니다.
• WebGL 및 MediaPipe 모델을 사용하므로, 첫 로딩에 시간이 조금 걸릴 수 있습니다.

---

📂 Project Structure (Simplified)

src/
 ├─ App.js        # Main React component (camera, pose, hand, audio logic)
 ├─ App.css       # Layout & UI styles
 └─ index.js      # React entry point

---

🧪 Future Ideas

• Gesture mapping을 JSON 설정으로 분리해서, 제스처/음 매핑을 UI에서 편집
• Drum pattern 시퀀서 + 루프 기능 추가
• Filter, reverb, pan 등을 손 위치에 매핑하여 FX 컨트롤
• 기록된 제스처를 기반으로 "Gesture Performance" 리플레이 기능