Usar Processing.js mediante el lenguaje Processing

  • Por
Cómo usar las librerías Processing.js para el trabajo con canvas, programando el funcionamiento mediante el lenguaje Processing.
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.

<script src="processing-1.1.0.min.js"></script>

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.

<canvas data-processing-sources="ej1.pjs"></canvas>

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.

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

Comentarios

David

26/5/2011
Error en Doctype
Creo que el Doctype que debieron usar era <!DOCTYPE html> ... usaron el de html 4

midesweb

15/10/2011
Doctype HTML5
Hola David,

Es verdad estaba mal el doctype, había colocado el del HTML4 y esto es HTML5.
Gracias por tu ayuda. Ya lo he corregido.

Saludos!

Raylin

19/6/2012
Aclarando algunos puntos
Hola muchas gracias pro estso tutoriales magnificos. Solamente añadir que deben de probar los ejemplos desde el servidor y no de forma local, si tienes WampServer, XAMPP, o AppServer, se pueden probar desde ahí y funcionan! Saludos!