S_Trope: Un Zoótropo Digital
Krpano más allá del 360°: una máquina interactiva que fusiona analógico y digital, reproduciendo animaciones musicales de los años 20 con un zoótropo construido con JavaScript, CSS y Howler.js.
Un proyecto artístico y técnico donde exploramos hasta dónde puede llegar krpano cuando lo sacas del mundo 360° — y extrajimos técnicas que ahora aplicamos en proyectos reales.
- Investigación de los límites de krpano fuera de su uso habitual en 360° y 3D
- Motor de audio con Howler.js — elige canción, ajusta velocidad y volumen
- CSS con posicionamiento absoluto y relativo para simular mecánica analógica
Qué es la S_Trope Machine?
Un dispositivo digital que fusiona el mundo analógico y el digital. Reproduce música y muestra imágenes al estilo antiguo — secuencias animadas con la música popular de los años 20.
La aplicación es completamente interactiva y funciona como un juego: ¿qué es y cómo funciona este artefacto? Lo descubrirás cuando lo aciertes.
Cómo funciona
El mecanismo reproduce el principio de los zoótropos originales del siglo XIX, pero en digital.
El obturador
Una placa opaca que simula madera pasa delante de la tira de imágenes a una velocidad controlable por el usuario. Cuando la velocidad del obturador es suficientemente alta, la alternancia rápida entre opaco y visible provoca el fenómeno de la persistencia retiniana — el cerebro deja de percibir el parpadeo individual e interpreta las imágenes como un flujo continuo.
La tira de animación
Paralelamente, una tira circular de imágenes rota a velocidad constante y ajustable. Cada fotograma de la tira representa un instante de la animación original.
El punto dulce
El efecto de animación solo se produce cuando las dos velocidades encuentran su equilibrio: la del obturador y la de la tira. Si el obturador va demasiado lento, se ve el parpadeo. Si la tira no está sincronizada, la imagen se deforma o salta. Cuando todo encaja — aparece la animación fluida, exactamente como en un zoótropo real.
El audio
La música se gestiona con Howler.js. El sonido se representa visualmente como una forma de onda que acompaña la reproducción. La velocidad de la música está ligada a la velocidad de rotación de la tira — si aceleras la tira, el sonido se acelera; si la frenas, se ralentiza. Exactamente como ocurriría con un disco de vinilo real. El usuario elige la canción, y el motor de audio se encarga de la sincronización.
El flujo de uso
- Elige una canción de los años 20
- Enciende la máquina
- Ajusta la velocidad del obturador hasta que desaparezca el parpadeo
- Sincroniza la velocidad de la tira hasta conseguir la animación fluida
- Ajusta el volumen si quieres
- Disfruta de la animación
Del laboratorio al cliente
Las técnicas que descubrimos en este experimento las hemos acabado aplicando en proyectos reales:
- Gestión avanzada de layers — composiciones de múltiples capas con z-index preciso, útil para tours virtuales con elementos interactivos superpuestos
- Animaciones por fotogramas — transiciones frame-by-frame dentro de krpano, aplicadas a presentaciones de producto y experiencias inmersivas
- Sincronización audio-visual — eventos de audio ligados a acciones visuales, integrado en tours con narración y música ambiente
Lo que empezó como una prueba técnica de una hora acabó siendo uno de los experimentos que más técnicas nos ha aportado para proyectos reales.
