hacklab/FOSFENO
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
FOSFENO/README.md
hacklab f017246f0e 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>
2026-08-02 14:56:01 +02:00

296 lines
12 KiB
Markdown
Raw Permalink Blame History

<div align="center">
<img src="docs/assets/banner.svg" alt="FOSFENO" width="900">
</div>
# FOSFENO
<div align="center">
<img src="docs/assets/milkdrop.jpg" alt="Visuales audio-reactivas" width="600">
</div>
**Motor de visuales audio-reactivas para Raspberry Pi y para portátil Linux.**
Convierte una Raspberry Pi + un proyector + un micro USB en una estación de
VJ automática: escucha la música de la sala, detecta su BPM y proyecta
visuales que reaccionan al sonido. Todo se controla desde un panel web.
Funciona en dos escenarios: en una **Raspberry Pi** como aparato dedicado que
arranca solo, o en un **portátil Linux** que lanzas cuando quieras. El apartado
[En un portátil Linux](#en-un-portátil-linux) explica las diferencias.
```
[ Música en la sala ]
│ (micro USB)
▼
┌──────────────────┐ Wi-Fi / Ethernet
│ Raspberry Pi 5 │◀─────────────────────────── http://192.168.1.XX/
│ FOSFENO │ (panel en el móvil)
└────────┬─────────┘
│ micro-HDMI
▼
[ Proyector :: visuales ]
```
## Documentación
La carpeta [`docs/`](docs/) tiene la guía completa:
- [Requisitos y hardware](docs/requisitos.md) — qué Raspberry, qué micrófono
USB y qué cámara usar para que se reconozcan solos.
- [Instalación](docs/instalacion.md) — qué descarga y compila el instalador.
- [Conectarse al panel](docs/conexion.md) — el código QR, `fosfeno.local` y
el router.
- [Uso del panel](docs/uso.md) — cómo se maneja y qué hace cada motor.
- [El Mezclador VJ](docs/mezclador.md) — las mezclas: las dos capas, visuales
de fondo, modos de mezcla y efectos.
- [Projection mapping](docs/mapping.md) — deformar las visuales para encajarlas
en superficies físicas (malla, máscaras) desde el panel.
- [Solución de problemas](docs/problemas.md) — qué hacer cuando algo falla.
- [Seguridad](docs/seguridad.md) — el panel está abierto a la red local por
defecto; cómo cerrarlo con una clave si pinchas fuera de casa.
- [Arquitectura](docs/arquitectura.md) — para tocar el código: piezas, estado,
eventos y cómo añadir un motor.
El panel además lleva un botón de información en cada apartado: explica qué
es, qué necesita y cómo se configura, sin salir del propio panel.
## Motores de visuales
Los cinco se eligen y configuran desde el panel, en caliente:
| Motor | Qué es |
|----------------|------------------------------------------------------------|
| **projectM** | Visualizador MilkDrop nativo, compilado en la Pi |
| **Butterchurn**| MilkDrop en WebGL, miles de presets |
| **Hydra** | Código Hydra en vivo: editor + librería de fragmentos |
| **Shaders** | Shaders GLSL audio-reactivos (estilo Shadertoy), con editor|
| **Mezclador** | VJ tipo Resolume: cámara + clips de vídeo + efectos |
Visuales de ejemplo — el motor Hydra con su editor de código en vivo:
<div align="center">
<img src="docs/assets/hydra.png" alt="Hydra" width="940">
</div>
## Projection mapping por capas
Las visuales se pueden **deformar para encajarlas en superficies físicas** desde
el panel: malla deformable (curvas), varias zonas a la vez y máscaras para tapar
derrames, arrastrando con el ratón o el dedo.
Y cada zona es una **capa con su propio visual**: MilkDrop a la derecha, otro
preset distinto a la izquierda y un vídeo en el centro, a la vez.
<div align="center">
<img src="docs/assets/capas.png" alt="Tres capas con visuales distintos" width="900">
</div>
| Fuente de una capa | Qué es |
|--------------------|--------|
| El motor de MOTORES | Lo que esté puesto en la otra pestaña del panel |
| Visuales MilkDrop propias | Un Butterchurn solo para esa capa, con su preset |
| Shader GLSL | Un shader de la librería, reactivo al audio |
| Clip o imagen | Un archivo de `data/videos`, en bucle |
| Cámara | La webcam |
| Negro | Tapa la zona |
Con opacidad y mezcla (normal o aditiva) por capa. Se guarda solo en
`data/mapping.json`. Guía: [docs/mapping.md](docs/mapping.md).
## Hardware necesario
- Raspberry Pi 5 o Pi 4 + fuente oficial + microSD/SSD
- Cable **micro-HDMI → HDMI** para el proyector
- **Micrófono USB** (la Pi no tiene entrada de audio propia)
- **Webcam USB** (opcional, para el modo Mezclador)
- Disipador o ventilador (las visuales tiran de GPU)
- Red por Ethernet o Wi-Fi
<div align="center">
<img src="docs/assets/raspberry-pi-5.jpg" alt="Raspberry Pi 5" width="460">
</div>
## Instalación
En Raspberry Pi OS Bookworm (64 bits, con escritorio):
```bash
git clone <URL-de-tu-gitlab>/fosfeno.git
cd fosfeno
bash install.sh
```
El instalador es robusto: detecta si es **Pi 4 o Pi 5**, comprueba el sistema
operativo, **verifica las versiones** de cada herramienta (Python, Node, npm,
CMake) y avisa con `[ OK ]` / `[ !! ]` / `[ XX ]` de cada paso.
```
bash install.sh # instala todo (incluido projectM)
bash install.sh --no-projectm # omite la compilación de projectM
bash install.sh --check # solo comprueba el sistema, no instala nada
```
Después, en la Raspberry, activa el arranque al escritorio:
```bash
sudo raspi-config # System Options → Boot/Auto Login → Desktop Autologin
sudo reboot
```
Al reiniciar, la Pi arranca sola en modo kiosko mostrando las visuales.
### En un portátil Linux
FOSFENO no necesita la Raspberry: corre igual en un portátil con Linux. El
instalador reconoce las familias más comunes —Debian/Ubuntu/Mint, Fedora,
Arch/Manjaro y openSUSE— e instala las dependencias con el gestor de cada
una (`apt`, `dnf`, `pacman` o `zypper`). El portátil ya trae micrófono y
cámara, y lo conectas al proyector por HDMI como cualquier otra cosa.
```
[ Música de la sala ]
│ (micrófono integrado, o USB)
▼
┌────────────────────────┐
│ Portátil Linux │── HDMI ──▶ [ Proyector :: visuales ]
│ ./fosfeno │
└───────────┬────────────┘
│
Panel: http://localhost:8080/
(o desde el móvil, en la misma red Wi-Fi)
```
Se instala una vez y se arranca a mano cuando lo necesites:
```bash
bash install.sh --laptop # instala, sin tocar el arranque del sistema
./fosfeno # arranca FOSFENO; Ctrl+C para cerrarlo
```
Diferencias con la Raspberry Pi:
| | Raspberry Pi | Portátil Linux |
|---|---|---|
| Arranque | Automático al encender | A mano, con `./fosfeno` |
| Modo kiosko | Sí: visuales a pantalla completa al arrancar | **No**: ventana normal que mueves al proyector |
| Puerto del panel | 80 — `http://fosfeno.local/` | 8080 — `http://localhost:8080/` |
| Micrófono y cámara | Por USB | Los integrados del portátil |
| Cambios en el sistema | Arranque automático y nombre de red | Ninguno |
La diferencia clave: en el portátil **no se usa el modo kiosko**. Las visuales
salen en una ventana de navegador normal que arrastras a la pantalla del
proyector y pones a pantalla completa con F11. Así FOSFENO no se apodera de tu
pantalla ni se mete en el arranque del sistema; lo abres y lo cierras tú.
Guía completa: [FOSFENO en un portátil](docs/portatil.md).
## Uso
- **Visuales** → salen automáticamente por el proyector (HDMI).
- **Panel de control** → al arrancar, el proyector muestra un **código QR** y
la dirección. Escanéalo con el móvil y el panel se abre. También se llega
escribiendo `http://fosfeno.local/`. El móvil debe estar en la misma red.
Ver [Conectarse al panel](docs/conexion.md).
Así se ve el panel de control:
<div align="center">
<img src="docs/assets/panel.png" alt="Panel de control de FOSFENO" width="940">
</div>
El panel tiene dos pestañas, a la derecha del título: **MOTORES** (el directo)
y **MAPPING** (el montaje sobre la superficie física).
Desde el panel puedes:
- Encender/apagar las visuales y cambiar de motor.
- Elegir la **tarjeta de audio** y ver el **BPM detectado** en vivo.
- Ajustar la sensibilidad al audio.
- **Butterchurn**: presets, transición, cambio automático por segundos o
**sincronizado al compás**.
- **Hydra / Shaders**: editor de código integrado para **escribir o pegar**
tu propio código, más una **librería de fragmentos** lista para cargar.
- **Mezclador VJ**: elegir el fondo (cámara o visuales MilkDrop), el clip de
encima, el modo de mezcla y los efectos de color (tono, saturación,
colorama, posterizado, pixelado, caleidoscopio, feedback, invertir…).
- **Mapping**: encajar la imagen sobre la superficie física arrastrando los
puntos, con malla deformable y máscaras.
FOSFENO en acción — vídeo corto de demostración:
<div align="center">
<video src="docs/assets/demo.mp4" controls width="940"></video>
</div>
Si el reproductor no se ve, descarga el vídeo: [demo.mp4](docs/assets/demo.mp4)
### Modo Mezclador (cámara + vídeo + visuales de fondo)
El mezclador monta **dos capas**: un **fondo** —la webcam o las propias
**visuales MilkDrop**— y un **clip** encima (vídeo o imagen), combinados con el
modo de mezcla y los efectos de color. Con un clip de silueta sobre negro y el
modo *Recorte*, el personaje queda **delante de MilkDrop** latiendo con la
música.
Los clips se copian a `data/videos/` (`.mp4` H.264, `.webm`, imágenes) o se
suben desde el propio panel. Por debajo, el mezclador genera código Hydra a
partir de los controles: el equivalente a Resolume, corriendo en la propia Pi.
Guía completa: [El Mezclador VJ](docs/mezclador.md).
## Estructura
```
FOSFENO/
├── install.sh / uninstall.sh Instalador robusto y desinstalador
├── config.json Configuración (puerto, micro, valores por defecto)
├── backend/server.py Servidor: web + WebSocket + gestión de procesos
├── scripts/lib.sh Funciones de los scripts (logs, versiones)
├── web/panel/ Panel de control (móvil)
├── web/stage/stage.js Escenario en Chromium (todos los motores web)
├── web/stage/mapper.js Compositor de projection mapping (WebGL)
├── docs/ Documentación completa
├── docs/arquitectura.md Cómo está montado, para tocar el código
├── data/hydra-sketches.json Sketches de Hydra de fábrica
├── data/hydra-snippets.json Librería de fragmentos de Hydra para el editor
├── data/shaders.json Shaders GLSL (editables)
├── data/ayuda.json Textos de ayuda que muestra el panel
└── data/videos/ Tus clips de vídeo para el Mezclador
```
Cuando algo falla (un error de código, una cámara que no responde, projectM
sin instalar), FOSFENO no se queda callado: el aviso aparece en una banda en
la parte de arriba del panel, con el color según su gravedad.
## Detección de BPM
FOSFENO incluye un detector de ritmo propio (análisis de energía de graves
en tiempo real) que estima el BPM de la música ambiente. El BPM se muestra en
el panel y alimenta a todos los motores:
- **Shaders**: uniforms `u_bpm` y `u_beat` (fase 0..1 sincronizada al pulso).
- **Hydra**: actualiza la variable global `bpm` (la usan `.fast()`, etc.).
- **Butterchurn**: cambio de preset cada N compases.
## Configuración (`config.json`)
- `server.port` — puerto del panel. `80` permite `http://IP/` sin puerto;
si da problemas de permisos, cámbialo a `8080`.
- `audio.matchSource` — subcadena para localizar el micro USB (por defecto `usb`).
- `defaults` — motor, sensibilidad, sketch de Hydra y shader al arrancar.
## Notas
- **Pi 5 usa Wayland.** El cambio manual de preset en projectM solo funciona
en sesión X11; en Wayland projectM rota presets automáticamente. El resto
de motores no se ven afectados.
- Para el Mezclador, usa clips de vídeo ligeros (720p o menos, H.264).
- Los fragmentos de Hydra de `data/hydra-snippets.json` están adaptados de
ejemplos de la comunidad de Hydra
([hydra-synth/hydra](https://github.com/hydra-synth/hydra),
[zachkrall/hydra-examples](https://github.com/zachkrall/hydra-examples)).
- Uniforms de los shaders GLSL: `u_resolution`, `u_time`, `u_bass`, `u_mid`,
`u_treble`, `u_level`, `u_bpm`, `u_beat`, `u_fft`.
---
*Parte de COFRE/CODERS — creative coding audio-reactivo.*
Reference in a new issue View git blame Copy permalink