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.

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.

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.

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

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.