Mambo DVD
Salvapantallas tipo logo de DVD: Mambo rebota en bucle por la pantalla, cambia de color y suena en cada rebote. Cuando cae justo en una esquina, esa esquina se queda encendida con el color exacto del golpe.
Cómo abrirlo
Doble clic en index.html. No necesita servidor ni instalar nada.
El navegador no deja reproducir audio sin una interacción previa, por eso la portada pide un clic en Iniciar antes de arrancar.
Controles
| Tecla | Acción |
|---|---|
Espacio |
Pausar y reanudar (también funciona haciendo clic) |
S |
Probar el sonido |
E |
Precisión de esquina: Normal · Generosa · Real |
C |
Modo de color: Tinte · Sólido · Original |
F |
Pantalla completa |
+ / − |
Velocidad, de 0.25× a 4× |
R |
Reiniciar contadores y trayectoria |
H |
Ocultar el HUD |
Modos de color
- Tinte — gira el matiz del peluche conservando la ilustración.
- Sólido — silueta plana de un color, que es lo que hacía el logo original.
- Original — sin recoloreo.
Precisión de esquina
Una esquina exacta significa rebotar en los dos ejes en el mismo fotograma, y eso casi nunca pasa: en pruebas a 1920×1080 con margen fijo de 15 px salieron 0 esquinas en 60 segundos. Por eso la tolerancia es un porcentaje del lado menor de la ventana y no un valor en píxeles.
- Real (0.8 %) — purista, pueden pasar muchos minutos.
- Normal (4.5 %) — por defecto, una esquina cada pocos minutos.
- Generosa (11 %) — para verlo seguido.
Archivos
| Archivo | Qué hace |
|---|---|
index.html |
Estructura: escenario, sprite, HUD y portada |
styles.css |
Paleta OSD de reproductor de DVD, animaciones de impacto |
app.js |
Física del rebote, detección de esquina, color y audio |
Mambo_png.png |
El sprite |
mambo_audio.ogg |
El sonido del rebote |
Detalles de implementación
- El movimiento va por delta de tiempo, no por fotograma, así que se ve igual a 60 Hz que a 144 Hz. El delta se acota a 50 ms para que volver de una pestaña en segundo plano no provoque un salto.
- El modo Sólido se pinta en canvas con
source-in, no conmask-image. Las máscaras CSS pasan por CORS y enfile://(origennull) el sprite quedaba invisible. El canvas solo compone y nunca lee píxeles, así que el taint no molesta. - El desbloqueo de audio reproduce en silencio y deja terminar el clip. La
versión con
pause()abortaba el golpe real que cayera dentro de esa ventana y lo perdía con unAbortError. - El color avanza con el ángulo áureo (137.508°) para que dos rebotes seguidos nunca den colores parecidos.