hacklab/FOSFENO
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mapping in-browser (Fase 1) + trabajo en curso

Browse source 
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>
This commit is contained in:
hacklab 2026-07-27 00:19:30 +02:00
parent 0b1546cecc
commit 8dd58bb293
12 changed files with 1815 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/stage/index.html
View file

@ -14,6 +14,9 @@
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;
@ -41,6 +44,7 @@
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>
@ -58,12 +62,16 @@
<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>