S_Trope: Un Zoòtrop Digital
Krpano més enllà del 360°: una màquina interactiva que fusiona analògic i digital, reproduint animacions musicals dels anys 20 amb un zoòtrop construït amb JavaScript, CSS i Howler.js.
Un projecte artístic i tècnic on vam explorar fins on pot arribar krpano quan el treus del món 360° — i en vam treure tècniques que ara apliquem en projectes reals.
- Investigació dels límits de krpano fora del seu ús habitual en 360° i 3D
- Motor d'àudio amb Howler.js — tria cançó, ajusta velocitat i volum
- CSS amb posicionament absolut i relatiu per simular mecànica analògica
Què és la S_Trope Machine?
Un dispositiu digital que fusiona el món analògic i el digital. Reprodueix música i mostra imatges a l'estil antic — seqüències animades amb la música popular dels anys 20.
L'aplicació és completament interactiva i funciona com un joc: què és i com funciona aquest artefacte? Ho descobriràs quan ho encertis.
Com funciona
El mecanisme reprodueix el principi dels zoòtrops originals del segle XIX, però en digital.
L'obturador
Una placa opaca que simula fusta passa davant de la tira d'imatges a una velocitat controlable per l'usuari. Quan la velocitat de l'obturador és prou alta, l'alternança ràpida entre opac i visible provoca el fenomen de la persistència retiniana — el cervell deixa de percebre el parpelleig individual i interpreta les imatges com un flux continu.
La tira d'animació
Paral·lelament, una tira circular d'imatges rota a velocitat constant i ajustable. Cada fotograma de la tira representa un instant de l'animació original.
El punt dolç
L'efecte d'animació només es produeix quan les dues velocitats troben el seu equilibri: la de l'obturador i la de la tira. Si l'obturador va massa lent, es veu el parpelleig. Si la tira no està sincronitzada, la imatge es deforma o salta. Quan tot encaixa — apareix l'animació fluida, exactament com en un zoòtrop real.
L'àudio
La música es gestiona amb Howler.js. El so es representa visualment com una forma d'ona que acompanya la reproducció. La velocitat de la música està lligada a la velocitat de rotació de la tira — si acceleres la tira, el so s'accelera; si la frenes, s'alenteix. Exactament com passaria amb un disc de vinil real. L'usuari tria la cançó, i el motor d'àudio s'encarrega de la sincronització.
El flux d'ús
- Tria una cançó dels anys 20
- Engega la màquina
- Ajusta la velocitat de l'obturador fins que desaparegui el parpelleig
- Sincronitza la velocitat de la tira fins aconseguir l'animació fluida
- Ajusta el volum si vols
- Gaudeix de l'animació
Del laboratori al client
Les tècniques que vam descobrir en aquest experiment les hem acabat aplicant en projectes reals:
- Gestió avançada de layers — composicions de múltiples capes amb z-index precís, útil per a tours virtuals amb elements interactius sobreposats
- Animacions per fotogrames — transicions frame-by-frame dins de krpano, aplicades a presentacions de producte i experiències immersives
- Sincronització àudio-visual — events d'àudio lligats a accions visuals, integrat en tours amb narració i música ambient
El que va començar com una prova tècnica d'una hora va acabar sent un dels experiments que més tècniques ens ha aportat per a projectes reals.
