Hand Tracking Simulator

A real-time hand tracking web application that uses your webcam to detect hand gestures and visualize finger touches. Built with MediaPipe Hands and Vite.

📸 Demo

Real-time hand tracking with LED indicators for finger touch detection

🌟 Features

• Real-time Hand Detection: Tracks up to 2 hands simultaneously using MediaPipe Hands
• Finger Touch Detection: Detects when thumb touches other fingers (index, middle, ring, pinky)
• Visual LED Indicators: Color-coded LED panels for left and right hands
• Live Video Feed: Mirrored camera view with hand landmark visualization
• Responsive Design: Modern, dark-themed UI with glassmorphism effects

🎯 How It Works

The application uses MediaPipe's hand tracking model to:

1. Detect hand landmarks in real-time from your webcam
2. Calculate distances between thumb tip and other fingertips
3. Activate corresponding LED indicators when fingers touch
4. Display visual connections on the video canvas

LED Color Coding

Each finger has a unique color when activated:

• Index Finger: Red 🔴
• Middle Finger: Blue 🔵
• Ring Finger: Green 🟢
• Pinky Finger: Magenta 🟣

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• A webcam
• Modern web browser (Chrome, Firefox, Edge)

Installation

1. Clone the repository:

git clone https://github.com/igungor06/Hand-Tracking-Simulator.git
cd Hand-Tracking-Simulator

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to the local server address (typically http://localhost:5173)

5. Allow webcam access when prompted

📦 Build for Production

To create a production build:

npm run build

To preview the production build:

npm run preview

🛠️ Technology Stack

• Vite: Fast build tool and development server
• MediaPipe Hands: Google's hand tracking solution
• Vanilla JavaScript: No framework overhead
• CSS3: Modern styling with animations and glassmorphism

📁 Project Structure

Hand-Tracking-Simulator/
├── src/
│   ├── main.js          # Main application logic
│   ├── style.css        # Styling and animations
│   ├── counter.js       # Utility functions
│   └── javascript.svg   # Assets
├── public/
│   └── vite.svg         # Public assets
├── index.html           # Entry HTML file
├── package.json         # Dependencies and scripts
└── README.md           # This file

🎮 Usage

1. Position Your Hands: Bring your hands into the webcam frame
2. Touch Gestures: Touch your thumb to any fingertip
3. Visual Feedback: Watch the corresponding LED light up and see the golden connection line on the video feed
4. Both Hands: Try using both hands simultaneously for dual tracking

🔧 Configuration

You can adjust the touch sensitivity by modifying the TOUCH_THRESHOLD constant in src/main.js:

const TOUCH_THRESHOLD = 0.08; // Lower = more sensitive, Higher = less sensitive

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• MediaPipe for the amazing hand tracking solution
• Vite for the blazing fast development experience

📧 Contact

Project Link: https://github.com/igungor06/Hand-Tracking-Simulator

---

Enjoy tracking your hands! 👋✨