Processing es un lenguaje de programación que permite desarrollar aplicaciones en un contexto audio visual, acercando a los artistas la posibilidad de usar la tecnología en trabajos artísticos.
Este lenguaje esta construido sobre Java pero usa una sintaxis mucho más fácil, orientado a lo gráfico.
Hace algún tiempo pude probarlo y jugar un rato con él. Viene con un IDE incorporado, así que es muy fácil empezar a usarlo. Van a la página de descargas y obtienen el archivo según su sistema operativo, no hay que instalar nada, solo descomprimen y en el caso de Linux ejecutan el archivo processing.
Algunas capturas de pantalla del IDE y el ejemplo del «ojo de Sauron» ejecutándose:
El IDE de Processing con un «sketch» en blanco listo para empezar a programar
Ventanas a la izquierda con el listado de ejemplos, a la derecha el sketch con el código y el «ojo de Sauron» ejecutándose
Cuando empecé a jugar un poco con el programa pude encontrar que «por debajo» todo estaba contenido por una clase llamada PApplet, una especie de Applet para Processing, ese día puse final a mis ganas de seguir probando cosas con él, sobre todo por el poco o nulo futuro de los applets, a mi me interesaba la web, así que ahí lo deje.
Por casualidad encontré un port de Processing para Javascript, y ahí la cosa cambió. El creador de jQuery era el padre de este port. La cosa pinta muy bien, cualquier archivo creado en procesing es «transformado» a Javascript y HTML5, canvas para ser mas exacto, de esta manera es muy fácil llevar las creaciones de Processing sin instalar ningún pluggin Java, ¿no es fantástico?
Entonces ¿cómo podemos agregar nuestro archivo .pde(extensión que usa Processing al guardar el trabajo) y transformarlo a Javascript?
De la página de ProcessingJS tenemos para descargar dos archivos, processing.js y processing.min.js, aunque son los mismos, el uno se usa para ambientes de Desarrollo y el otro para ambientes de Producción, al momento de escribir esta entrada la versión se encontraba en la 1.4.8.
Agregamos nuestro script de ProcessingJS a nuestro HTML, yo lo he puesto junto con la página, pero ustedes ya saben como agregar scripts.
[html highlight=»5,10″]
<!DOCTYPE html>
<html>
<head>
<title>Sauron – Processing example</title>
<script src="processing.js" ></script>
<meta charset="UTF-8">
</head>
<body>
<h2>Sauron – Processing example</h2>
<canvas data-processing-sources="sauron.pde"></canvas>
</body>
</html>
[/html]
La línea 5 agrega la librería de ProcessingJS y en la línea 10 mediante el camvas y el atributo data-processing-sources se indica el archivo de Processing, en mi caso el archivo se llama sauron.pde y está junto al archivo html por eso sus rutas. Eso sería todo, y como se diría: un sketch vale más que mil palabras, les dejo a continuación con el Ojo de Sauron. Pasen el puntero del mouse sobre el ojo y nunca más se librarán de él.
Que lo disfruten
El Ojo de Sauron