Crear con código: Processing

processing-sketch

Continuamos explorando las posibilidades de la programación creativa con una serie de artículos acerca de las herramientas que permiten desarrollar proyectos creativos con código. En este artículo echamos un vistazo a Processing, el lenguaje y entorno de programación creado por Ben Fry y Casey Reas en 2001 que se ha popularizado a lo largo de más de una década hasta convertirse en uno de los recursos principales de numerosos artistas y diseñadores.

Reas and Fry desarrollaron Processing cuando eran alumnos del Aesthetics and Computation Group del MIT Media Lab, en el que impartía clases el diseñador John Maeda. Según recuerda Maeda en un artículo publicado en el MIT Technology Review en 2009, “Processing empezó con una simple idea. Fry era un talentoso licenciado de Carnegie Mellon con formación en diseño gráfico que también podía programar en el lenguaje ensamblador de Apple II. Reas era un talentoso licenciado de la Universidad de Cincinnati con formación en diseño gráfico y un deseo apasionado de entender la computación […] Ambos eran artistas de éxito que habían expuesto su obra en el Whitney Museum, el MoMA y otros lugares. Les encantaba trabajar juntos y querían que otros programadores y diseñadores, artistas y científicos, tuviesen una forma sencilla de compartir su trabajo y entender sus ideas.” Processing surge por tanto del interés por aunar la creatividad de artistas y diseñadores con el potencial de los lenguajes de programación. El proyecto se desarrolla en el marco del programa Design by Numbers (DBN), dedicado a enseñar a artistas y diseñadores a crear con código. Este entorno, creado por Maeda, limitaba las posibilidades de creación a un espacio de 100 x 100 pixels en blanco y negro. Pero Fry y Reas pensaron que sería interesante crear algo más flexible, con color y un espacio ilimitado.

Las posibilidades de creación en un entorno gráfico también estaban limitadas por las incompatibilidades entre PC y Mac y las limitaciones del lenguaje Java, sobre el cual se fue construyendo Processing. Un factor determinante en su posterior popularidad fue el hecho de desarrollarse como una comunidad, con software de código abierto, que se enriquecía con las aportaciones de otros programadores y creadores. Rápidamente, Processing se ha ido ampliando a otras plataformas e incorporando nuevas funciones que sobrepasan las intenciones originales de Fry y Reas. Como indica Maeda, “Processing tiene el espíritu de un proyecto artístico y una pasión. Como artistas, Fry y Reas han tenido un profundo interés en dar al software todo el poder expresivo que han podido: lo han empleado para producir resultados que podían calificarse como arte.” Para un artista visual, es habitual ver los resultados de su obra a medida que la está produciendo, y este es uno de los objetivos principales de Processing: hacer visibles lo que producen una serie de líneas de código a medida que se escriben. Trabajar con instrucciones escritas en un lenguaje cuya particular sintaxis es preciso aprender y entender resulta de entrada un paso difícil para una persona sin conocimientos de programación, acostumbrada a elaborar composiciones visuales y fiarse más del instinto que de una lógica precisa y cerrada. En este sentido, Processing no sólo facilita el acceso al código si no que también permite comprender el potencial de trabajar directamente con código en lugar de emplear un programa de diseño o retoque de imágenes.

Para entender este potencial resulta interesante ver el documental Hello World! Processing, producido por el colectivo Ultra-lab en 2013. En este vídeo se hace una introducción a los lenguajes de programación indicando cómo vivimos rodeados de códigos y procesos regidos por unas normas compartidas por los agentes que participan en ellos. Un repaso al impacto de las nuevas tecnologías en los ámbitos de las artes visuales, el diseño y numerosas profesiones demuestra la importancia de conocer y saber trabajar con estas nuevas herramientas, a la vez que se presentan unas nociones iniciales sobre Processing. A continuación, recomendamos dirigirse a Processing.org y lanzarse a escribir código.

Primeros pasos con Processing

La web del proyecto cuenta con numerosos tutoriales y recursos, además de los diversos manuales y libros que se han publicado sobre este lenguaje y entorno de programación. El primer paso es descargar el software (actualmente en la versión 3.11), disponible para Windows, Linux y MacOS X. El software es gratuito, aunque desde la Fundación Processing animan a los usuarios a hacer un donativo para contribuir al desarrollo de la propia plataforma. Una vez descargado e instalado el programa, el usuario se encuentra con una sencilla interfaz, compuesta por una ventana principal en la que se escribe el código de programación (que incluye una barra de menú, herramientas, un espacio para mensajes y una consola) y otra ventana en la que se visualizan los resultados.

processing

Al clicar en el botón “play”, el código introducido se ejecuta, de manera que es sencillo ir viendo los resultados que genera cada línea de código. En la parte inferior de la pantalla, la pestaña “Errores” informa de cualquier fallo en la sintaxis del código, algo que puede ocurrir frecuentemente puesto que la correcta posición de cada parentésis, coma o punto y coma (así como los nombres de las variables, etc.) es fundamental para que el programa se ejecute como es debido.

Una instrucción sencilla, propuesta en el tutorial escrito por Reas y Fry, es la siguiente:

ellipse(50, 50, 80, 80);

 

Esta línea de código indica al programa que debe dibujar una elipse cuyo centro se sitúe a 50 pixels del borde izquierdo y 50 pixels del borde superior del area de visualización, con un ancho y alto de 80 pixels. De la misma manera, se puede dibujar otras formas geométricas (arco, línea, punto, cuadrado, rectángulo, triángulo) y composiciones más complejas. Pero lo más interesante es la posibilidad de generar composiciones de forma automática o introducir la interacción con el usuario, por ejemplo por medio de la posición del ratón y la opción de hacer clic. El segundo ejemplo que encontramos en el tutorial es el siguiente:

void setup() {
 size(480, 120);
}
void draw() {
 if (mousePressed) {
 fill(0);
 } else {
 fill(255);
 }
 ellipse(mouseX, mouseY, 80, 80);
}

 

Con este código se introducen nuevas posibilidades, como la de definir el espacio de visualización (void setup), dibujar una determinada forma siguiendo la posición del ratón (ellipse(mouse X, mouseY, 80, 80);) e introducir cambios cuando el usuario apreta el botón del ratón (mousePressed). Estas sencillas líneas de código ya ofrecen una clara idea de las maneras en que se pueden crear interesantes composiciones visuales a partir de instrucciones. A partir de este punto, se trata de conocer mejor el lenguaje y aprender de los numerosos ejemplos que se ofrecen en las librerías de referencia de la propia plataforma.