Introducción a Processing.js

Tal como vimos en el Manual de Canvas del HTML5, Javascript provee de una serie de funciones y métodos para realizar todo tipo de dibujos en contenedores especiales llamados Canvas, que se han incorporado en la nueva versión del lenguaje HTML. Pues bien, Processing usa como base esa infraestructura para ir un poco más allá. En resumen, podríamos decir que Processing es un proyecto encaminado a ofrecer a los programadores unas librerías de alto nivel para realizar dibujo y animación en la web, a través del elemento Canvas.

Dentro del elemento Canvas podemos hacer dibujos por medio de diversos métodos, la mayoría de los cuales son bastante rudimentarios, como dibujar líneas, rectángulos, polígonos, rellenar de color etc. Todos los métodos disponibles en Javascript para dibujo en el canvas son de bastante bajo nivel, es decir, permiten hacer las cosas más básicas. Por ello, si queremos hacer dibujos más complejos, tenemos que programar bastantes líneas de código, que permitan diseñar aquellas cosas que no estarían incluidas entre las funciones básicas de dibujo en Canvas.

Processing.js incide justamente en el soporte de funciones más complejas de dibujo y animación, es decir, ofrece un lenguaje de alto nivel para realizar cosas más complejas con el elemento Canvas. Por medio de Processing.js, los usuarios podrán realizar dibujos más complejos sin necesidad de tener que escribir mucho código, sino invocando a las funciones de una librería. Asimismo, dado que el elemento Canvas no tiene soporte directamente a animación, Processing.js ofrece una interfaz mediante la cual se puede producir movimiento de los dibujos e incluso interactividad y todo ello con muy poquitas líneas de código.

De dónde viene Processing.js

Processing (sin el ".js") es un lenguaje para realizar trabajo gráfico, tanto en 2D como en 3D. Se trata de un lenguaje de código abierto con el que los programadores pueden crear imágenes, animación e interacción por medio de una serie de funciones de alto nivel que permiten hacer gran variedad de diseños, a los que se les pueden asignar incluso movimientos y responder a las acciones del usuario.

Dado su carácter abierto, alrededor de Processing también existe una comunidad que continuamente mejora el lenguaje y lo extiende con nuevas librerías, dando soporte a elementos como el audio, redes o visualización de datos. Con ello, Processing es una herramienta que sirve para muchos ámbitos de las artes visuales.

Según sus creadores, Processing pone a disposición de sus usuarios muchas características que sólo estarían disponibles por medio de caros programas, lo que le hace especialmente interesante para usos didácticos en campos como la matemática, diseño gráfico y artístico.

Por su parte, Processing.js es un proyecto hermano de este lenguaje, pero enfocado para la web. Mediante Processing.js se pueden hacer uso de las características avanzadas de Processing en páginas web, por medio de estándares abiertos que proporciona el HTML5, como el elemento Canvas. A partir de Processing tenemos un lenguaje que permite crear gráficos interactivos, tanto en 2D como en 3D, animaciones por medio de sencillas funciones e interactividad con manejo de eventos de teclado o ratón.

Como decimos, Processing.js es un lenguaje de programación de alto nivel, con sus propias instrucciones y comandos, sin embargo, se puede utilizar sin que el navegador necesite tener instalado ningún plug-in, como podría ser Flash o Java. Para ello, Processing.js dispone de un intérprete que convierte las instrucciones de ese lenguaje en Javascript, compatible con todos los navegadores que también soportan el elemento canvas y otras características del HTML5.

Podemos encontrar más información en la web:

• Página del lenguaje Processing
• Página del proyecto Processing.js

Algunas cosas que podemos hacer con Processing.js

Como se habrá podido entender por la lectura de las anteriores líneas, las posibilidades de Processing.js son realmente grandes. Con un poco de trabajo y algo de imaginación, se pueden hacer cosas realmente espectaculares.

Entre los métodos que Processing.js nos ofrece encontraremos diversos para trabajar con estructuras de datos, fuentes tipográficas, formas 2D como arcos, elipses, triángulos, etc., formas 3D como pueden ser esferas o cajas, trabajo con color, imágenes, interacción por medio del ratón o teclado, acceso a archivos y un largo etc.

Quizás esa enumeración de ámbitos de trabajo no nos diga demasiado, pero seguro que sí tendremos una idea más exacta de las posibilidades si accedemos a la página de demos de Processing.js.

Conclusión

A medida que fuimos escribiendo el Manual de Canvas del HTML5, publicado en DesarrolloWeb.com, recibimos algunos comentarios y correos reclamando sobre la dificultad para trabajar con Canvas (por tener que hacer muchas cosas casi desde cero). Las personas que se posicionan a favor de herramientas propietarias, como puede ser Flash, tenían en ello un argumento para criticar ese avance del HTML5. Pues bien, con Processing.js podemos afirmar que esa visión negativa ha pasado a la historia.

El lenguaje Processing.js es una excelente herramienta para los que quieren trabajar con Canvas, así como la animación e interactividad de los componentes dibujados en dicho elemento, pero sin tener que partir desde cero, ya que nos ofrece un excelente soporte a partir del cual podremos rápidamente realizar muchas cosas bastante avanzadas.

Está claro que para el correcto uso de Processing.js hace falta cierta base de Javascript y alguna soltura en la programación, pero es innegable que las personas que deseen realizar componentes y dinámicos avanzados y software para páginas web, tienen un aliado en Processing.js. Con este framework para el diseño en el elemento Canvas tenemos disponibles, al desarrollar para el web, los mismos recursos con los que contarían los programadores de aplicaciones de escritorio. Todo ello con una plataforma libre, gratuita y basada en los estándares abiertos del W3C.

A lo largo de los próximos artículos ofreceremos una guía rápida para dar los primeros pasos con Processing.js.