Capas independientes, projectM en el mapping y catalogo de la galeria
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>
This commit is contained in:
hacklab
parent
5d5223db9f
commit
f017246f0e
30 changed files with 3771 additions and 292 deletions
|
|
@ -9,15 +9,33 @@
|
|||
<link rel="stylesheet" href="/lib/codemirror/material-darker.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>FOSFENO</h1>
|
||||
<span id="conn" class="dot off" title="Conexion"></span>
|
||||
</header>
|
||||
<!-- Barra superior fija: titulo + pestanas + banda de avisos.
|
||||
Van juntas en un mismo bloque sticky para que el aviso quede siempre
|
||||
pegado debajo del titulo, aunque las pestanas salten de linea. -->
|
||||
<div class="topbar">
|
||||
<header>
|
||||
<h1>FOSFENO</h1>
|
||||
<!-- Dos zonas del panel: MOTORES (lo de siempre) y MAPPING (aparte,
|
||||
para que no se mezclen los controles de directo con los de
|
||||
encaje sobre la superficie fisica). -->
|
||||
<nav class="tabs" id="tabs">
|
||||
<button class="tab active" data-view="motores">MOTORES</button>
|
||||
<button class="tab" data-view="mapping">MAPPING<span
|
||||
id="tab-map-dot" class="tabdot" hidden></span></button>
|
||||
<!-- Una pestana por capa del mapping: se generan solas (renderTabsCapas)
|
||||
para poder saltar a editar cada capa sin pasar por MAPPING -->
|
||||
<span id="tabs-capas"></span>
|
||||
<button class="tab tabnew" id="tab-nueva-capa"
|
||||
title="Crear una capa nueva y abrirla">+ CAPA</button>
|
||||
</nav>
|
||||
<span id="conn" class="dot off" title="Conexion"></span>
|
||||
</header>
|
||||
|
||||
<!-- Banda de avisos: aqui aparece cualquier error o aviso -->
|
||||
<div id="notif" class="notif" hidden>
|
||||
<span id="notif-msg"></span>
|
||||
<button id="notif-close" aria-label="Cerrar aviso">×</button>
|
||||
<!-- Banda de avisos: aqui aparece cualquier error o aviso -->
|
||||
<div id="notif" class="notif" hidden>
|
||||
<span id="notif-msg"></span>
|
||||
<button id="notif-close" aria-label="Cerrar aviso">×</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- En movil las tarjetas van en una sola columna; en pantalla ancha,
|
||||
|
|
@ -148,38 +166,69 @@
|
|||
<p class="hint" id="editor-hint"></p>
|
||||
</section>
|
||||
|
||||
<!-- Mezclador VJ -->
|
||||
<!-- Mezclador VJ.
|
||||
Se lee de arriba abajo como dos capas: el FONDO (capa de abajo:
|
||||
camara o visuales Butter) y el CLIP de la galeria (capa de
|
||||
encima), mas la forma de juntarlos. El resumen de mas abajo
|
||||
dice en una linea que va a salir por el proyector. -->
|
||||
<section class="card" id="ctl-mixer" hidden>
|
||||
<div class="cardhead">
|
||||
<span class="label">Mezclador VJ</span>
|
||||
<button class="info" data-help="mixer">i</button>
|
||||
</div>
|
||||
|
||||
<!-- 1. Que se ve -->
|
||||
<span class="label">1 · Que se ve</span>
|
||||
<div class="seg" id="mixer-source">
|
||||
<button class="segbtn" data-src="cam">Camara</button>
|
||||
<button class="segbtn" data-src="video">Video</button>
|
||||
<button class="segbtn" data-src="mix">Mezcla</button>
|
||||
<button class="segbtn" data-src="cam">Solo el fondo</button>
|
||||
<button class="segbtn" data-src="video">Solo el clip</button>
|
||||
<button class="segbtn" data-src="mix">Los dos</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="label">Fondo (capa de abajo)</span>
|
||||
|
||||
<!-- 2. Fondo: capa de abajo -->
|
||||
<div class="row" id="mix-fondo-row">
|
||||
<span class="label">2 · Fondo (capa de abajo)</span>
|
||||
<select id="mix-fondo" class="inline">
|
||||
<option value="cam">Camara</option>
|
||||
<option value="butter">Visuales Butter (MilkDrop)</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="mix-cam"> Camara activada
|
||||
</label>
|
||||
<select id="mix-camera"><option value="0">Camara por defecto</option></select>
|
||||
<!-- Fondo = camara -->
|
||||
<div class="stack" id="mix-cam-block">
|
||||
<label class="check">
|
||||
<input type="checkbox" id="mix-cam"> Camara activada
|
||||
</label>
|
||||
<select id="mix-camera"><option value="0">Camara por defecto</option></select>
|
||||
</div>
|
||||
<!-- Fondo = visuales Butter: se elige aqui mismo el preset de
|
||||
MilkDrop que hace de fondo, sin salir del mezclador. -->
|
||||
<div class="stack" id="mix-bg-block" hidden>
|
||||
<select id="mix-bg-preset"><option>Cargando presets...</option></select>
|
||||
<div class="row">
|
||||
<button id="mix-bg-prev" class="cmd">« Anterior</button>
|
||||
<button id="mix-bg-next" class="cmd">Siguiente »</button>
|
||||
</div>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="mix-bg-shuffle"> Cambiar el fondo solo
|
||||
</label>
|
||||
<p class="hint">Es el mismo preset y el mismo cambio automatico del
|
||||
motor Butter: lo que elijas aqui queda elegido tambien alli.</p>
|
||||
</div>
|
||||
|
||||
<!-- 3. Clip de la galeria: capa de encima -->
|
||||
<span class="label" id="mix-clip-label">3 · Clip (capa de encima)</span>
|
||||
<select id="mix-video"><option value="">-- sin video --</option></select>
|
||||
<div class="row">
|
||||
<button id="mix-rescan" class="cmd">Actualizar lista</button>
|
||||
<button id="mix-upload-btn" class="cmd">Subir video o imagen</button>
|
||||
<span id="mix-upload-status" class="hint"></span>
|
||||
</div>
|
||||
<span id="mix-upload-status" class="hint"></span>
|
||||
<input type="file" id="mix-upload" hidden
|
||||
accept="video/*,image/jpeg,image/png,image/gif,image/webp">
|
||||
<div class="row">
|
||||
<span class="label">Modo de mezcla</span>
|
||||
|
||||
<!-- 4. Como se juntan las dos capas -->
|
||||
<div class="row" id="mix-blend-row">
|
||||
<span class="label">4 · Como se juntan</span>
|
||||
<select id="mix-blend" class="inline">
|
||||
<option value="recorte">Recorte (personaje delante)</option>
|
||||
<option value="blend">Fundido</option>
|
||||
|
|
@ -189,6 +238,10 @@
|
|||
<option value="layer">Capa</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Resumen en una linea de lo que sale por el proyector -->
|
||||
<p class="hint resumen" id="mix-resumen"></p>
|
||||
|
||||
<div id="mixer-sliders"></div>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="mix-invert"> Invertir colores
|
||||
|
|
@ -248,37 +301,165 @@
|
|||
deslizador relanza projectM (~1 s en negro).</p>
|
||||
</section>
|
||||
|
||||
<!-- Mapping (projection mapping) -->
|
||||
<section class="card" id="card-mapping">
|
||||
<!-- ===================== PESTANA MAPPING ===================== -->
|
||||
|
||||
<!-- Salida: encendido y previsualizacion -->
|
||||
<section class="card" id="card-mapping" data-vista="mapping">
|
||||
<div class="cardhead">
|
||||
<span class="label">Mapping</span>
|
||||
<button class="info" data-help="mapping">i</button>
|
||||
</div>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="map-enabled"> Activar mapping
|
||||
</label>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="map-edit"> Modo edicion (arrastrar en el escenario)
|
||||
</label>
|
||||
<div class="row">
|
||||
<button id="map-add" class="cmd accent">+ Superficie</button>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="map-enabled"> Activar mapping
|
||||
</label>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="map-edit"> Editar en el escenario
|
||||
</label>
|
||||
</div>
|
||||
<span class="label">Previsualizacion (arrastra los puntos)</span>
|
||||
<canvas id="map-preview"></canvas>
|
||||
<p class="hint">Arrastra los puntos para encajar cada capa en su sitio.
|
||||
Toca dentro de una capa para seleccionarla. Se guarda solo.</p>
|
||||
</section>
|
||||
|
||||
<!-- Capas: la lista, al estilo de una mesa de VJ -->
|
||||
<section class="card" id="card-capas" data-vista="mapping">
|
||||
<div class="cardhead">
|
||||
<span class="label">Capas</span>
|
||||
<button class="info" data-help="capas">i</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button id="map-add" class="cmd accent">+ Capa</button>
|
||||
<button id="map-add-mask" class="cmd">+ Mascara</button>
|
||||
<button id="map-reset" class="cmd">Reset</button>
|
||||
</div>
|
||||
<span class="label">Previsualizacion (arrastra los puntos)</span>
|
||||
<canvas id="map-preview"
|
||||
style="width:100%;aspect-ratio:16/9;background:#0a0a0a;border:1px solid #333;border-radius:6px;display:block;margin:6px 0;touch-action:none;cursor:crosshair;"></canvas>
|
||||
<div class="row" id="map-selbar" hidden>
|
||||
<span class="label" id="map-selinfo">Superficie seleccionada</span>
|
||||
<button id="map-sub-dec" class="cmd">− malla</button>
|
||||
<span id="map-sub-val" class="value">1x1</span>
|
||||
<button id="map-sub-inc" class="cmd">+ malla</button>
|
||||
</div>
|
||||
<p class="hint"><b>Capa</b> = una zona que PROYECTA algo (eliges que en
|
||||
Propiedades). <b>Mascara</b> = un recuadro negro que TAPA lo que haya
|
||||
debajo; no lleva visual.</p>
|
||||
<div id="map-list"></div>
|
||||
<p class="hint">Arrastra los puntos para deformar. Selecciona una
|
||||
superficie y usa <b>+ malla</b> para subdividir y <b>curvarla</b>.
|
||||
<b>+ Mascara</b> tapa zonas con un recuadro negro (recorta derrames
|
||||
de luz). Se guarda solo.</p>
|
||||
<p class="hint" id="map-list-vacio">Sin capas: con el mapping activado
|
||||
y ninguna capa, sale el motor a pantalla completa. Pulsa
|
||||
<b>+ Capa</b> para trocear la proyeccion en zonas.</p>
|
||||
</section>
|
||||
|
||||
<!-- Propiedades de la capa seleccionada -->
|
||||
<section class="card" id="card-propiedades" data-vista="mapping">
|
||||
<div class="cardhead">
|
||||
<span class="label" id="prop-titulo">Propiedades</span>
|
||||
<button class="info" data-help="fuentes">i</button>
|
||||
</div>
|
||||
|
||||
<p class="hint" id="prop-vacio">Selecciona una capa (en la lista o
|
||||
tocando dentro de ella en la previsualizacion) para elegir que
|
||||
visual se proyecta en esa zona.</p>
|
||||
|
||||
<div class="stack" id="prop-capa" hidden>
|
||||
<div class="row">
|
||||
<span class="label">Nombre</span>
|
||||
<input type="text" id="prop-nombre" class="txt" maxlength="24"
|
||||
placeholder="Capa">
|
||||
</div>
|
||||
|
||||
<span class="label">Que se proyecta aqui</span>
|
||||
<select id="prop-fuente">
|
||||
<option value="motor">El motor elegido en MOTORES</option>
|
||||
<option value="butter">Visuales MilkDrop (propias de esta capa)</option>
|
||||
<option value="shader">Shader GLSL</option>
|
||||
<option value="video">Clip o imagen de la galeria</option>
|
||||
<option value="camara">Camara</option>
|
||||
<option value="negro">Negro (tapar)</option>
|
||||
</select>
|
||||
|
||||
<!-- Ajustes propios de cada fuente -->
|
||||
<div class="stack fuente-op" id="fop-butter" hidden>
|
||||
<span class="label">Biblioteca de presets</span>
|
||||
<select id="prop-biblioteca">
|
||||
<option value="butter">Butterchurn — ~100 presets, los mas ligeros</option>
|
||||
<option value="projectm">projectM — tu biblioteca .milk (9795)</option>
|
||||
</select>
|
||||
|
||||
<!-- Biblioteca de Butterchurn -->
|
||||
<div class="stack" id="fop-bib-butter">
|
||||
<select id="prop-preset"><option>Cargando presets...</option></select>
|
||||
<div class="row">
|
||||
<button id="prop-preset-prev" class="cmd">« Anterior</button>
|
||||
<button id="prop-preset-next" class="cmd">Siguiente »</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Biblioteca de projectM: los .milk se traducen al vuelo -->
|
||||
<div class="stack" id="fop-bib-milk" hidden>
|
||||
<select id="prop-milk-cat"><option value="">-- categoria --</option></select>
|
||||
<select id="prop-milk-vis"><option value="">-- visual --</option></select>
|
||||
<select id="prop-milk-var"><option value="">-- variante --</option></select>
|
||||
<button id="prop-milk-azar" class="cmd">Uno al azar</button>
|
||||
<p class="hint" id="prop-milk-est">Los .milk se traducen a
|
||||
Butterchurn en el propio navegador, al elegirlos. Alguno puede
|
||||
salir distinto al original: si uno no convence, prueba otra
|
||||
variante.</p>
|
||||
</div>
|
||||
|
||||
<label class="check">
|
||||
<input type="checkbox" id="prop-auto"> Cambiar de preset solo
|
||||
</label>
|
||||
<div class="row" id="prop-auto-row" hidden>
|
||||
<span class="label">Cada <span id="prop-seg-val" class="value">20</span> s</span>
|
||||
</div>
|
||||
<input id="prop-seg" type="range" min="3" max="180" step="1" value="20" hidden>
|
||||
<div class="row">
|
||||
<span class="label">Transicion:
|
||||
<span id="prop-tr-val" class="value">2.5</span> s</span>
|
||||
</div>
|
||||
<input id="prop-transicion" type="range" min="0" max="8" step="0.1" value="2.5">
|
||||
<p class="hint">A 0 el preset cambia de golpe; subiendolo, uno se
|
||||
disuelve en el siguiente sin que se note el corte.</p>
|
||||
</div>
|
||||
|
||||
<div class="stack fuente-op" id="fop-shader" hidden>
|
||||
<select id="prop-shader"><option value="">-- elige un shader --</option></select>
|
||||
</div>
|
||||
|
||||
<div class="stack fuente-op" id="fop-video" hidden>
|
||||
<select id="prop-video"><option value="">-- elige un clip --</option></select>
|
||||
</div>
|
||||
|
||||
<div class="stack fuente-op" id="fop-camara" hidden>
|
||||
<select id="prop-camara"><option value="0">Camara por defecto</option></select>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<span class="label">Opacidad: <span id="prop-op-val" class="value">100</span>%</span>
|
||||
</div>
|
||||
<input id="prop-opacidad" type="range" min="0" max="1" step="0.02" value="1">
|
||||
|
||||
<div class="row">
|
||||
<span class="label">Mezcla con lo de debajo</span>
|
||||
<select id="prop-mezcla" class="inline">
|
||||
<option value="normal">Normal (tapa)</option>
|
||||
<option value="sumar">Sumar (apila luz)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<span class="label">Malla (para curvar)</span>
|
||||
<span class="grupo">
|
||||
<button id="map-sub-dec" class="cmd">−</button>
|
||||
<span id="map-sub-val" class="value">1x1</span>
|
||||
<button id="map-sub-inc" class="cmd">+</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack" id="prop-mascara" hidden>
|
||||
<p class="hint">Una mascara solo TAPA: es un recuadro negro que se
|
||||
pinta encima de todo, para recortar derrames de luz. No lleva
|
||||
visual, por eso aqui no hay nada que elegir. Arrastra sus esquinas
|
||||
en la previsualizacion.</p>
|
||||
<p class="hint resumen">Si lo que querias era proyectar algo en esta
|
||||
zona, eso es una <b>capa</b>, no una mascara.</p>
|
||||
<button id="mask-a-capa" class="cmd accent">Convertirla en capa</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue