https://github.com/saganaki22/hand-dance
An interactive psychedelic art generator using real-time hand tracking to create mesmerizing visual effects and particle animations.
https://github.com/saganaki22/hand-dance
camera computer-vision hand-tracking html5 interactive-art javascript mediapipe mobile-friendly particle-effects psychedelic real-time responsive webgl
Last synced: 2 months ago
JSON representation
An interactive psychedelic art generator using real-time hand tracking to create mesmerizing visual effects and particle animations.
- Host: GitHub
- URL: https://github.com/saganaki22/hand-dance
- Owner: Saganaki22
- License: apache-2.0
- Created: 2025-06-05T21:07:36.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-05T22:13:02.000Z (about 1 year ago)
- Last Synced: 2025-06-17T08:07:28.391Z (about 1 year ago)
- Topics: camera, computer-vision, hand-tracking, html5, interactive-art, javascript, mediapipe, mobile-friendly, particle-effects, psychedelic, real-time, responsive, webgl
- Language: HTML
- Homepage: https://drbaph.is-a.dev/Hand-dance/
- Size: 340 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hand Dance
[**🚀 Live Demo**](https://drbaph.is-a.dev/Hand-dance/)
---
---
## ✨ Features
Hand Dance is an interactive psychedelic art generator that transforms hand movements into mesmerizing visual effects using real-time computer vision. Simply show your hands to the camera and watch as your fingertips create stunning particle animations.
### Visual Effects
- **Kaleidoscope** - 4-way symmetrical patterns that mirror your movements
- **Spiral Galaxy** - Swirling cosmic patterns following your hands
- **Fireworks** - Explosive bursts emanating from fingertips
- **Liquid Flow** - Fluid, flowing particles with physics simulation
- **Mandala** - 8-way sacred geometry patterns
- **Aurora** - Northern lights effect with ethereal trails
- **Plasma Storm** - Electric energy fields and lightning effects
- **Water Waves** - Ripple waves expanding from fingertips
### Interactive Controls
- **Opacity Control** - Adjust transparency of effects and camera overlay
- **Rotation Speed** - Control particle rotation and swirl intensity
- **Animation Speed** - Modify particle movement velocity
- **Particle Density** - Adjust the number of particles generated
- **Camera Toggle** - Show/hide camera feed behind effects
- **Landmarks Toggle** - Display hand tracking points for debugging
- **Fullscreen Mode** - Immersive full-screen experience
- **FPS Monitor** - Real-time performance indicator
### Technical Features
- Real-time hand tracking using MediaPipe
- Supports up to 2 hands simultaneously
- Mobile-responsive design with touch controls
- Optimized performance for smooth 60fps rendering
- Advanced particle systems with physics simulation
- Multiple blend modes for different visual effects
- Adaptive quality based on device capabilities
## 🚀 Getting Started
### Prerequisites
- Modern web browser with camera support
- Camera permissions enabled
- Stable internet connection (for MediaPipe CDN)
### Installation
1. **Download or Clone**
```bash
git clone https://github.com/yourusername/hand-dance.git
cd hand-dance
```
2. **Serve the Files**
Since the app uses MediaPipe from CDN, you can simply open `index.html` in your browser, or serve it using any web server:
```bash
# Using Python
python -m http.server 8000
# Using Node.js
npx serve .
# Using PHP
php -S localhost:8000
```
3. **Open in Browser**
Navigate to `http://localhost:8000` and allow camera permissions when prompted.
## 🎮 Usage
1. **Camera Setup** - Allow camera access when prompted
2. **Hand Position** - Hold your hands in front of the camera
3. **Effect Selection** - Use the dropdown menu to choose different visual effects
4. **Customize** - Adjust sliders for opacity, rotation, speed, and particle density
5. **Controls** - Toggle camera visibility, landmarks, and fullscreen mode
6. **Mobile** - Works on mobile devices with touch controls
### Tips for Best Results
- Ensure good lighting for optimal hand detection
- Keep hands within the camera frame
- Try different effects with various hand movements
- Adjust particle density based on your device performance
- Use fullscreen mode for immersive experience
## 🛠️ Technical Details
### Dependencies
- **MediaPipe Hands** - Google's hand tracking solution
- **HTML5 Canvas** - For rendering particles and effects
- **WebRTC** - Camera access and video streaming
### Browser Compatibility
- Chrome 88+ (Recommended)
- Firefox 85+
- Safari 14+
- Edge 88+
- Mobile browsers with camera support
### Performance Optimization
- Adaptive particle limits based on device type
- Efficient particle culling and lifecycle management
- Frame rate monitoring and adjustment
- Mobile-specific optimizations
### Architecture
- **MediaPipe Integration** - Hand landmark detection
- **Particle System** - Custom physics engine for effects
- **Effect Engine** - Modular system for different visual modes
- **Responsive UI** - Touch-friendly controls and mobile optimization
## 📱 Mobile Support
Hand Dance is fully optimized for mobile devices with:
- Touch-friendly interface
- Responsive layout adaptation
- Performance optimization for mobile GPUs
- Gesture-based controls
- Portrait and landscape support
## 🎨 Effect Details
Each effect uses different particle behaviors and rendering techniques:
- **Symmetrical Effects** (Kaleidoscope, Mandala) use mathematical transformations
- **Physics-Based Effects** (Flow, Waves) simulate real-world physics
- **Explosive Effects** (Fireworks, Plasma) use radial particle emission
- **Organic Effects** (Aurora, Spiral) use smooth, flowing animations
## 🔧 Customization
The application supports extensive customization through:
- Real-time parameter adjustment
- Effect switching without restart
- Camera overlay control
- Performance monitoring
- Debug visualization
## 📊 Performance
Optimized for smooth performance across devices:
- **Desktop**: 60fps at 1080p with high particle density
- **Mobile**: 30-60fps with adaptive quality
- **Low-end devices**: Automatic quality reduction for stable performance
---
