Cómo trabajar con el framework Processing.js para dibujo y animación en el elemento canvas, pero utilizando siempre el lenguaje nativo Javascript.
Los desarrolladores que tengan experiencia con Javascript probablemente preferirán seguir utilizando el mismo lenguaje del que ya tienen conocimientos. Eso es algo perfectamente lógico, porque aprender las sentencias y sintaxis del lenguaje Processing siempre significará un esfuerzo adicional, a pesar de que, como hemos visto, tanto Processing como Javascript tienen una sintaxis casi idéntica.
La decisión es entramente personal, de cada desarrollador, pues las diferencias en la práctica son inexistentes. Tanto trabajando con Processing, como trabajando directamente con Javascript, los navegadores van a ser igual de compatibles con nuestros programas y los recursos a los que tendremos acceso son exactamente los mismos.
Eso sí, el modo de crear nuestros programas tendrá algunas ligeras diferencias que debemos conocer. Para empezar, en el caso de usar Javascript, todo el código de nuestra aplicación, si lo deseamos, puede estar incluido en el mismo archivo HTML. Por ejemplo, podríamos utilizar un código como este:
<!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 id="micanvas" width="300" height="100"></canvas>
<script language="javascript">
function miProceso(processing) {
//todo el código Javascript para definir el dibujo y la animación
}
var canvas = document.getElementById("micanvas");
var miInstanciaProcessing = new Processing(canvas, miProceso);
</script>
</body>
</html>
Veamos los detalles más importantes del código anterior.
<script src="processing-1.1.0.min.js"></script>
Así incluimos el archivo de Processing.js, con el código fuente del framework.
<canvas id="micanvas" width="300" height="100"></canvas>
Esta es la etiqueta CANVAS, con la que generamos el lienzo donde vamos a realizar nuestra animación. Hay que ver su atributo "id", que luego utilizaremos para referirnos a este elemento.
function miProceso(processing) {
//todo el código Javascript para definir el dibujo y la animación
}
Esa función debe contener todo el código que queramos implementar en nuestra aplicación, para inicializar el dibujo y realizar la animación deseada. Como vemos, en la función recibimos un parámetro que se almacenará en la variable "processing". Ese parámetro es muy importante, ya que, dentro del código de la función, contendrá un objeto sobre el que podremos invocar métodos y acceder a sus propiedades, para realizar los comandos propios de las librerías Processing.js. Veremos más adelante todo eso.
var canvas = document.getElementById("micanvas");
Con esto accedemos al objeto canvas, del DOM del navegador, asociado al identificador "micanvas".
var miInstanciaProcessing = new Processing(canvas, miProceso);
Finalmente, a través de esta sentencia estamos haciendo que Processing.js ejecute la función miProceso sobre el objeto canvas que habíamos recuperado en la sentencia anterior.
Ahora que ya hemos visto la estructura básica que tendría nuestro archivo HTML, que hace uso de Processing.js para animar un canvas, vamos a ver cómo sería la función Javascript que definiría todo el trabajo de dibujo y animación.
function miProceso(processing) {
var pos = 0;
processing.setup = function(){
processing.size(300,100);
processing.fill(220, 220, 255);
var fontA = processing.loadFont("verdana");
processing.textFont(fontA, 18);
}
processing.draw = function() {
processing.background(83, 203, 0);
processing.text("Hola mundo!!!",pos,45);
pos = (pos + 1) % processing.width;
};
}
Como ya habíamos comentado, esta función recibe un parámetro que es el objeto Processing, sobre el que podemos invocar los métodos que incluye la librería de dibujo y animación.
Una vez dentro de la función, podemos definir variables globales que utilizaremos a lo largo de la animación, como es el caso de la variable "pos".
Luego tenemos dos bloques de código, definidos por dos funciones asignadas a las propiedades "setup" y "draw" del objeto Processing. Tal como vimos en el artículo anterior, la función asignada a "setup" contiene el código que inicializará el lienzo y las variables que queramos usar a lo largo del programa. Por su parte, la función asignada a "draw" contendrá el código que se ejecutará repetidas veces para producir el efecto de animación.
En el código anterior, durante el setup, realizamos varias acciones de inicialización:
processing.size(300,100);
Primero definimos el tamaño del lienzo de canvas.
processing.fill(220, 220, 255);
Luego definimos el color de dibujo, con el que se pintará un texto que vamos a dibujar más tarde.
var fontA = processing.loadFont("verdana");
Posteriormente declaramos una fuente tipográfica "verdana" que utilizaremos más adelante.
processing.textFont(fontA, 18);
Por último asignamos el tamaño de la fuente.
Durante el proceso de dibujo, definido por la función asignada a "draw", hacemos otra serie de pasos:
processing.background(83, 203, 0);
Primero pintamos el fondo del lienzo, borrando todo lo que hubiera anteriormente.
processing.text("Hola mundo!!!",pos,45);
Luego escribimos la frase "Hola Mundo!!!", en las coordenadas definidas por la varible "pos" y el valor 45. Además, se escribirá con la fuente dada de alta en el método setup (verdana a 18 puntos). Por ejemplo, al comenzar la animación, dado que pos=1, el texto se dibujará en la posición (1,45).
pos = (pos + 1) % processing.width;
Por último se incrementa en 1 la variable pos, para que en cada paso de la animación el texto se pinte en una posición distinta. La varible "pos", por medio del operador % y el valor processing.width, se consigue que se reinicie a 0 cuando llegue al valor de anchura del lienzo de canvas.
Con esto hemos conseguido una sencilla animación de un texto que se mueve de izquierda a derecha por el lienzo del canvas. Cuando llega a desaparecer por la derecha, vuelve a aparecer por la izquierda, en un bucle infinito.
Puedes ver el presente ejemplo en marcha.
En el próximo artículo explicaremos otro asunto interesante, como es la detección e implementación de eventos de ratón.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...