DesarrolloWeb.com > Manuales > Manual de Processing.js

Usar Processing.js mediante el lenguaje Processing

17 de mayo de 2011

Valoración del artículo:

Enviar un comentario

Ver comentarios del artículo (3)

Cómo usar las librerías Processing.js para el trabajo con canvas, programando el funcionamiento mediante el lenguaje Processing.

Por Miguel Angel Alvarez

Seguir a midesweb

En el Manual de Processing.js venimos explicando las distintas particularidades del framework Processing.js para el dibujo y animación mediante el elemento Canvas. Realmente todavía no hemos visto una sola línea de código, pero en este artículo vamos a comenzar con ello, escribiendo nuestros primeros ejemplos.

De entre las dos maneras posibles de trabajar con Processing.js, en el presente artículo veremos aquella en la que utilizamos directamente el lenguaje Processing. Aunque pueda parecer un retraso tener que aprender un nuevo lenguaje de programación, puede que esta posibilidad nos interese porque la mayoría de los ejemplos que podremos encontrar en la documentación utilizan directamente el lenguaje Processing.

Nota: Afortunadamente, la sintaxis de Processing es muy similar a la de Java o Javascript, por lo que estoy seguro que las personas experimentadas en estos lenguajes no tendrán problema en adaptarse al nuevo lenguaje. Otra cosa que resulta interesante de aprender Processing es que este lenguaje es utilizado también para hacer aplicaciones de escritorio basadas en Java, por lo que podríamos portar fácilmente nuestro programa realizado en Processing.js a Processing y así usarlo en plataformas propias de las aplicaciones de escritorio.

En resumen, para crear nuestro primer ejemplo con Processing.js tendremos que utilizar dos archivos:

El archivo .html con la página web, que tendrá que contener el elemento canvas e incluir el archivo del framework.
El archivo con el código fuente para crear nuestro dibujo o animación, con la sintaxis del lenguaje Processing.

Cómo crear la página web (archivo HTML)

La página web tendría una forma como la siguiente:

<!DOCTYPE html>

<html>
<head>
<title>Trabajando con Processing</title>
<script src="processing-1.1.0.min.js"></script>
</head>
<body>
<h1>Probando el framework para dibujo en el elemento canvas del HTML5</h1>
<canvas data-processing-sources="ej1.pjs"></canvas>
</body>
</html>

Como se puede ver, se ha incluido el script del archivo donde está el código del framework.

Además, deberemos colocar el elemento canvas en algún lugar de la página y dentro de la etiqueta CANVAS el atributo "data-processing-sources", donde indicamos el nombre del archivo que tendrá el código fuente Processing.

Como se puede ver, en este caso tenemos un archivo llamado ej1.pjs que es donde está el código Processing que va a generar nuestro dibujo o animación.

Nota: Si nuestro programa realizado con Processing está en varios archivos se colocarían todos ellos en el valor del atributo data-processing-sources, separados por un espacio.

Cómo crear el archivo con el código Processing

El segundo archivo que tenemos que utilizar es el que tiene el código Processing. En nuestro ejemplo el archivo se llamaba ej1.pjs.

Nota: La extensión típica de los archivos en el lenguaje Processing es .pde, si estamos trabajando con Processing.js podemos utilizar también otras extensiones como podrían ser .pjs o incluso .js.

En este primer ejemplo, que hemos realizado para que sea bastante sencillo, vamos a tener el siguiente código en lenguaje Processing:

void setup(){
   size(200,200);
   background(125, 0, 0);
   rect(80, 80, 40, 40);
}

Luego explicaremos algo sobre ese código fuente. De momento vamos a dejarlo de lado y simplemente probar si nuestro primer ejemplo funciona.

Ejecutar el programa basado en Processing.js

Para ejecutar el primer ejemplo que acabamos de desarrollar tendremos que abrir el archivo .html en un navegador. Por supuesto, necesitaremos un browser compatible con el elemento Canvas del HTML5.

Si nuestro navegador pone en marcha el ejemplo veremos el elemento canvas con fondo rojo oscuro y más o menos en el centro un rectángulo de 40x40 píxeles.

Podemos ver el ejemplo en marcha en una página aparte.

En el siguiente artículo comentaremos un poco la sintaxis del lenguaje Processing y veremos cómo crear una sencilla animación.