En el artículo anterior explicamos brevemente cómo realizar un primer ejemplo con Processing.js para realizar un sencillo dibujo en Canvas. Realmente lo que hicimos no añade nada a lo que hayamos podido aprender a hacer directamente con Javascript en el Manual de Canvas del HTML5. Por ello, en este artículo vamos a profundizar un poco más en el lenguaje Processing para hacer algo que merezca la pena.

Primeramente echemos un nuevo vistazo al código Processing del anterior ejemplo, pues no llegamos a explicar nada sobre él y sería bueno comentar algunas cosillas que nos ayuden a entender un poco mejor lo que acabamos de realizar.

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

Lo primero que tenemos es una función setup(). En esta función se coloca todo el código que se quiere ejecutar para inicializar el dibujo en el canvas, así como variables que queramos utilizar más adelante. Por tanto, la función setup() se ejecutará primero que todo, antes de empezar ninguna animación.

Dentro de setup() tenemos varios comandos, que son llamadas a funciones de la librería Processing, para realizar diversas cosas.

size(200,200);
Sirve para definir el tamaño del canvas con el que vamos a trabajar.

background(125, 0, 0);
Esta función sirve para borrar el lienzo y rellenar del color de fondo indicado por los tres parámetros que enviamos la función. Después de invocar a background() el lienzo del canvas se limpiará y se colocará el color que hayamos indicado.

rect(80, 80, 40, 40);
Esta función crea un rectángulo en el lienzo. La posición del rectángulo está definida por los dos primeros parámetros y el tamaño por los dos siguientes.

Función draw() para hacer una animación

En Processing las animaciones se realizan por medio de una función llamada draw() que contiene el código a ejecutar cada vez que se tiene que actualizar el dibujo. En esa función escribiremos las sentencias necesarias para generar cada fotograma de la animación. Processing.js se encargará por nosotros de realizar una llamada a la función repetidas veces por segundo, con lo que se producirá el efecto de animación.

Generalmente, en la función draw() tendremos que borrar el lienzo y luego volver a dibujar los elementos, pero en otra posición o con otro tamaño. Al variar las características del diseño cada vez que se dibuja de nuevo la imagen, parecerá como si los elementos de la imagen se están animando.

En nuestro segundo ejemplo hacemos uso de la función draw() para producir una animación. A continuación podemos ver el código en lenguaje Processing que utilizaríamos:

int tamano;

void setup(){
size(200,200);
tamano = 1;
}
void draw(){
background(125, 0, 0);
rect(0, 0, tamano, tamano);
tamano += 1;
tamano = tamano % width;
}

Como podemos ver, en un primer paso definimos una variable de tipo entero llamada "tamano".

En el método setup() indicamos el tamaño del canvas e inicializamos la variable "tamano" con el valor 1.

Posteriormente utilizamos la función draw() para dibujar nuestra animación, en la que hacemos los siguientes pasos.

background(125, 0, 0);
Borramos el lienzo, colocando rojo como color de fondo.

rect(0, 0, tamano, tamano);
Dibujamos un recuadro, que empieza en la esquina superior izquierda y tiene tanto la anchura como la altura igual al valor que tenga la variable "tamano".

tamano += 1;
Incrementamos en 1 el valor de la variable tamano. Con esto conseguimos que el siguiente paso de la animación el rectángulo que dibujaremos tenga un tamaño un poco mayor.

tamano = tamano % width;
Con esto conseguimos que, cuando el tamaño del rectángulo llegue a la anchura total del lienzo, se vuelva automáticamente al valor de tamano=0.

Nuestro ejemplo de canvas ahora tiene el aspecto que podemos ver en el siguiente enlace.

En el siguiente artículo vamos a realizar un nuevo ejemplo con Processing.js, pero utilizando el lenguaje Javascript nativo, en lugar del lenguaje Processing.