Description
Title: Firefly Garden
Description: Firefly Garden is an interactive art installation that fuses computer vision, voice recognition, musical sound generation, and real-time graphics to create a dynamic virtual garden. Users can generate three types of flowers through hand gestures in front of a webcam, voice commands, or mouse clicks. Flowers transform into fireflies after 10 seconds, creating a constantly evolving digital ecosystem.
🔧 Technologies:
p5.js: Renders organic flowers with fluid petals, geometric flowers, and fantasy flowers with particles, fireflies, and dynamic gradients on a responsive 2D canvas.
ml5.js: Uses the Handpose model to detect specific gestures: open palm (organic flowers), pinch (geometric flowers), and fist (fantasy flowers).
p5.speech: Provides bilingual audio feedback (Spanish/English) with detailed descriptions of garden events.
Web Audio API: Musical audio system with harmonic progressions, pentatonic chords, reverb, delay, and dynamic compression.
p5.sound: Plays ambient background music for an immersive experience.
🌺 Flower Types:
Organic: Fluid petals with Bézier curves and natural animations. Created with open palm or click on left third of screen.
Geometric: Defined shapes with symmetrical petals and constant rotation. Created with pinch gesture or click on center third.
Fantasy: Multiple layers with floating particles and special effects. Created with closed fist or click on right third.
🎵 Musical Audio System:
Harmonic Chords: 6-chord progression that changes every 8 seconds (C major, D minor, E minor, F major, G major, A minor).
Flower Sounds: Each flower type plays different tones from the current chord with reverb and delay.
Firefly Ambient: Continuous low tone that intensifies with more fireflies.
Effects: Natural reverb, delay with feedback, dynamic compression, and stereo positioning.
♿ Inclusive Features:
Multimodal interaction: Specific hand gestures, bilingual voice commands, and mouse clicks.
High contrast mode: Activated with 'h', improves visibility with white colors on dark background.
Simplified mode: Activated with 'm', clearer and more defined shapes for better visual understanding.
Bilingual support: Spanish and English with dynamic switching using 'l' or voice command.
Audio feedback: Detailed descriptions of all actions and events.
Pace control: Adjust waiting time between flowers ('+' increases, '-' reduces).
🗣️ Voice Commands (English):
"create flower" - Creates organic flower
"geometric flower" - Creates geometric flower
"fantasy flower" - Creates fantasy flower
"high contrast" - Toggles high contrast mode
"simple mode" - Toggles simplified mode
"musical audio" - Toggles audio system
"music" - Pauses/resumes background music
"reset" - Clears the garden
"change language" - Changes to Spanish
⌨️ Keyboard Controls:
h: High contrast
m: Simplified mode
a: Musical audio
l: Change language
p: Pause/resume music
v: Voice recognition
s: Voice synthesis
r: Reset garden
i: Show/hide info
+: Increase cooldown
-: Decrease cooldown
👋 Hand Gestures:
Open palm: Organic flower
Pinch: Geometric flower
Fist: Fantasy flower
🖱️ Mouse Interaction:
Left third: Organic flower
Center third: Geometric flower
Right third: Fantasy flower
Advanced Technical Features: Particle system for fantasy flowers, mouse proximity detection for organic flower blooming, automatic memory management with 30 simultaneous flower limit, dynamic gradients that change according to flower/firefly balance, and spatial audio system with stereo positioning based on flower position.
Accessibility: Designed following universal design principles, with multiple interaction modalities, complete audio feedback, screen reader support, keyboard navigation, dynamic visual adjustments, and compatibility with assistive technologies. Complies with WCAG 2.1 AA standards.
Art by Daniel Oropeza
X: @ferdoropeza