Programación creativa, interacción y diseño generativo para crear emoción con Edu Prats

Si algo nos mueve es encontrar la combinación entre tecnología y creatividad, el cruzar aquella sutil línea entre la funcionalidad y la naturaleza expresiva. En este contexto, el creative coding nos brinda precisamente la oportunidad de explorar cómo la tecnología nos permite crear emoción a través de la programación. 

El creative coding permite innovar a nivel de lenguaje visual en diferente disciplinas y técnicas: instalaciones, arte generativo, processing, visual mapping...

Decentraland de Edu Prats con Claudio Guglieri, Martín Shibuya & Mauricio Dal Fabbro

En Runroom hemos trabajado recientemente con WebGL (Web Graphics Library) junto a Edu Prats. Este lenguaje nos ha permitido trasladar el rebranding de Folch a nuestra web, traduciendo los valores de marca en animaciones creadas a partir de este lenguaje, con un fuerte impacto visual. Conversamos con Edu sobre su experiencia y visión en este campo.

Entrevista a Edu Prats, experto en Creative Coding.

Hola Edu, ¿cómo estás? Haciendo un repaso por tu trayectoria vemos que tienes una extendida experiencia con la programación creativa que te ha llevado a colaborar con artistas de la talla de Arcade Fire, The XX o en eventos como Sónar y OFFF.

Hola, sí, la verdad es que son ya prácticamente 20 años en este mundillo. ¿¡20!? Mierda, cómo pasa el tiempo! Parece que era ayer cuando empecé esta aventura, un viaje que me ha llevado por Barcelona, Berlín, Hamburgo, Londres, Nueva York, Belgrado y Los Angeles entre otros lugares.

Recuerdo que fue precisamente hace casi 20 años, después de asistir al primer festival OFFF en Barcelona, cuando me di cuenta que tenía que salir. En aquella época yo era un pardillo, llevaba unos meses trabajando con Macromedia Flash y no sabía absolutamente nada. De repente, asistí a esas conferencias geniales en un auditorio en la Av. Diagonal de Barcelona y me quedé boquiabierto con cara de bobo durante horas.

Unos meses más tarde partí hacia Berlín, y empecé a trabajar como freelance con un estudio llamado Fork Unstable Media, mayoritariamente en Berlín, pero también en Hamburgo. Gracias a esta experiencia, empecé a trabajar en proyectos experimentales con Flash para instalaciones, festivales cómo Transmediale, websites para perfumes y fashion brands alternativas, etc.

Trust Oylo / Generative Interactive Systems con Mucho y Llos.

Pero fue 7 u 8 años más tarde, precisamente durante el postmortem de Flash, cuando ya estaba viviendo en Londres y recibí un email de un colega, Guille López, que me comentó que B-Reel en NYC estaba buscando un dev lead para un proyecto muy ambicioso financiado por Google para promocionar HTML5 y Chrome, y que mi perfil encajaba. Se trataba de un proyecto liderado por gente a quien yo admiraba, Chris Milk y Aaron Koblin y era nada menos que un videoclip interactivo para Arcade Fire. Hasta la fecha había varios videoclips interactivos en Flash, pero este iba a ser el primero en HTML5, usando Canvas, Video y Audio. Este proyecto hizo que me cruzara con Ricardo Cabello y Jaume Sánchez, ambos originales de Barcelona como yo, y con quienes he seguido cruzándome repetidamente :)

A partir de aquí fue un no parar, y ya con la llegada de WebGL, empecé a coger más interés en la programación en gráficos y a dar un giro en mi trabajo, siendo este cada vez más visual, a la vez que empecé a participar en eventos, talleres, conferencias...

The xx Websiite, con Future Corp London

¿Cómo entraste en contacto con esta disciplina y cuándo viste claro su potencial?

El otro día mientras preparaba un taller de formación, me acordé de algo de hace muchos años. Yo tendría unos 12 o 13 años, quizás menos. Mi compañero de clase, Ferran, tenía un Spectrum ZX y a menudo pasábamos las tardes en su casa jugando a juegos de cassette e incluso experimentando con la copia de juegos mediante una doble platina de un equipo de música. El caso es que un día descubrimos que con el Spectrum podíamos escribir una serie de instrucciones de texto que nos permitían dibujar formas en pantalla en tiempo real con el lenguaje BASIC. La cosa era algo así

FOR i=0 TO 50 STEP 3
CIRCLE i,i,i
NEXT i

Mediante este tipo de instrucciones, con tan solo unas 3 líneas de texto podíamos dibujar una serie de círculos, cuadrados o líneas en pantalla. Mis padres se dieron cuenta de mi interés y me apuntaron a un curso de BASIC, incluso me compraron un Amstrad CPC 464. Pero en el curso todo era muy formal y no dibujábamos figuras. Perdí un poco el interés, aunque seguí jugando con el Amstrad.

Años más tarde, ya con 18, no sabía qué estudiar. Me gustaba la tecnología, los ordenadores y los videojuegos pero veía la carrera de informática como algo muy aburrido y antiguo. Dos años más tarde asistí a una presentación sobre una nueva carrera llamada "Ingeniería Multimedia" en La Salle. Allí nos hablaron de Realidad Virtual, Videojuegos, gráficos en 3D, y pensé que esto quizás sí sería para mí.

Cuando estaba terminando de estudiar, me salió la oportunidad de hacer un proyecto con un pequeño estudio interactivo recién estrenado. Se trataba de programar la lógica y animaciones de un CD-ROM Multimedia. Fue una locura, un montón de horas luchando contra fallos para que todo saliera perfecto. Terminé exhausto pero con la idea clara de que trabajando se aprendía un montón. Y me encantó trabajar con los diseñadores gráficos (mayores y con más experiencia que yo). En ese momento decidí solo terminar las cuatro asignaturas que me quedaban en la carrera técnica y no hacer los dos años adicionales de graduación superior para poder seguir trabajando lo más pronto posible.

Uno o dos años más tarde, asistí a la primera edición del festival OFFF como comentaba antes, y tras las conferencias tuve claro que tenía que salir de Barcelona e ir a trabajar en el extranjero. Unos meses después hice las maletas y me fui a Berlín.

¿Cómo crees que el Creative Coding va a transformar la realidad digital?

El Creative Coding es una disciplina complementaria a muchas otras del sector como pueden ser Front-End, UX o Back-End. Acostumbra a ir muy ligado a la programación en gráficos en tiempo real. El camino de aprendizaje es largo, uno va aprendiendo trucos y técnicas de optimización durante ese camino.

The Lagoon of Floating Echoes (Hi-Res version) / The Lagoon of Floating Echoes (Realtime Version). Story by Jari Sperling, sound by Niki Neecke.

Quizás el término se haya hecho más popular a partir de la aparición de WebGL y la posibilidad de utilizar la GPU para acelerar gráficos dentro del navegador web, pero en mi opinión, el movimiento empieza a coger fuerza a partir de finales de los 90, con la introducción de Action Script en Macromedia Flash y con los trabajos de gente como Yugo Nakamura, Joshua Davis o Jared Tarbell. Luego, a partir del 2001, con la introducción de Processing, y posteriormente en 2005 con OpenFrameworks, hay un boom gracias a estos dos maravillosos frameworks de programación creativa.

Creo que todo esto ha jugado un papel fundamental en la cultura del creative coding, y con la posterior evolución de los browsers y gracias a librerías JavaScript como threeJS, hoy tenemos una gran diversidad de experiencias interactivas online cercanas a los videojuegos. Todo dentro de la ventana del navegador web.

Los clientes y los usuarios se están acostumbrando a experiencias interactivas más lúdicas y es normal que empiecen a pedir contenidos más "avanzados".

¿Cuáles son los lenguajes y recursos que consideras más relevantes en tu trabajo?

Soy bastante políglota. Aunque mayoritariamente para mí trabajo uso JavaScript y WebGL/ThreeJS/Regl, me encanta usar C++ y frameworks como OpenFrameworks o Cinder cuando el proyecto lo requiere. Últimamente he usado bastante engines de videojuego como Unreal Engine o Unity (C++ y C#).

También he realizado proyectos nativos móvil con Java y OpenGL (Android) y Obective-C y Swift + OpenGL (iOS). A menudo me creo scripts en Node o Python para analizar datos o para algún tipo de back-end de una instalación. Disfruto cambiando un poco de escenario. Es refrescante.

A medida que he ido cogiendo mayor interés en los gráficos 3D en general, he empezado a aprender un poco de Houdini, una herramienta que creo me va a ser de grande utilidad en mi futuro trabajo.

Houdini + Nvidia Flex (UE4) Test

El WebGL está en boca de todos, y dentro de poco se esperan novedades. ¿Cuáles son las expectativas y la visión sobre la codificación en el futuro más cercano?

WebGL permite el uso de la tarjeta gráfica (GPU) para acelerar no sólo gráficos en tiempo real, sino también para realizar otros cálculos cómo por ejemplo simulaciones físicas. Pero WebGL se ha basado en un estándar bastante antiguo, concretamente OpenGL ES (OpenGL for Embedded Systems). Las grandes empresas tecnológicas tienen sus propias API para gráficos, más modernas y optimizadas: Direct X (Microsoft) y Metal (Apple). Khronos está trabajando en Vulkan, un estándar de programación 3D más moderno que eventualmente pueda reemplazar OpenGL y OpenGL ES. Veremos...

Pronto tendremos WebGL 2.0 en todos los browsers. De este modo, los navegadores se pondrán al nivel de OpenGL ES 3.0. Pero lo más importante es que Google, Apple, W3C, Mozilla y Microsoft están trabajando en el futuro estándar llamado WebGPU. A diferencia de WebGL, WebGPU no está basado en ningún estándar existente, y será una API moderna basada en conceptos de Direct3D 12, Metal y Vulkan.

¿Crees que estas nuevas tecnologías van a transformar nuestras experiencias cotidianas?

Estas tecnologías van a evolucionar (junto con el hardware) para permitirnos hacer más cálculos o dibujar más objetos en menos tiempo. Todo esto combinado con la evolución de librerías y la simplificación del uso del 3D en la web, van a permitir que sea cada vez más común encontrar contenidos 3D o efectos especiales complejos en la mayoría de los sitios web, ya sea en móvil o desktop.

City Of Drones - Digital Revolution Exhibition, Barbican, London con FIELD, Liam Young, John Cale & Owen Hindley 

Ahora que la nueva web de Runroom es realidad, nos gustaría que nos explicaras el proceso de traducción del branding a esta animación.

La verdad es que me lo he pasado genial preparando el taller de programación creativa y desarrollando la base de la interpretación del branding en animación en tiempo real. A menudo, al trabajar solo, hago las cosas de forma más inconsciente e intuitiva. En este caso, al tener qué explicar exactamente lo que estaba haciendo a un grupo de developers de Runroom, he tenido que reflexionar y pensar mucho más en cada paso que daba. Ha sido un ejercicio muy gratificante.

Acostumbro a recibir unas imágenes, explicaciones y referencias de animación. Entonces hago bastantes preguntas para asegurarme que estoy en sintonía con lo que tienen en mente. A partir de aquí empieza una fase de experimentación para empezar a desarrollar el look&feel final. Esta es una de las fases que más disfruto.

En este caso concreto, lo primero que me vino a la cabeza fue spray, y quizás la acción de pintar con él. Pero después de hablar con César y lo que había comentado con Folch, descartamos esta opción y hablamos más de fluctuación y movimiento de partículas. Entonces empecé a trabajar más con el movimiento de ondas cómo la máscara que mezcla los dos tonos, más el ruido para generar la textura granular de las partículas.

En base a tu experiencia, ¿cómo crees que puede impactar en el negocio de nuestros clientes utilizar este tipo de tecnologías?

Hace 20 años internet no tenía vídeo ni audio a no ser que instalaras plug-ins. Las imágenes eran "caras". Pesaban mucho en aquella época...

Hoy en día tenemos muy asumido que podemos tener imágenes, audio y video sin problemas y de forma estándar, sin plug-ins y en la palma de nuestra mano. Pero no solo eso, en nuestros navegadores hoy podemos tener gráficos acelerados en 3D, integrar sistemas de inteligencia artificial y hacer un montón de cosas más. Los clientes y los usuarios se están acostumbrando a experiencias interactivas más lúdicas y es normal que empiecen a pedir contenidos más "avanzados".

A parte, cada vez es más común utilizar las mismas tecnologías web en instalaciones físicas con proyecciones, luces, control de motores vía NodeJS y Arduino, etc. Son otros servicios adicionales que puedes ofrecer cuando sales del web de contenidos y negocio más convencional.

Tenemos curiosidad por saber cómo te trasladan los diseñadores lo que tienen en la cabeza. ¿Cómo es un buen brief?

Cuando un concepto es claro y las referencias también es un muy buen punto de partida.

Pero lo más sorprendente de la industria es que le está costando un montón que los diseñadores y creativos sepan algo de programación. Aunque en algún caso, me he encontrado con directores creativos y de arte que entienden la programación y que son capaces de entrar en el repositorio, compilar un proyecto y hacer cambios directamente de algunas variables que contienen colores o atributos de animación, etc. Esto ayuda muchísimo durante la producción. Resulta muy frustrante para las dos partes cuando empiezas a tener conversaciones de copy&paste de colores de un gradiente producido por iluminación y otros factores... Ah no, Hmmm.. prueba mejor este color, etc. Resulta mucho más productivo hacer un pull y encontrarte los ajustes ya hechos. Seguramente habrá requerido su tiempo dar en el clavo, cambiando atributos de luz, shading, color, etc.

De la misma manera, yo me considero en parte diseñador. Tengo que entender este lenguaje también. Parte de mi trabajo consiste también en diseñar un look&feel y va muy a menudo ligado al diseño generativo. El código es simplemente una herramienta más. Todas estas líneas son muy difusas y deberían serlo todavía más.

Actualmente doy clases de programación creativa en un máster de Interaction Design en el IED. Resultaba extraño y algo anticuado que a los estudiantes les hicieran escoger al cabo de unos meses entre UX design o programación. Por suerte esto lo han cambiado para que todos tengan que hacerlo todo.

Estoy convencido que la tendencia será más convergente en este sentido. Diseñadores-programadores y programadores-diseñadores. Del mismo modo, creo que un buen director creativo en el sector digital, debería pasar unos cuantos años en uno de estos dos grupos al menos.
 

Sobre Edu Prats

Edu Prats es un director técnico-creativo, programador y creador que trabaja a caballo entre el diseño generativo, los gráficos en tiempo real y la interacción.

Sus proyectos están ejecutados mayoritariamente con tecnologías web modernas, aunque Edu utiliza una gran variedad de lenguajes y tecnologías dependiendo de la ocasión jocabola.com.

Ha colaborado con estudios como B-Reel, FIELD, Nexus Interactive, Hi-Res! y Fork Unstable Media entre otros.

Ha trabajado con marcas como Google, Adidas, Audi, CNN y IBM; y colaborado con artistas como Arcade Fire, The XX y Gorillaz.

Ha participado en eventos como Sónar, OFFF y Music Hack day.

Fue co-fundador del festival y plataforma educativa Resonate, co-comisario del 2012 al 2014 y comisario en 2015 y 2016, antes de abandonar el festival para volver a centrarse en su otro trabajo.

Actualmente trabaja como creador y consultor e imparte talleres de formación para empresas y formación en la universidad.