Using Processing to Make Interactive Art

Cómo usar el procesamiento para hacer arte interactivo

El procesamiento es un lenguaje de programación utilizado por artistas visuales para hacer arte generativo e interactivo. Además de crear gráficos en pantalla, el lenguaje también se usa para hacer todo tipo de esculturas interactivas y artes físicas. Al principio, es difícil comprender para qué sirve, pero basta con decir que el mundo del arte ha adoptado Processing como su lenguaje de programación preferido.

En este artículo, vemos cómo la banda The Sinatra Test creó una portada para su próximo álbum que crea una versión única para cada usuario a través de una aplicación para Mac distribuida con la música.

Generador de portadas de álbumes

Para su próximo álbum «ambientertainment», The Sinatra Test quería tener un diseño de portada que reflejara la naturaleza generada de la música en el álbum. El procesamiento ofreció un método simple y fácil de aprender para hacer precisamente eso.

El código de la portada del álbum aún no está terminado en el momento de escribir este artículo, pero estaban lo suficientemente satisfechos con el resultado como para permitirnos ver los resultados hasta ahora y publicar el código de esta versión inicial para que la gente lo pruebe por sí mismo.

El código es muy corto y simple, pero hace el trabajo. En esta versión actual en Mac, ejecutar la compilación de la aplicación crea una variación en el diseño y la guarda en la misma ubicación que la aplicación.

procesamiento-mac-cover

Para instalar Processing, vaya a la Página de descarga en el sitio y haga clic en el enlace de su plataforma. Cuando se haya descargado, descomprima el archivo ZIP y arrastre la aplicación a su carpeta de aplicaciones.

Hazlo un PDF

El primer paso es cargar la biblioteca de creación de PDF:

Luego establecemos el tamaño de la salida en pantalla, en este caso 500 píxeles cuadrados:

Obviamente, la salida es un gráfico vectorial PDF, por lo que se puede escalar a cualquier tamaño sin degradación ni líneas irregulares.

A continuación, debemos definir un nombre de archivo para el PDF resultante y comenzar a grabar los gráficos a medida que se crean para almacenarlos en la imagen final:

beginRecord(PDF, "cover.pdf");

A continuación, se definen los colores de la imagen. El fondo es negro:

En caso de duda, aleatorizar

Para crear los colores de las hebras se decidió que en su mayoría fueran verdes pero con variaciones. La estrategia era que el RGB de los colores fuera aleatorio pero con el elemento verde siempre pudiendo ir más alto que el rojo o el azul. El verde puede llegar hasta 256, pero los otros dos canales tienen un tope de 100.

Entonces definimos las variables flotantes rojo, verde y azul con los siguientes valores:

float red = random(100);
float green = random(255);
float blue = random(100);

Esto crea una nueva combinación de colores cada vez, verde cada vez pero con distintos grados de rojo, verde y azul para ajustar el tono. Siempre hay más verde que rojo o azul.

¿Pelo, Hojas o Cebollino? ¡Quién sabe!

Ahora el código para dibujar los hilos. El grosor de línea de cada hilo es aleatorio, y la posición horizontal de la parte superior e inferior de los hilos también varía aleatoriamente dentro de ciertos parámetros. Los mechones son 60% translúcidos, lo que da como resultado un agradable efecto de mechón similar al cabello:

for (int i = 0; i < 500; i++) {
    float r = random(10);
    strokeWeight(r); stroke(red, green, blue, 60);
    float offset = r * 5.0;
    line(i-20, 500, i+offset, 0);
}

Ahora algo de texto

A continuación, se debe crear la fuente. Para su uso en Procesamiento, las fuentes deben convertirse a un formato .vlw. Esto se hace desde una cara en el directorio de fuentes en el sistema host.

Nota: esta es un área en la que la banda todavía está trabajando. Para las aplicaciones web, la fuente convertida se puede almacenar en el servidor y nunca se instala en el sistema del usuario.

PFont font;
font = createFont("CooperBlackMS",24);
textFont(font);

Una vez que se crea la fuente, el texto se escribe en la imagen, el nombre de la banda arriba a la izquierda y el nombre del álbum abajo a la derecha:

text ("the sinatra test", 10, 20);
text ("ambientertainment", 250, 490);

Aparentemente, se necesitó mucho ensayo y error para ubicar el texto correctamente, y las coordenadas aparentemente arbitrarias son las que se ven mejor en la pantalla.

Envuélvelo

Luego finaliza la grabación del PDF, deteniendo efectivamente el programa y escribiendo la imagen terminada en el disco con el nombre de archivo definido anteriormente:

Finalmente, el programa imprime un mensaje en la consola para indicar que ha terminado:

print("Done it! New Album Created");

Refinamientos

La versión final de la aplicación tendrá algunas mejoras, como una fuente incrustada y una interfaz de usuario un poco más interactiva, lo que quizás le permita al usuario preestablecer algunos parámetros.

Además, el programa Processing en la Mac escribe Java de forma predeterminada para crear aplicaciones, que es para lo que se usó en este caso, pero puede incluir otros modos como Coffeescript, Javascript y Python si así lo desea. También se investiga una versión del software codificada para Javascript que crea la portada del álbum a través de una página web y la descarga en la computadora del usuario.

Generar arte usando software es una tendencia creciente en el arte moderno. ¿Has tenido alguna experiencia en Processing o arte generativo? Háganos saber sus pensamientos en los comentarios a continuación.

Experto Geek - Tu Guía en Tendencias Tecnológicas