Introducción a la Programación Creativa a través de un collage

Asignatura: Programación Creativa

Nombre del estudiante: Jordi Roda

Consultora y profesor: Anna Carreras / Quelic Berga

Introducción

“Qué es la Programación Creativa?”- me pregunta mucha gente cuando les hablo de esta asignatura que este año cursé en la UOC-. Creo que la mejor manera de explicarlo es a través de un ejemplo práctico.

Por eso, mediante este artículo, voy a presentarles una práctica que hice en el curso y tratar así de introducirles en el mundo de la programación creativa.

Etapas y retos

El enunciado de la práctica planteaba hacer un collage o mosaico animado, usando imágenes o recortes de estas.

Aprendizaje tecnológico

En la parte técnica no tuve dificultades, ya que tengo conocimientos avanzados de programación. Tan solo me puse al día de las tecnologías que había que usar para la práctica: JavaScript y la librería p5.js. Esta librería está basada en Processing, uno de los entornos de trabajo de programación creativa más extendidos gracias a su facilidad de uso.

Aprendizaje artístico

En la parte creativa lo más complejo fue encontrar una idea. De modo que busqué inspiración en un collage de ejemplo del libro Generative Design (Bohnacker, H., Gross, B. & Laub, J., 2012) que formaba parte del material docente de la asignatura. Dos puntos me llamaron especialmente la atención:

• El uso de la técnica del mosaico para la generación de las distintas composiciones del cielo.
• El uso de la técnica del fotomontaje o collage para crear las escenas a nivel de tierra.

Con estos dos puntos tenía mis principales herramientas para formar mi propia obra.

Concepción de la idea

Partiendo del ejemplo del libro, cambié los elementos principales para basar la obra en una composición con un paisaje marítimo. Como imagen de fondo usé un mar, y como objetos de la escena, un tiburón y un patinete tripulado por varias personas.

En la obra que usé como inspiración, las escenas eran instantáneas estáticas pero en mi caso, quería hacer algo en movimiento, pequeñas representaciones teatrales que duraran unos segundos.

Implementación de la idea

Para hacer el fondo, troceé la imagen del mar e hice un collage que representaba el oleaje. Animado, pues siempre está en movimiento.

A continuación, recorté los elementos de la escena principal: el tiburón y el patinete.

Programé el siguiente comportamiento para cada uno de los elementos de la escena:

• El tiburón aparecería en un lugar al azar, y a continuación haría sucesivas apariciones en pos del patinete.
• El patinete seguiría rutas de un lado a otro del escenario, acelerando el paso a medida que el tiburón hace más apariciones.

Finalmente, para aumentar el dramatismo, añadí un sonido disonante a cada aparición del tiburón.

Podéis ver el resultado final del proyecto en acción, haciendo clic en este enlace.

Conclusiones

Como se puede observar, la programación creativa me permitió crear una pequeña historia animada, con el solo uso de imágenes y un archivo de sonido. Requiere ciertos conocimientos informáticos y matemáticos, pero, aun así, está al alcance de todo el mundo.

El autor de este artículo les recomienda que si tienen ocasión se descarguen el entorno de desarrollo de Processing y que jueguen con él. Si además tienen intención de cursar la asignatura, les avanzo que es el “patio de recreo” ideal para poner en práctica esta tecnología.

Para terminar, les dejo una muestra de mis otras prácticas:

Documentación:

Imagen del mar (Unsplash)

Imagen del tiburón (Travelbag Ltd)

Imagen del patinete (Phil Campbell)

Enlaces relacionados:

Los enlaces ya los he indicado a lo largo del texto mediante la inserción hiperenlaces. De todas formas, los enumero de nuevo:

• p5.js: https://p5js.org/
• Processing: https://processing.org/
• collage de ejemplo: https://vimeo.com/35662236
• sonido disonante: http://freesound.org/people/unfa/sounds/256332/
• Imagen del mar (Unsplash): https://www.pexels.com/photo/sea-water-ocean-waves-6644/
• Imagen del tiburón (Travelbag Ltd): https://flic.kr/p/gLftrs
• Imagen del patinete (Phil Campbell): https://flic.kr/p/d1eM7

Otros enlaces de interés:

• Creative Coding: https://en.wikipedia.org/wiki/Creative_coding
• Generative Design: http://www.generative-gestaltung.de

Cita recomendada: RODA, Jordi. Introducción a la Programación Creativa a través de un collage. Mosaic [en línea], marzo 2017, no. 147. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n147.1711.