Primeros pasos para usar Processing.js

  • Por
Cómo usar el framework para trabajo con canvas Processing.js, escribiendo código en el lenguaje Processing o escribiendo código nativo Javascript.
En el artículo anterior comentamos las particularidades de las Librerías Processing.js para el trabajo con el elemento Canvas del HTML5. Fue una sencilla introducción sobre lo que este framework ofrece a los desarrolladores de páginas web, en la dejamos en el aire toda la información necesaria para comenzar a utilizarlo.

Así pues, vamos a comentar en este artículo, de manera general, las dos formas posibles de utilizar Processing.js en páginas web. La primera de ellas basa su funcionamiento en el uso del propio lenguaje Processing y la segunda permite usar las librerías directamente a través de Javascript, lo que quizás resulte más cómodo para las personas que conocen ese lenguaje de programación. En cualquier caso, ambas posibilidades funcionarán siempre que dispongamos de un navegador compatible con Canvas del HTML5.

Nota: Esta guía está inspirada en la sección Learning de Processing. Si lo deseamos, hay otro documento, también en inglés, que es interesante para empezar a usar el framework "Processing.js Quick Start", publicado en el propio sitio de Processing.js.

Descargar Processing.js

El primer paso consiste en descargar las librerías de Processing.js, para lo cual basta con acceder a la página de descargas del framework:

http://processingjs.org/download

Podemos obtener un zip con varios archivos, incluido el propio framework, otro zip con varios ejemplos o el archivo .js suelto en dos formas, normal y minimizado. En el momento de escribir este artículo están en la versión 1.1.0, con lo que el archivo para poner en marcha Processing.js se llama "processing-1.1.0.js" y el minimizado se llama "processing-1.1.0.min.js". Cualquiera de esas dos opciones servirá para comenzar, aunque en etapa de desarrollo interesa utilizar el archivo completo y en etapa de producción el minimizado.

Nota: Processing.js, en su versión minimizada ocupa 284Kb. Si tenemos en cuenta lo que ofrece no nos parece un peso muy grande, pero claro, todo depende del uso que se haga de las librerías. Por ejemplo, si queremos simplemente hacer que un texto se mueva por la página, sería demasiado grande y nos convendría pensar en otra posibilidad. Ahora bien, si hemos visto la página de ejemplos de Processing.js, podremos haber comprobado que las posibilidades que nos ofrece son muy grandes y que merece mucho la pena para hacer determinado tipo de programas.

Opción 1) Usar el lenguaje Processing

La primera posibilidad que nos proponen es trabajar con el lenguaje Processing, que opinamos estaría bien para aquellas personas que tengan experiencia previa en ese lenguaje de programación.

Nota: Aunque los navegadores entienden solo el lenguaje Javascript, y los métodos y funciones de dibujo en canvas están implementados en Javascript, cualquier navegador compatible con canvas del HTML5 podrá entender el lenguaje Processing. Esto es gracias a que el framework processing.js hace una conversión del código en lenguaje Processing a código nativo Javascript, antes de mandarlo a ejecución por parte del browser. Así pues, el navegador lo único que ejecuta realmente es el código en lenguaje Javascript.

Esta manera de trabajar con Processing.js la explicamos en el artículo usar Processing.js mediante el lenguaje Processing.

Opción 2) Usar código nativo Javascript

La segunda posibilidad es escribir directamente código Javascript nativo, haciendo uso del objeto Processing, que implementa el framework. Esta segunda opción será propia para las personas que ya tenga experiencia en Javascript y no vean la necesidad o no deseen aprender un nuevo lenguaje.

Esta otra manera de trabajar con Processing la explicaremos en el artículo usando Processing.js mediante Javascript.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir