8dd58bb293
Projection mapping editable desde el navegador, sin herramientas externas: - web/stage/mapper.js (nuevo): compositor WebGL que texturiza el motor activo sobre superficies deformables (homografia por vertice: keystone correcto). - Editor con raton en el escenario (crear, arrastrar esquinas, mover, borrar) y previsualizacion arrastrable en el panel (raton/tactil) para editar desde el movil sin tocar la ventana de visuales. - Backend: estado "mapping" + evento set_mapping, persistido en data/mapping.json (ignorado en git). Seccion "Mapping" en el panel + texto de ayuda. - Solo motores web (butterchurn/hydra/shaders/mixer); projectM no se mapea. - .gitignore: excluye config de runtime (mapping.json, pm-favoritos.json). Incluye ademas trabajo en curso previo sin commitear (server.py, stage.js, panel.js/css, ayuda.json, hydra-sketches.json, problemas.md, start-projectm.sh), subido junto a peticion del autor. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
77 lines
2.8 KiB
HTML
77 lines
2.8 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>
|
|
<script src="/lib/hydra-synth.js"></script>
|
|
<script src="/stage/mapper.js"></script>
|
|
<script src="/stage/stage.js"></script>
|
|
</body>
|
|
</html>
|