Gesture-Particles

A real-time hand gesture visualization project using MediaPipe Hands and Three.js. Tracks hand movements through a webcam and generates interactive 3D particle effects, demonstrating the integration of computer vision with creative web graphics.

✨ Gesture Particles

A real-time interactive web application that combines MediaPipe Hands and Three.js to create stunning particle effects that respond to hand gestures captured through a webcam.

🚀 Features

• 🖐️ Real-time hand tracking
• ✨ Interactive particle effects
• 🎥 Live webcam integration
• 🌐 Built entirely with JavaScript
• ⚡ Smooth 3D rendering using Three.js
• 🧠 AI-powered gesture detection with MediaPipe

🛠️ Technologies Used

• HTML5
• CSS3
• JavaScript (ES6)
• Three.js
• MediaPipe Hands
• WebRTC (Camera Access)

📂 Project Structure

Gesture-Particles/
│── index.html
│── main.js
│── README.md

▶️ Getting Started

1. Clone the repository:

git clone https://github.com/your-username/gesture-particles.git

2. Open the project folder.

3. Launch the project using a local server (such as VS Code Live Server).

4. Allow camera access when prompted.

5. Move your hand in front of the webcam to interact with the particle system.

💡 Project Purpose

This project demonstrates how computer vision can be combined with modern web graphics to build immersive, gesture-controlled experiences. It serves as a practical example of integrating AI-based hand tracking with creative visualizations.

📜 License

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

<title>Gesture Particles</title> <style> body { margin: 0; overflow: hidden; background: black; }

video {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 200px;
  border: 2px solid white;
  z-index: 10;
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script> <script src="main.js"></script>