"From blank canvas to a physics-based, hand-tracking engine in exactly 59.3 seconds."
This project is a real-time, interactive 3D particle system controlled entirely by hand gestures. It was architected and coded using Google's Gemini 3.0 inside AI Studio via advanced prompt engineering.
The application utilizes MediaPipe for skeletal hand tracking and Three.js for high-performance WebGL rendering, mapping 2D hand coordinates to a 3D volumetric space.
Ensure your webcam is enabled. The system detects your hand landmarks to drive the physics engine.
| Gesture | Action | Visual Effect |
|---|---|---|
| 🖐 Open Hand | Navigation | Rotate the particle universe and position the center. |
| 👌 Pinch (Thumb + Index) | Morph Shape | Transforms particles into complex geometries (Sphere → Heart → Saturn → Flower → Torus). |
| ✊ Closed Fist | Implode | Triggers a physics collapse (implosion), shrinking the universe. |
- AI Architect: Google Gemini 3.0 (via Google AI Studio)
- Rendering Engine: Three.js (WebGL)
- Computer Vision: MediaPipe Hands (Client-side ML)
- Language: JavaScript (ES6+), HTML5
This code was not manually written line-by-line. It was generated using a single, comprehensive prompt structure that defined:
- Context: "Expert Creative Technologist"
- Constraints: Single file, CDN links only, no build steps.
- Logic: Mapping specific MediaPipe landmarks (Tips 4 & 8) to Three.js vector attributes.
- Math: Parametric equations for the "Heart" and "Rose Curve" shapes.
Generation Time: 59.3 Seconds.
No installation required! This is a vanilla JS project.
- Clone the repo:
git clone [https://github.com/YOUR_USERNAME/gemini-particle-system.git](https://github.com/YOUR_USERNAME/gemini-particle-system.git)
- Open
index.htmlin your browser.- Note: For MediaPipe to work correctly locally, it is recommended to use a local server (like Live Server in VS Code) due to browser security policies regarding webcams.
MIT License. Feel free to use this as a base for your own AI experiments!
Muhammad Zeeshan Islam
Co-Founder – Unicodrex | Technical Associate – Skill Sprint
