El lenguaje Processing tiene diversas funciones para realizar animaciones con archivos gráficos en los elementos Canvas del HTML5. Son funciones de alto nivel que nos permitirán implementar diversos comportamientos de una manera sencilla. No obstante, su variante para Javascript, que estamos explicando en el Manual de Processing.js, tiene algunas particularidades que debemos conocer.

A lo largo de este artículo veremos un ejemplo de animación con las funciones de tratamiento de imágenes de Processing.js y explicaremos cómo realizar la precarga de imágenes mediante el código Processing, un detalle importante para que nuestros programas funcionen correctamente.

Precarga de las imágenes con Processing.js

Processing para Java tiene un flujo de aplicación síncrono, lo que quiere decir que, antes de ejecutar la siguiente sentencia de código se debe haber terminado de ejecutar la anterior. Este comportamiento no ocurre en Javascript, que tiene un flujo asíncrono.

Por esa razón, cuando declaramos una imagen con processing.js, en principio, no la podríamos utilizar inmediatamente, puesto que la siguiente línea de código se ejecutaría antes de que la imagen haya sido cargada. Obviamente esto lo solucionamos con la precarga, pero veamos antes este código.

PImage img;
void setup() {
   size(250,200);
   img = loadImage("logo-desarrollowebcom.png");
   image(img, 0, 0);
}

Este código de Processing.js realiza la carga de una imagen con loadImage(), indicando como parámetro el nombre del archivo que se desea descargar. Esa imagen se tendrá que transferir por la red y tardará un pequeño espacio de tiempo, que dependerá del peso de la imagen y del ancho de banda de la red del usuario.

Por lo tanto, en el siguiente método image(), que sirve para pintar una imagen en el lienzo del canvas, realmente no se pintará nada, puesto que la imagen seguramente no habrá sido cargada cuando se ejecute. Así pues, estamos obligados a utilizar una precarga de la imagen para que este código funcione perfectamente y el método image() disponga ya del archivo gráfico descargado y lo pueda pintar en el lienzo.

La precarga en Processing.js se realiza de una manera muy sencilla, con un código especial que se introduce con notación de comentario.

/* @pjs preload="logo-desarrollowebcom.png"; */

Con la directiva @pjs indicamos a Processing.js que ese comentario es como si fuera una línea de código que tiene que ejecutar antes de ejecutar el resto del script.

Ahora podemos ver el código Processing.js completo, de la precarga + la visualización de imágenes.

/* @pjs preload="logo-desarrollowebcom.png, logo-criarweb.png"; */
PImage img, img2;
void setup() {
   size(250,200);
   img = loadImage("logo-desarrollowebcom.png");
   image(img, 50, 10);
   img2 = loadImage("logo-criarweb.png");
   image(img2, 10, 105);
}

Podemos ver el ejemplo de precarga de imágenes en marcha en una página aparte.

Ejemplo de animación con imágenes en Processing.js

Para ilustrar un poco más las posibilidades de animación en Processing.js y seguir practicando con las librerías, vamos a crear un efecto de animación en el que va a participar una imagen.

Nuestra imagen irá dando vueltas en el canvas en torno de un eje. Al hacer clic con el ratón se moverá el eje de rotación de la imagen al lugar del lienzo pulsado. Si lo deseas, puedes ver el ejemplo en funcionamiento para saber exactamente qué es lo que se va construir.

Este es el código completo de este ejercicio:

/* @pjs preload="logo-desarrollowebcom.png"; */
PImage img, img2;
float rotacion = 0;
int centroX, centroY;
void setup() {
   size(250,200);
   centroX = width/2;
   centroY = height/2;
   img = loadImage("logo-desarrollowebcom.png");
}
void draw(){
   background(#2d2e33);
   translate(centroX, centroY);
   rotacion = (rotacion + 0.05) % 2;
   rotate(PI*rotacion);
   image(img, 20, 0);
}
void mouseClicked(){
   centroX = mouseX;
   centroY = mouseY;
}

Comenzamos por la precarga de una imagen, en la primera línea en la que se utiliza la directiva @pjs preload. Luego se realiza la declaración de diversas variables globales y a continuación tres métodos ya conocidos por los lectores para animar y definir interacción con el usuario.

La función de setup se realiza para la inicialización del canvas. En ella se define su tamaño, luego se calculan las coordenadas del eje de rotación de la imagen (que inicialmente se pone en el centro del canvas) y por último se carga el archivo de la imagen.

En la función draw se coloca el código a ejecutar en cada fotograma de la animación. Primero se borra todo con el método background(), luego se traslada el eje de coordenadas del canvas (al lugar que queremos que sea el eje del movimiento de la imagen) con translate(). A continuación se realiza la rotación, primero modificando una variable para llevar el ángulo actual de rotación, y luego con el método rotate(). Por último se pinta la imagen en un lugar del lienzo. En cada llamada a draw el cálculo de la rotación va variando gracias a la variable rotación y con ello se produce el efecto de animación.

Finalmente tenemos la función mouseClicked, que sirve para indicar qué hacer cuando se hace clic con el ratón. Lo único que hacemos es modificar el centro de la rotación al lugar donde se produjo el clic.

Eso es todo, con ello tenemos la imagen rotando tal como se puede ver en el ejemplo en marcha.