Intro
El encargo por parte del equipo de comunicación de Kaleidos de una pieza interactiva para la inauguración del Penpot Fest 2025 fue el origen de Penpot’s Whac-A-Mappole. Con el compromiso de producir la pieza enteramente con software libre, comencé con el desarrollo de esta propuesta.
La pieza es un videomapping interactivo en tiempo real proyectado sobre una superficie de relieves geométricos diseñada para la obra, y realizada íntegramente con software de código abierto.
La intención principal de este trabajo es la de demostrar que una pieza de estas características se puede hacer con software libre.
Parte 0: Mapping con código abierto
Hace años existía MapMap, un software de video mapping open source bastante modesto y sencillo de utilizar. Pero hace ya tres años colgaron la etiqueta de no mantenido debido a un cúmulo de dependencias insostenibles, dejando huérfana de soluciones de mapping a la comunidad de artistas visuales del software libre.
Es cierto que existen algunas soluciones sofisticadas, como Omnidome o Splash, que pueden gestionar múltiples proyectores en superficies complejas como Domos o habitáculos inmersivos, pero que están lejos de la sencillez de uso de MapMap.
Al principio de este año comencé a trabajar en una herramienta de Mapping desarrollada con Godot, con la intención de rellenar ese hueco. El objetivo no es competir con las soluciones que utilizan las grandes producciones, sino proveer de una herramienta sencilla para todos aquellos que desean explorar un género tan llamativo y satisfactorio como es el video mapping. Y por el camino, abrir una puerta a cualquier tipo de experimentación. Esa puerta que siempre queda abierta con el código libre.
El encargo de Penpot fue un empuje decisivo para completar la herramienta y ponerla en práctica.
En un futuro próximo está prevista la publicación de la herramienta de mapping, que por el momento continua en desarrollo.
En este artículo haré un repaso por las fases de desarrollo de esta pieza y compartiremos el código de algunas soluciones a los problemas afrontados. Es un proyecto desarrollado durante 4 meses, así que ponte cómoda, que hay bastante que contar.
Parte 1: Del concepto a la ejecución
Cosas técnicas…
En un principio se pensó la realización de una instalación de video mapping que permaneciera instalada en alguna sala durante todo el evento, pero las condiciones lumínicas del lugar impedían que durante el día se pudiera disfrutar de la pieza.
Es por esto que se decidió limitar la duración de la pieza a la fiesta de inauguración, donde teníamos la posibilidad de cerrar las persianas del tejado del salón principal para controlar la iluminación del entorno.
Como primer paso, realicé una captura del lugar con fotogrametría, para poder realizar los cálculos técnicos de la proyección y escoger óptica y potencia del proyector.
Como las paredes del espacio son un lienzo de ladrillo, propuse construir una escenografía de cartón, para tener un relieve más atractivo sobre el que proyectar la pieza.
Decidí cubrir un habitáculo de unos 5 x 6 metros. La superficie de proyección tendrá unos 4.5 metros de ancho por 2.5 metros de alto. Los jugadores se ubicarán a unos 5 metros de la superficie, justo debajo del proyector.
Con todos estos datos recabados y la técnica resuelta, pude comenzar con la fase de desarrollo del concepto.
Logo playground
El trabajo del concepto comienza con un jugueteo con el logo de Penpot para buscar inspiración.
Como el isotipo es una caja en una vista más o menos ortogonal, unas pocas modificaciones de las proporciones me permiten encajarlo en un hexágono regular, convirtiéndolo en un elemento teselable
Elementos de interacción
En la pieza propongo dos vías de interacción con la superficie. Por un lado la idea es que la superficie se comporte como un espejo interactivo, utilizando una kinect para detectar los movimientos que se produzcan delante.
Por otro lado, para expresar el concepto de colaboración tan propio de Penpot, tendremos cuatro ratones convertidos en mandos de juego interactuando con la pieza.
Diseño de la superficie
Una vez encontrado el hexágono-cubo como elemento teselable, la idea de construir un muro de cubos gana fuerza. La idea es aplanar la perspectiva para construir un bajo relieve que mantenga la perspectiva ortogonal y facilite establecer una estructura sobre la que engañar al ojo de los espectadores cuando la hagamos ganar volumen con la luz.
Por el camino trabajé con varias falsas proyecciones ortográficas que conseguían efectos interesantes, pero que descarté porque complicaban enormemente la producción del mural, al resultar cada módulo completamente diferente. De todos modos, este concepto de falsa ortografía lo reutilicé después en los elementos del menu principal.
El modulo fue diseñado con geometry nodes, permitiendo crear las 10 variantes que se necesitan y hacer diferentes pruebas hasta encontrar el número de bloques y el tamaño ideal de cada uno.
Una vez concretado el módulo y sus variantes, se realiza un exportado a modelo de papel usando el Export Paper Model Addon de Adam Dominec, incluido en las extensiones de Blender.
Los modelos que exporta este addon están pensados para cartulinas o cartones de poco gramaje. La adaptación de los pliegues y solapas a un grosor de 4,5mm se realizó a mano en Inkscape.
Antes de enviar las plantillas finales a la empresa de cartelería produje una pieza a escala 1:4 con cartón ondulado de 1mm, para revisar que todo estaba correcto y también para realizar las pruebas de proyección en la última fase del proyecto.
En el siguiente video se puede ver un resumen simplificado del proceso.
Parte 2: Controladores Midi y mandos de juego
Dadas las peculiaridades de la pieza, implementé una serie de características a mi herramienta de mapping para poder tener todo bajo control.
Por un lado, dado que solo disponía de unas pocas horas para ajustar el warpeo de la pieza, implementé atajos para manejar todo el proceso de warpeo desde un mando de control de juegos, de modo que pudiera hacer los ajustes de pie, cerca del mural, en vez de estar sentado desde el ordenador y utilizar unos prismáticos, como se suele hacer.
Por otro lado, añadí el uso de controladores midi, de este modo, pude realizar diversos ajustes y configuraciones del programa en tiempo real, durante el despliegue de la pieza e incluso durante la ejecución. Ajustes de color y contraste en cada clip, ajustes de fusión de capas, una mesa de mezclas de sonido para regular cada efecto y diferentes atajos para lanzar o resetear niveles en caso de que hubiera algún problema o algo fallase (cosa que por suerte no hizo falta utilizar).
Parte 3: El Juego
Elementos del juego
El juego es básicamente un party game casual basado en el clásico Whac’a Mole (el juego de cazar topos con un martillo). En este caso, cazar lápices con el cursor. Mientras uno de los jugadores se mueve delante de la superficie para abrir las cajas, los demás pueden ir clickando en los lápices para recolectarlos.
Hay un total de 7 niveles diferentes, que se van desbloqueando sucesivamente. Cada uno de ellos reproduce una animación al finalizar. En el menu principal, el jugador que está de pie en el centro puede elegir qué nivel se jugará a continuación, o también puede volver a reproducir cualquiera de las animaciones desbloqueadas.
Hay dos formas de interacción con la pieza:
La cámara kinect
Una cámara kinect que detecta los movimientos de los espectadores frente al mural. Gracias a la librería libfreenect he implementado la lectura de la cámara de profundidad y la utilizo en dos momentos distintos del juego.
En el menu de selección se utiliza un algoritmo para detectar el punto más avanzado del cuerpo del espectador y con él se dirige un puntero que permite seleccionar objetos.
En el nivel de juego, las cajas se abren o se cierran en función de la ubicación del jugador.
Estas dos implementaciones están publicadas en una demo que se puede encontrar aquí:
https://codeberg.org/asturnazari/penpot_mapping_kinect_demo
Controladores de ratón
A la vez que uno de los espectadores se mueve para abrir cajas, se disponen cuatro ratones que mueven sendos cursores en el nivel del juego. Con estos cursores los jugadores pueden clickar sobre los lápices para recolectarlos.
Al comienzo de cada nivel, se asigna aleatoriamente un rol y un color a cada uno de los jugadores. El led de cada ratón se colorea con el color asignado. Durante la selección de niveles o mientras se reproduce una animación, los leds de los ratones permanecen apagados, para indicar que están fuera de uso.
Para poder utilizar 4 ratones sin que interfieran con el sistema operativo, mi amigo Roberto MF (Roboe) desarrolló un controlador de ratón que expulsa del sistema cada uno de estos dispositivos según su numero de serie y toma el control de ellos realizando lecturas del puerto usb e interpretando los datos en bruto desde un script en python que hacemos correr dentro de Godot.
Si te interesa conocer como lo hemos hecho, también hemos publicado una demo:
https://codeberg.org/asturnazari/penpot-mapping-mouse-demo
Easter Eggs
Como broma para los diseñadores, a mitad del juego se desbloquea un rol especial. Cuando un jugador obtiene el rol “El diseño es mi pasión”, también obtiene la capacidad de añadir colores a las cajas de penpot. Esto añadió un poco de caos y confusión, mezclado con humor, que ayudó al contexto de la fiesta.
En un momento determinado de la pieza, se activaba una feature de denuncia social.
Parte 4: Las animaciones
Salteadas entre los niveles de juego, en la pieza se disparan algunas animaciones mapeadas sobre la superficie.
En el siguiente clip se puede ver un resumen de las animaciones, que en conjunto tenían una duración de 12 minutos.
Parte 5: Reflexiones sobre el video en Godot
Este proyecto se apoya en el plugin experimental EIRTeamFFmpeg para poder utilizar codecs de video diferentes de OGV. El problema principal de ogv es su altísimo bitrate. Cuando se necesitan videos de alta calidad y resolución, uno no puede depender de codecs con tan poco ratio de calidad/compresión.
Para mantener la coherencia de la pieza, de respetar las licencias y el espíritu de código abierto, he utilizado una version modificada de este plugin, con un set de codecs de ffmpeg que cumpliesen con los requisitos. En concreto he utilizado una release LGPL proveniente de este repo FFmpeg-builds
He utilizado el codec webm (vp9), con opciones de alta calidad para todos los clips, y los resultados han sido muy buenos. En algunos efectos he estado reproduciendo simultáneamente hasta 5 fuentes de video HD, con loops y saltos aleatorios en la reproducción, a la vez que les aplicaba shaders con correcciones de color a todos los videos y realizando un mix de fuentes en un shader final sin que bajase la performance. Las posibilidades son muy grandes.
Por desgracia, algunas features que todavía faltan y que serían ideales para este tipo de piezas ( video mapping, vj performance, etc) son:
- Controlar las velocidades de reproducción de los videos (para poder sincronizar fuentes, ajustar a bpm, mezclar loops con duraciones diferentes, etc)
- Realizar scrubbing con el video pausado (actualmente no se puede adquirir un fotograma de un tiempo concreto si el video esta parado o pausado).
Tengo pendiente explorar la implementación de ffmpeg que está realizando Voylin, tengo entendido que ha incluido alguna de estas características.
Además, tampoco hay mucha información de como gestionar la colorimetría de los nodos de control (los video players son un nodo de control y no parece que les afecten los ajustes de tonemap del environment). Me queda como reto pendiente encontrar mejor información al respecto.
En resumen, Godot es una herramienta excelente para desarrollar este tipo de piezas. Tiene un futuro indiscutible, siguiendo la senda abierta por Blender y otras herramientas floss. Estoy seguro que se encontrarán soluciones más sencillas para implementar el trabajo con video y no me cabe duda que en el futuro veremos más piezas artísticas realizadas con este motor de juegos.
Conclusión
Ha sido un placer poder desarrollar una pieza como esta. Desde aquí quiero expresar mi agradecimiento a Kaleidos y al equipo de comunicación de Penpot, por apostar por un proyecto como este para iluminar su Penpot Fest.
Se me dio total libertad para desarrollar mi creatividad, y todo el conjunto se benefició enormemente de ello.
Es una suerte que existan empresas que mantengan su compromiso con los ideales que representa el ecosistema del código abierto.