Por esas cosas que tiene la vida me tengo que leer Visualizing Data de Ben Fry, uno de los popes del idem, o de la analítica visual, o de como como quiera que llamen a eso de intentar meter datos de 15 dimensiones en 400x400 pixels.

El caso es que el amigo Ben, se pasa el segundo capítulo de su libro hablando de un lenguaje de manipulación de gráficos llamado Processing, un lenguaje de scripting bastante apañado que hace muy sencillo hacer dibujitos y animaciones interactivas. Cuando digo que lo hace sencillo, me refiero a que intenta conseguir que diseñadores gráficos y "artistas multimedia" escriban código.

El caso es que jugar con el entorno de processing es bastante divertido y se consiguen resultados bastante vistosos con muy poco esfuerzo. Me recuerda un montón a la versión de LOGO con la que escribí mis primeras líneas en un ordenador (¡qué tiempos aquellos!).

La tortuga de LOGO en toda su gloria

Processing está escrito sobre Java. Esto es una ventaja pero también un inconveniente, sobre todo cuando quieres colgar una de tus animaciones en la web, ya que tienes que hacerlo vía applet. Generar el applet es muy sencillo con Processing, pero aún así un applet es, bueno, un applet.

Afortunadamente, recordé que el gran Javi Santana me envío en algún momento un mail hablándome de processing.js, un port de parte de la API de processing a javascript, escrito por John Resig, el autor de JQuery, al que tanto debemos todos los que hacemos programación web.

Processing.js funciona usando el objeto canvas que ya soportan algunos navegadores (mis pruebas las he hecho con Firefox 3.0.6) y funciona bastante bien. La API tiene dos formas de trabajar, puedes suministrarle código processing a un objeto javascript y un parser compuesto por un puñado de expresiones regulares lo transforma en código canvas javascript que luego evalúa, o se puede trabajar con un objeto javascript Processing, e ir invocando sobre él las funciones de la API de processing.
Este último modo resulta quizás más interesante, ya que permite en el repintado interaccionar con otros elementos HTML de la página. Como ejemplo os paso el código de una de las demos del sitio de processing reescrito con processing.js, con un pequeño extra que hace posible repintar el fondo del canvas usando los valores suministrados desde el HTML de la página.

Para hacerlo funcionar cambiad la ruta hasta processing.js del código:

 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
 <html> <head>
 <title></title>
 <script type="text/javascript"
 src="../processing/processing.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
  window.onload = function(){
    var p = Processing("canvasElement");
    p.setup = function() {
       p.size(400,400);
       p.stroke(255);
       p.background(0,0,0);
    };
    p.draw = function() {
       p.background($("#r").val(),$("#g").val(),$("#b").val());
       p.line(150,25,p.mouseX,p.mouseY);
    }
 
    p.init();
 };
 </script>
 </head>
 
 <body>
 <h1>Canvas demo</h1>
 
 <p>
 <label for="r">red</label>
   <input type="text" id="r"></input>
 </p>
 <p>
 <label for="g">green</label>
   <input type="text" id="g"></input>
 </p>
 <p>
 <label for="b">blue</label>
   <input type="text" id="b"></input>
 
 </p>
 <br/>
 
 <canvas id="canvasElement" height="150" width="600"/>
 
 </body> </html>

Os recomiendo que le probéis tanto processing, como processing.js, seguro que pasáis un buen rato.