Elsa's Ice Magic
(hand-tracking hand magic)
What started as a simple request to "be like Elsa" turned into a deep dive into browser-based computer vision. This experiment uses your webcam to track your hands in real-time, letting you summon ice crystals and play musical notes with just a wave of your hand.
By leveraging MediaPipe's advanced hand tracking and Three.js for high-performance 3D rendering, we created a digital "magic mirror." Each fingertip is assigned a piano note, and clenching your fist before spreading your fingers wide triggers a burst of magical ice particles that react to gravity and momentum.
Magical Features:
- Hand Tracking: Real-time detection of 21 hand landmarks using Google's MediaPipe.
- Gestural Spells: Special logic to detect a "fist-to-open" gesture for explosive ice magic.
- Fingertip Piano: Each finger trigger a different note (C-G), allowing you to play simple melodies in the air.
- Particle Physics: A custom Three.js engine handles hundreds of ice and sparkle particles with physics-based movement.
Keep Reading
Wortzug
Type to build words using a robotic arm to load up cargo trains in this playful and educational typing adventure.
Chronos
A mindful life-tracking tool to visualize your time in blocks, with dedicated modes for tracking time with your kids and parents.
DIBH Diver
A breath-controlled underwater obstacle game that calibrates your normal and deep breaths with OpenCV before you dive.