Definir interacción con el usuario en canvas con Processing.js

  • Por
Cómo implementar eventos de ratón en el elemento canvas del HTML5 mediante el framework Processing.js.
A lo largo de esta introducción al framework Processing.js hemos podido conocer ya varias de las utilidades que facilitan la animación dentro de los elementos canvas del HTML5. Claro que hemos visualizado únicamente la punta del iceberg y que Processing.js contiene mucho más de lo que hemos explicado, no obstante, esperamos que el lector haya podido adquirir una idea general de las posibilidades que ofrece.

No obstante, esta introducción no estaría completa si no hablamos un poquito de interacción con el usuario, así que en este artículo vamos a mostrar de una manera rudimentaria cómo podemos detectar eventos de ratón y cómo podemos realizar acciones cuando se produzcan.

Además, en este artículo volveremos sobre lo explicado en el tema anterior, creando un nuevo ejemplo de trabajo con las librerías Processing.js escribiendo código directamente con Javascript nativo.

En el presente ejemplo vamos a crear un dibujo de una bola que sigue los movimientos del ratón por el lienzo de canvas. Es un ejemplo bastante sencillo, en el que aprenderemos a trabajar con un tipo de método adicional que se ejecuta cuando se mueve el ratón por el canvas, que se llama mouseMoved.

Nota: El método "mouseMoved" es similar en esencia a los métodos "setup" y "draw". Recordemos que "setup" servía para inicializar el canvas y "draw" para implementar la animación por medio de fotogramas. Pues bien, "mouseMoved" sirve para ejecutar código cuando el ratón se mueve por encima del lienzo de canvas.

En el artículo anterior conocimos la estructura básica que tendría un archivo HTML que utiliza Processing.js para animar un canvas, por lo que ahora vamos a mostrar simplemente la función que pondría en marcha las funcionalidades de Processing.js.

function miProceso(processing) {
   var posX = 100;
   var posY = 100;
   
   processing.setup = function(){
      processing.size(300,300);
      processing.fill(220, 0, 55);
      processing.frameRate(15);
   };
   processing.draw = function() {
      var tamano = 50 + (Math.sin(processing.frameCount) * 5)
      var tamano2 = 50 + (Math.cos(processing.frameCount) * 5)
      processing.background(255, 200, 200);
      processing.arc(posX, posY, tamano, tamano2, 0, (2*Math.PI))
   };
   processing.mouseMoved = function(){
      posX = processing.mouseX;
      posY = processing.mouseY;
   }
}

Ahora podemos ver que el código es muy parecido al que teníamos en ejemplos anteriores. La novedad más importante en este caso es que estamos asignando una función a la propiedad "mouseMoved", que como acabamos de decir, sirve para definir las acciones que realizar cuando el ratón se desplaza sobre el canvas.

Estamos utilizando algún método adicional en este script de los pertenecientes a la librería Processing.js, que vamos a comentar a continuación:

processing.frameRate(15);

Con este método definimos el número de frames (fotogramas) por segundo que tendrá la animación, es decir, el número de veces que se ejecutará el método draw() en cada segundo. En este caso estamos definiendo que se hagan 15 fotogramas por segundo, cuando el valor por defecto es de 60.

Nota: Por supuesto, si la animación es muy compleja, merece la pena bajar este número de frames, para que los ordenadores poco potentes puedan ejecutarla sin significar una carga exagerada para el sistema. En este caso la animación no es nada pesada para el ordenador, pero aun así está bien probar esa característica.

processing.frameCount

Esta propiedad lleva la cuenta del número de fotogramas visualizados desde que se inició la animación. Por ejemplo, si el frameRate se fijó en 15 fotogramas, a los 2 segundos la cuenta nos daría 30 fotogramas.

Nota: Quizás os preguntéis para qué sirven las líneas de código donde se está utilizando la propiedad frameCount. Son simplemente para crear dos variables tamano y tamano2, que utilizaremos para crear la forma circular que seguirá los movimientos del ratón. Esas variables las enviaremos como parámetros para definir el tamaño del arco, al invocar la función arc(). Tendrán un valor variable cada vez que se llame a draw(), que producirá el efecto de animación. Como resultado, en el ejemplo podremos ver que el tamaño del círculo irá variando con una frecuencia, lo que dará la sensación de que la forma se estira y se encoje constantemente. Esa frecuencia la obtenemos matemáticamente a través de las funciones seno y coseno, que invocamos a través de los métodos sin() y cos() de la clase Math, nativa de Javascript.

processing.arc()

Esta función sirve para dibujar arcos de circunferencia, de manera similar a como se definen en la función arc() nativa de Javascript para el dibujo con Canvas.

Pero lo que más nos debe llamar la atención en este ejercicio es el código asignado a mouseMoved, en el que tenemos acceso a las propiedades mouseX y mouseY.

processing.mouseMoved = function(){
   posX = processing.mouseX;
   posY = processing.mouseY;
}

Como podemos haber deducido, processing.mouseX nos dará la posición del ratón en la horizontal y processing.mouseY la posición en la vertical.

Eso es todo por ahora. Simplemente nos queda poner un enlace al ejemplo en marcha.

Conclusión

De momento este manual va a dar una parada por aquí. Hemos de reconocer que los ejemplos realizados hasta ahora no son muy espectaculares, pero sí nos pueden dar una visión general de qué es Processing.js y cómo puede ayudarnos a realizar tareas más complejas.

Nuevamente, recomendamos explorar los propios ejemplos que encontraremos en la página del producto y la referencia completa de Processing.js, que nos ofrecerá una visión más completa de la potencia de este framework Javascript para dibujo y animación basado en el elemento Canvas del HTML5.