🌸 Firefly Garden: Technical Description

Título: Firefly Garden

Descripción: Firefly Garden es una instalación artística interactiva que fusiona visión por computadora, reconocimiento de voz, generación de sonido musical y gráficos en tiempo real para crear un jardín virtual dinámico. Los usuarios pueden generar tres tipos de flores mediante gestos de mano frente a una webcam, comandos de voz o clics del ratón. Las flores se transforman en luciérnagas tras 10 segundos, creando un ecosistema digital que evoluciona constantemente.

🔧 Tecnologías:

  • p5.js: Renderiza flores orgánicas con pétalos fluidos, flores geométricas y flores fantasía con partículas, luciérnagas y gradientes dinámicos en un lienzo 2D responsivo.
  • ml5.js: Utiliza el modelo Handpose para detectar gestos específicos: palma abierta (flores orgánicas), pellizco (flores geométricas) y puño (flores fantasía).
  • p5.speech: Ofrece retroalimentación auditiva bilingüe (español/inglés) con descripciones detalladas de eventos del jardín.
  • Web Audio API: Sistema de audio musical con progresiones armónicas, acordes pentatónicos, reverb, delay y compresión dinámica.
  • p5.sound: Reproduce música ambiental de fondo para una experiencia inmersiva.

🌺 Tipos de Flores:

  • Orgánicas: Pétalos fluidos con curvas Bézier y animaciones naturales. Se crean con palma abierta o clic en el tercio izquierdo de la pantalla.
  • Geométricas: Formas definidas con pétalos simétricos y rotación constante. Se crean con gesto de pellizco o clic en el tercio central.
  • Fantasía: Múltiples capas con partículas flotantes y efectos especiales. Se crean con puño cerrado o clic en el tercio derecho.

🎵 Sistema de Audio Musical:

  • Acordes Armónicos: Progresión de 6 acordes que cambia cada 8 segundos (Do mayor, Re menor, Mi menor, Fa mayor, Sol mayor, La menor).
  • Sonidos de Flores: Cada tipo de flor reproduce diferentes tonos del acorde actual con reverb y delay.
  • Ambiente de Luciérnagas: Tono grave continuo que se intensifica con más luciérnagas.
  • Efectos: Reverb natural, delay con feedback, compresión dinámica y posicionamiento estéreo.

♿ Funcionalidades Inclusivas:

  • Interacción multimodal: Gestos específicos de manos, comandos de voz bilingües y clics del ratón.
  • Modo de alto contraste: Activado con 'h', mejora la visibilidad con colores blancos sobre fondo oscuro.
  • Modo simplificado: Activado con 'm', formas más claras y definidas para mejor comprensión visual.
  • Soporte bilingüe: Español e inglés con cambio dinámico usando 'l' o comando de voz.
  • Retroalimentación auditiva: Descripciones detalladas de todas las acciones y eventos.
  • Control de ritmo: Ajuste del tiempo de espera entre flores ('+' aumenta, '-' reduce).

🗣️ Comandos de Voz (Español):

  • "crear flor" - Crea flor orgánica
  • "flor geométrica" - Crea flor geométrica
  • "flor fantasía" - Crea flor fantasía
  • "alto contraste" - Activa/desactiva alto contraste
  • "modo simple" - Activa/desactiva modo simplificado
  • "audio musical" - Activa/desactiva sistema de audio
  • "música" - Pausa/reanuda música de fondo
  • "reiniciar" - Limpia el jardín
  • "cambiar idioma" - Cambia a inglés

⌨️ Controles de Teclado:

  • h: Alto contraste
  • m: Modo simplificado
  • a: Audio musical
  • l: Cambiar idioma
  • p: Pausar/reanudar música
  • v: Reconocimiento de voz
  • s: Síntesis de voz
  • r: Reiniciar jardín
  • i: Mostrar/ocultar info
  • +: Aumentar tiempo de espera
  • -: Reducir tiempo de espera

👋 Gestos de Mano:

  • Palma abierta: Flor orgánica
  • Pellizco: Flor geométrica
  • Puño: Flor fantasía

🖱️ Interacción con Mouse:

  • Tercio izquierdo: Flor orgánica
  • Tercio central: Flor geométrica
  • Tercio derecho: Flor fantasía

Características Técnicas Avanzadas: Sistema de partículas para flores fantasía, detección de proximidad del mouse para florecimiento de flores orgánicas, gestión automática de memoria con límite de 30 flores simultáneas, gradientes dinámicos que cambian según el equilibrio flores/luciérnagas, y sistema de audio espacial con posicionamiento estéreo basado en la posición de las flores.

Accesibilidad: Diseñado siguiendo principios de diseño universal, con múltiples modalidades de interacción, retroalimentación auditiva completa, soporte para lectores de pantalla, navegación por teclado, ajustes visuales dinámicos y compatibilidad con tecnologías asistivas. Cumple con estándares WCAG 2.1 AA.

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.