El caso Riscanvi una propuesta visual
Explorar las interacciones entre personas y tecnologías es lo que nos ayuda, en Bikolabs, a seguir contando historias. “El caso Riscanvi” es una historia visual que ayuda a entender cuándo un algoritmo acierta. Para contarla, necesitamos más que escribir un texto: necesitamos crear un escenario, personajes, palomas e incluso una luna. Necesitamos imaginar una película.
A finales del 2022, @silvia, @ujue y yo vimos la exposición “Construir mundos” de Liam Young, quien, con una propuesta visual potente, indaga sobre el futuro de las ciudades. Desde Bikolabs nos preguntamos si seríamos capaces contar nuestras historias de esa forma pero en la web, escapando de los formatos clásicos habituales.
Como estudio (de diseño, especulación, investigación, divulgación), las técnicas, tecnologías y herramientas con las que diseñamos nuestros proyectos son piezas que nos fascina entender y explorar. Si el diseño es poner “objetos”, en el mundo, qué objetos crear y cómo crearlos resulta parte de la misión de un estudio como Bikolabs.
Por eso, para nosotros, nuestras herramientas son una extensión de nuestro brazos, aunque somos muy conscientes de que, en ocasiones, las herramientas de autoría se convierten en una pequeña cárcel, al contar con unos límites demasiado marcados.
En el uso de herramientas de diseño aplica la frase: “Los límites de mi lenguaje son los límites de mi mundo”; aunque estos límites no los decide el artista o la diseñadora que usa esas herramientas; los decide quien crea el software de diseño.
Por eso, en el estudio dedicamos un tiempo de calidad a encontrar y probar herramientas en las que los límites sean difusos. Y este es el caso de las herramientas de programación visual.
Este tipo de herramientas poseen una mezcla extraña que nos fascina (entre un bordado, un lenguaje de programación y una caja oxidada de herramientas) y abren un horizonte repleto de posibilidades que admite el mestizaje.a
Pero las herramientas de programación visual no son nuevas. Muchas llevan más de 20 años con nosotros, aunque últimamente están adquiriendo aún mayor relevancia. Hablamos de las herramientas que se usan para la creación y manipulación de audio, vídeo, la interacción en tiempo real, arquitectura paramétrica, creación de videojuegos y un largo etcétera.
Pongamos varios ejemplos. Max de cycling74 y su homólogo PureData (open source) son los precursores de esta forma de entender el diseño mestizo, especialmente en el campo del diseño sonoro. Max se integró en el ecosistema Ableton, que es una de las herramientas más usadas en la música electrónica.
Por su parte, en el diseño paramétrico, Rhino & Grasshopper son una referencia, aunque recientemente Blender, el programa 3D por excelencia, ha incorporado Geometry Nodes, añadiendo el diseño procedural a sus múltiples posibilidades.
Por otro lado, en el área de las grandes instalaciones “new media”, Touchdesigner o VVVV son proyectos que continúan en la vanguardia desde hace más de 20 años. Un caso representativo de ellos es el mapping del museo Guggenheim
En este nuevo paradigma de herramientas de programación visuales, en lugar de escribir código en un lenguaje de programación tradicional, los creadores construyen “parches” que conectan objetos gráficos dentro de una interfaz visual.
Este cambio permite nuevas formas de pensamiento computacional salir de la caja, y contemplar en tiempo real el resultado de la programación visual a medida que el creador o creadora va conectando nodos en su interfaz.
En nuestro estudio Bikolabs, la herramienta de programación visual por excelencia, desde que nos enamoramos de ella hace más de un año, es Cables.gl: un entorno de programación visual en tiempo real pero enfocado a la web
Con ella hemos creado nuestro primer proyecto complejo a nivel narrativo, “El caso RisCanvi”, que ha sido más fácil de llevar a cabo gracias a la generosidad y amabilidad de la comunidad cables.gl, y especialmente gracias a sus creadores @undev_studio, @pandrr, y @steam0r.
Entramos, ahora sí, en detalle en la historia visual de “El caso RisCanvi”.
La elección de cables.gl para crear esta historia surgió por la necesidad que teníamos de poder hacer una visualización en web de lo que sucedía a nivel de etiquetado algorítmico y predicción con una muestra de 657 presos.
Queríamos mover a todos esos presos de un lado a otro de la pantalla para facilitar la explicación de nuestra historia textual y, por supuesto, hacerlo en formato web.
Hubiéramos podido usar Three.js, como lugar común, o incluso la mezcla con Gsap, pero, como hemos explicado, las formas y los entornos son importantes por sus posibilidades pero también por sus límites.
Cables, al ser un entono basado en Webgl, permite trabajar con texturas, mallas y modelos, además de usar la gráfica que es la encargada de gestionarlo todo. Gracias a Webgl, estábamos más cerca de un motor de videojuegos que de un canvas 2D, lo que nos permitía lograr un impacto visual más potente que en contextos 2D, aunque, desde luego, implicaba una mayor complejidad.
En esta herramienta de programación visual, el entorno de desarrollo se realiza en la nube y puedes gestionar multiples proyectos (patches) y crear grupos de trabajos con colaboradores. Incluso admite el trabajo en tiempo real, repartiendo los roles de piloto y visionador. A su vez, cada patch contiene su propio conjunto de assets, donde gestionar tus texturas, sprites, modelos, audios, videos, json, etc.
Desde el propio entorno, se puede publicar en la web de cables el proyecto, con un buen control de acceso. El parche se puede exportar en javascript, con la estructura de assets. También desde el propio entorno es posible desplegarlo en diferentes plataformas: github, netlfly, etc.
En nuestro caso, decidimos usar Sveltekit @sveltejs para crear el microsite que necesitábamos para nuestra historia visual. Así, creamos un componte de Svelte que permite interactuar con el Webgl de Cables.gl.
Pero separando los mundos: los cambios de escena y las pastillas de información pertenecen a Svelte, pero los personajes que representan a los presos en la plaza se encuentran en Cables y son llamados a moverse cuando se precisa.
La concepción de @Rich_Harris Rich Harris y su implementación de la web reactiva ha permitido esta maravillosa integración que, con @vercel para el despliegue, logra que todo resulte fácil y transparente.
Para cerrar, algunas reflexiones sobre estas herramientas.
Es evidente que la programación visual te obliga a pensar de otra manera, a crear las cosas de otra forma. Pero, a su vez, te permite modelar tus propias herramientas. Para nosotros, es lo mismo que ocurre con la artesanía.
Una de las cosas más fascinante de la artesanía es la forma en la que las artesanas crean y modifican sus propias herramientas. La programación visual se asemeja a ese taller artesano, donde muchas herramientas básicas son indispensables, pero es necesario crear y adaptar otras para cada proyecto. Y es, en esta combinación, cuando las posibilidades se vuelven infinitas.
Así que, asumiendo que la tecnología crea mundos, es momento de plantearnos que quizá necesitamos hacer esos mundos creados más abiertos y transitables. Y, para lograrlo, no todas las herramientas de creación, de diseño, valen.
