Interactive 3D Particle System with Hand Tracking

A real-time, interactive 3D particle simulation that responds to hand gestures using Three.js and MediaPipe Hands.

🌟 Features

• Real-time Hand Tracking: Control particles with your hand movement.
• Dynamic Shape Switching: Change particle formations using hand gestures.
  • ❤️ Heart: Victory Sign (Peace)
  • 🌸 Flower: Open Palm
  • 🪐 Saturn: Rock Sign (Index + Pinky)
  • 🎆 Firework: Index Finger Pointing
• Interactive Physics:
  • Pinch to expand particles.
  • Fist to change color modes.
• Visual Effects: Beautiful Bloom/Glow effects using Three.js Post-processing.

🚀 How to Run

Since this project uses ES Modules, you cannot simply double-click index.html. You must serve it via a local web server.

Option 1: VS Code Live Server (Recommended)

1. Install the "Live Server" extension in VS Code.
2. Right-click index.html and select "Open with Live Server".

Option 2: Python

If you have Python installed:

# Run inside the project folder
python -m http.server
# Open http://localhost:8000 in your browser

Option 3: Node.js (http-server)

npx http-server .

🎮 Controls

Ensure you allow Camera Access when prompted.

Gesture	Action
Move Hand	Moves the center of the particle cloud.
Pinch (Thumb + Index)	Expands/Scales the particle system.
Victory Sign (✌️)	Form a Heart shape.
Open Palm (🖐)	Form a Flower shape.
Rock Sign (🤘)	Form Saturn (Planet + Ring).
Pointing Up (☝️)	Trigger Firework/Explosion mode.
Closed Fist (✊)	Cycle through Rainbow Colors.

🛠️ Technologies

• Three.js: 3D Rendering & Particle System.
• MediaPipe Hands: Machine Learning for Hand Tracking.
• HTML5/CSS3: UI and Layout.

---

📝 Arabic Description (وصف المشروع)

مشروع نظام جزئيات ثلاثي الأبعاد تفاعلي يعتمد على تتبع حركة اليد باستخدام الكاميرا.

• التقنيات: Three.js و MediaPipe.
• كيفية التشغيل: يجب تشغيل الملفات عبر سيرفر محلي (مثل Live Server).
• التحكم:
  • ✌️ علامة النصر: شكل قلب.
  • 🖐 يد مفتوحة: شكل وردة.
  • 🤘 علامة الروك: كوكب زحل.
  • ✊ قبضة يد: تغيير الألوان.