Cómo usar las librerías Processing.js para el trabajo con canvas, programando el funcionamiento mediante el lenguaje Processing.
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.
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.
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.
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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...