f017246f0e
Mapping - Los clips salian del reves: mapper.js activaba UNPACK_FLIP_Y_WEBGL, pero el modelo va con origen arriba-izquierda y texImage2D ya sube la primera fila en t=0, asi que el flip la mandaba al final. Comprobado renderizando el mapper real en Chromium headless con una fuente mitad roja / mitad azul. - projectM se puede usar YA en una capa: los .milk de data/presets-projectm se traducen a Butterchurn en el navegador al elegirlos (milkdrop-preset- converter). La capa MilkDrop gana 'biblioteca' (butter | projectm) sin cambiar su firma, para no recrear el contexto WebGL al cambiar de una a otra. Medido: 100/100 presets de una muestra convierten, 84/84 de los que llevan shaders warp/comp; ~7 ms por preset. - Cada capa tiene su pestana arriba y su propia vista, y '+ CAPA' crea una y entra en ella: con varias capas, ir y volver a MAPPING no era viable. - Dos capas MilkDrop sin preset ya no salen identicas (cogian el indice 0): cada instancia elige uno al azar y lo escribe en el estado. - Una capa nueva ya no nace en la fuente "motor", que es el lienzo del motor activo y hacia que dos capas ensenaran lo mismo. Galeria de visuales - scripts/catalogar-visuales.py: ficha de cada clip (pelicula, personajes, duracion) y, sobre todo, si es una silueta de verdad y cuanta figura tiene. Distingue silueta de corte crudo por el negro puro del fondo: 0,63-0,90 frente a 0,04-0,06, sin zona gris. - El panel lista los clips agrupados por pelicula, con nombre legible y aviso de los que casi no tienen figura, en vez del nombre del archivo. - Soporte de siluetas con canal alfa (.webm VP9): transparencia de verdad, sin recorte por luminancia. El shader del mapper ya la respeta. Documentacion - docs/visuales.md nuevo; pendiente.md al dia con lo hecho y lo que queda. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
81 lines
3 KiB
HTML
81 lines
3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FOSFENO :: Escenario</title>
|
|
<style>
|
|
html, body {
|
|
margin: 0; padding: 0; width: 100%; height: 100%;
|
|
background: #000; overflow: hidden; cursor: none;
|
|
}
|
|
canvas {
|
|
position: absolute; top: 0; left: 0;
|
|
width: 100vw; height: 100vh; display: none;
|
|
}
|
|
canvas.visible { display: block; }
|
|
/* Mapper: salida deformada (encima de los motores) y capa de edición */
|
|
#output { z-index: 5; }
|
|
#mapedit { z-index: 6; background: transparent; }
|
|
#msg {
|
|
position: absolute; top: 50%; left: 0; right: 0;
|
|
transform: translateY(-50%); text-align: center;
|
|
color: #2a2a35; font-family: monospace; font-size: 2vw;
|
|
letter-spacing: 0.3em;
|
|
}
|
|
/* Pantalla de conexion: se muestra hasta que alguien abre el panel */
|
|
#info {
|
|
position: absolute; inset: 0; display: none;
|
|
flex-direction: column; align-items: center; justify-content: center;
|
|
gap: 2.2vh; background: #050805;
|
|
font-family: "Segoe UI", system-ui, sans-serif;
|
|
}
|
|
.info-title {
|
|
color: #b4ff00; font-size: 5vh; font-weight: 800; letter-spacing: 0.4em;
|
|
text-shadow: 0 0 24px rgba(180, 255, 0, 0.6);
|
|
}
|
|
.info-text { color: #cfe8ad; font-size: 2.8vh; }
|
|
.info-url {
|
|
color: #ff9d2a; font-size: 4.4vh; font-weight: 800; font-family: monospace;
|
|
text-shadow: 0 0 18px rgba(255, 157, 42, 0.5);
|
|
}
|
|
.info-qr {
|
|
width: 34vh; height: 34vh; background: #fff;
|
|
padding: 1.6vh; border-radius: 1.4vh; image-rendering: pixelated;
|
|
}
|
|
.info-sub { color: #6f8a52; font-size: 2.3vh; font-family: monospace; }
|
|
#info { z-index: 20; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="msg">FOSFENO</div>
|
|
|
|
<!-- Pantalla de conexion (QR + direccion del panel) -->
|
|
<div id="info">
|
|
<div class="info-title">F O S F E N O</div>
|
|
<div class="info-text">Escanea el codigo con el movil, o abre la direccion:</div>
|
|
<div class="info-url" id="info-url">buscando direccion...</div>
|
|
<img id="info-qr" class="info-qr" alt="codigo QR del panel">
|
|
<div class="info-sub" id="info-sub"></div>
|
|
</div>
|
|
|
|
<canvas id="butterchurn"></canvas>
|
|
<canvas id="hydra"></canvas>
|
|
<canvas id="shaders"></canvas>
|
|
<!-- Mapper: salida deformada + capa de edición (encima de los motores) -->
|
|
<canvas id="output"></canvas>
|
|
<canvas id="mapedit"></canvas>
|
|
|
|
<script src="/lib/socket.io.min.js"></script>
|
|
<script src="/lib/qrcode.js"></script>
|
|
<script src="/lib/butterchurn.min.js"></script>
|
|
<script src="/lib/butterchurn-presets.min.js"></script>
|
|
<!-- Traduce los .milk de projectM a presets de Butterchurn, para poder
|
|
usar la biblioteca grande dentro de una capa del mapping -->
|
|
<script src="/lib/milkdrop-preset-converter.min.js"></script>
|
|
<script src="/lib/hydra-synth.js"></script>
|
|
<script src="/stage/layers.js"></script>
|
|
<script src="/stage/mapper.js"></script>
|
|
<script src="/stage/stage.js"></script>
|
|
</body>
|
|
</html>
|