Soy Carlos Adrián Serna = artista electrónico;

← Portafolio2026Tecnologías para el arteCódigo abierto · Creative Commons

Totuma — Suite audiovisual interactiva, livecoding y videomapping

[Próximamente] Suite de software libre y modular para artes escénicas, performance y videomapping. Livecoding en JavaScript, p5.js y GLSL, reactividad a sonido y visión artificial, control MIDI/OSC y ecosistema de injertos.

⚡ Próximamente · Lanzamiento 2026

Enciende la escena: La herramienta que el arte escénico y visual necesita

Totuma es un entorno modular de creación y control audiovisual interactivo de código abierto concebido para artes escénicas, performance en vivo, videomapping y VJing. Construido desde el navegador pero ejecutado con rendimiento nativo WebGL/WebGPU, permite pasar de una idea a una intervención escénica completa en cuestión de segundos: un par de clics y una explosión visual en tiempo real.

1. Gestión de clips y grupos · El motor del directo

Cómo se hace: En pocos clics seleccionas y arrastras clips a la línea de tiempo o a las pistas maestras, organizándolos en grupos independientes con sus propios modos de mezcla.

💥 ¡Y pammm! El resultado: Las capas audiovisuales se fusionan en directo sin corte ni latencia perceptible, permitiendo disparar escenas complejas sincronizadas al instante.

📐 WIDGET DE PLANO & FUNCIONAMIENTO · ARQUITECTURA DAW & GESTIÓN DE PISTAS ● INTERACTIVO
ARQUITECTURA DAW & GESTIÓN DE PISTAS
  1. 1 · Matriz de Clips y Decks Buses A/B independientes con disparo libre y cuantizado sin interrupción ni latencia.
  2. 2 · Monitores Previo & Salida Doble visor WebGL acelerado por GPU: monitor de preescucha visual y salida maestra limpia.
  3. 3 · Transporte, Tap Tempo y BPM Reloj maestro de sincronización con cuantización de compases y emparejamiento rítmico.
  4. 4 · Crossfader y Modos de Mezcla Transición suave entre capas audiovisuales con algoritmos Add, Screen, Multiply y Luma-Key.

2. Creative Coding & Livecoding · JavaScript, p5.js y GLSL

Cómo se hace: Abres el editor integrado de código en caliente, escribes o modificas algoritmos de p5.js o shaders GLSL directamente en la interfaz.

💥 ¡Y pammm! El resultado: El escenario se inunda al vuelo con partículas matemáticas, fractales dinámicos y geometrías reactivas que compilan en el milisegundo exacto en que pulsas la tecla.

📐 WIDGET DE PLANO & FUNCIONAMIENTO · LIVECODING & SHADERS GLSL EN CALIENTE ● INTERACTIVO
LIVECODING & SHADERS GLSL EN CALIENTE
  1. A · Editor de Código de Fragmentos (GLSL) Edición directa del pipeline de píxeles; compilación instantánea al teclear sin pausas.
  2. B · Uniformes Dinámicos Reactivos Parámetros inyectados automáticamente: u_time, u_resolution, u_audio y moduladores externos.
  3. C · Viewport de Salida en Tiempo Real Visualización inmediata de partículas, fractales y algoritmos matemáticos generativos.
Totuma - Livecoding con JavaScript y p5.js en vivo

3. Reactividad sensorial · Audio y Luz de cámara

Cómo se hace: Seleccionas el micro del sistema o la entrada de línea, o apuntas una cámara al escenario para captar el flujo lumínico y cromático.

💥 ¡Y pammm! El resultado: Graves, medios, agudos y fuentes de luz se convierten en moduladores físicos en tiempo real. Los visuales vibran y mutan con cada respiración musical o destello en escena.

🎵 Reactividad por Audio (FFT)

Análisis espectral por bandas que convierte graves (kick), frecuencias medias y transitorios en moduladores orgánicos para shaders y parámetros de mezcla.

📷 Reactividad Óptica (Luz & Cámara)

La iluminación física del escenario o linternas proyectadas sobre la cámara actúan como gatillos lumínicos y coordenadas espaciales dinámicas.

4. Videomapping de precisión · Esquinas, mallas y deformación

Cómo se hace: Arrastras los cuatro vértices (corner pinning) o subdivides la superficie en una malla Bézier elástica para calzar la geometría.

💥 ¡Y pammm! El resultado: La imagen se ajusta milimétricamente sobre cualquier volumen escenográfico, fachada o relieve arquitectónico sin necesidad de software externo.

📐 WIDGET DE PLANO & FUNCIONAMIENTO · VIDEOMAPPING & DEFORMACIÓN BÉZIER ● INTERACTIVO
VIDEOMAPPING & DEFORMACIÓN BÉZIER
  1. 1 · Gestor de Pantallas y Salidas Configuración multicanal para proyectores, lienzos LED y pantallas auxiliares.
  2. 2 · Lista de Slices y Máscaras Segmentación geométrica en capas independientes con orden de profundidad Z.
  3. 3 · Vértices Corner-Pinning y Malla Bézier Tiradores elásticos para compensar la perspectiva y distorsión óptica del proyector.
  4. 4 · Inspector de Calibración Geométrica Ajuste fino de aristas, blending de bordes y enmascaramiento vectorial.

5. Cadena de Efectos modulares

Cómo se hace: Encadenas filtros de color, retroalimentación (feedback), distorsiones ópticas y glitches en serie o en paralelo con un par de arrastres.

💥 ¡Y pammm! El resultado: Una transformación radical del material visual que genera texturas infinitas y atmósferas envolventes.

Totuma - Inspector de efectos modulares

6. Ecosistema de «Injertos» · Expandiendo las posibilidades

Totuma cuenta con una arquitectura abierta que permite incorporar módulos especializados llamados Injertos:

  • Desmenuzar: Videomapping y segmentación arquitectónica automática por visión por computador. Analiza fachadas y descompone molduras, ventanas y volúmenes en segmentos proyectables al instante.
  • Corotos: Interactividad corporal en el espacio sin captura ni reconocimiento de rostros, preservando la ética y privacidad de intérpretes y público.
  • Láser RGB & Dispositivos externos: Proyección vectorial con láseres RGB y control de actuadores físicos mediante el ecosistema Wenapsis.
📐 WIDGET DE PLANO & FUNCIONAMIENTO · INJERTO «DESMENUZAR» · SEGMENTACIÓN ARQUITECTÓNICA 3D ● INTERACTIVO
INJERTO «DESMENUZAR» · SEGMENTACIÓN ARQUITECTÓNICA 3D
  1. A · Motor de Inferencia Neuronal Local Modelos SAM 2.1 y Depth Anything V2 con aceleración multiproceso WebGPU.
  2. B · Reconstrucción de Planos RANSAC Detección automática de molduras, vanos y fachadas con ajuste métrico de planos 3D.
  3. C · Exportación Directa a Slices Totuma Convierte la segmentación arquitectónica en máscaras mapeadas al instante.

🎭 Injerto Corotos · Interacción Corporal

Injerto Corotos - Interacción corporal ética

⚡ Injerto Láser RGB · Proyección Vectorial

Injerto Láser RGB - Hardware Wenapsis

7. Conectividad profesional · MIDI y protocolo OSC

Cómo se hace: Clic derecho en cualquier control para mapear perillas, faders o pads de tu controlador MIDI al instante. Conexión bidireccional mediante OSC para dialogar con software externo (TouchDesigner, Ableton Live, Resolume o Processing).

💥 ¡Y pammm! El resultado: Respuesta física inmediata bajo los dedos del artista o integración orquestada con la iluminación del teatro.

📐 WIDGET DE PLANO & FUNCIONAMIENTO · CONTROL MIDI DIRECTO & INTERCONEXIÓN OSC ● INTERACTIVO
CONTROL MIDI DIRECTO & INTERCONEXIÓN OSC
  1. 1 · Modo MIDI Learn Activo Resaltado cian en toda la interfaz para asignar controles físicos de forma inmediata.
  2. 2 · Mapeo de Pistas y Efectos Respuesta háptica y faders motorizados en sincronía con la mesa de directo.
  3. 3 · Interconexión de Red OSC Entrada y salida de mensajes OSC para dialogar con TouchDesigner, Ableton o consolas DMX.

8. Control a distancia desde otros dispositivos

Cómo se hace: Abres la URL remota de Totuma desde una tableta o teléfono móvil conectado a la misma red local.

💥 ¡Y pammm! El resultado: Controlas clips, efectos, intensidades y disparos escénicos mientras caminas libremente por la sala o el escenario.

Totuma - Interfaz táctil de control remoto

🛠️ Suite de Producción y Montaje: Tutomaker

Totuma incorpora una herramienta integral de edición, montaje y renderizado (Tutomaker) diseñada para componer demostraciones, teasers y presentaciones interactivas con control milimétrico:

📐 WIDGET DE PLANO & FUNCIONAMIENTO · SUITE DE MONTAJE Y PRODUCCIÓN · TUTOMAKER ● INTERACTIVO
SUITE DE MONTAJE Y PRODUCCIÓN · TUTOMAKER
  1. 1 · Render Multirresolución & Formatos Exportación 16:9, 9:16, 1:1, 4:5 y formatos libres desde 240p hasta 4K UHD con control de FPS y bitrate.
  2. 2 · Selector de Idioma en Caliente Conmutación inmediata entre español, inglés y francés sin reconstruir el guion.
  3. 3 · Editor Tipográfico Completo Familia tipográfica, tamaño, peso (100–900), tracking, interlineado, color y alineación por escena.
  4. 4 · Línea Temporal Elástica Ajuste de tiempos por momento (impacto, inicio, duración) con desplazamiento proporcional automático.
  5. 5 · Modificación Paramétrica de Efectos Ajuste en vivo de velocidad, intensidad, densidad y umbrales reactivos.
  6. 6 · Transformación Espacial con Gizmo Arrastre interactivo en el visor para mover, rotar y escalar elementos o grupos de objetos.
  7. 7 · Etiquetado e IDs Estables de Objeto Identificadores únicos (ej. 07-mapping/frase) para referenciar y coordinar ediciones precisas.
Panel de renderizado multirresolución de Tutomaker