Movimiento de objetos en processing.js

Processing.js es una librería en javascript que nos permite usar de forma sencilla elementos visuales y animaciones sobre un canvas de HTML5. La plataforma Khan Academy la integra en el desarrollo de sus materiales de programación de computadoras, y por tanto, el paso lógico que deberían seguir aquellos interesados en programar fuera de la plataforma es conocer sus posibilidades.

En la siguiente serie de artículos voy a tratar de mostrar las posibilidades que permite processing.js en la implementación de sencillos juegos sobre el canvas. Los conocimientos necesarios no distan en demasía de los adquiridos tras la realización de “Introducción a JS: dibujo y animación” y se enfocarán en mostrar y destacar las rutinas y dinámicas más interesantes que debemos conocer junto con ejemplos implementados.

En esta primera entrega, nos centraremos en el control del movimiento de un objeto sobre el canvas utilizando el ratón o el teclado. Utilizaremos la función setup para definir el tamaño del lienzo y la forma del cursor:

void setup(){
  size(800,600);
  cursor(CROSS);
}

Seguidamente, implementamos la función de dibujado que se encarga de pintar repetidamente el lienzo. Para lograr el efecto de animación, pintamos inicialmente el lienzo y llamaremos a la función de movimiento para que dibuje el objeto en la posición correspondiente:

draw = function(){
  background(0,0,0);
  move_mouse();
  move_keyboard();
}

Para el control mediante el ratón, podemos hacer uso de las variables del sistema mouseX y mouseY que obtienen la posición del puntero sobre el lienzo. Con estas coordenadas nos limitaremos a dibujar un círculo que al ser continuamente repintado dará la sensación de movimiento deseada:

move_mouse = function() {
  noStroke();
  fill(255,0,0);
  ellipse(mouseX,mouseY,25,25);
}

Finalmente, vamos  a utilizar un sistema parecido para el movimiento controlado por teclado. En este caso no disponemos de variables del sistema y por ello definimos dos variables que almacenan las coordenadas dónde centrar nuestro círculo. Controlamos la pulsación de una tecla mediante keyPressed, y validamos su código asociado con keyCode para ajustar las coordenadas del objeto apropiadamente. Por ejemplo, cada vez que pulsemos UP se decrementará el valor de la coordenada Y. Recordemos que el origen de coordenadas en el lienzo se encuentra en la esquina superior izquierda, y que las X aumentan hacia la derecha mientras que las Y aumentan hacia abajo:

var keyX = 100;
var keyY = 100;
move_keyboard = function() {
  noStroke();
  fill(255,255,0);
  ellipse(keyX,keyY,25,25);
  if (keyPressed) {
    if (key == CODED) {
      if (keyCode == UP)    { keyY-=1; }
      if (keyCode == DOWN)  { keyY+=1; }
      if (keyCode == LEFT)  { keyX-=1; }
      if (keyCode == RIGHT) { keyX+=1; }
    }
  }
}

Una cosa importante a tener en cuenta, es que el canvas debe ser el elemento activo para poder leer la entrada de teclado. Por ello debemos hacer un clic sobre el lienzo o no hará caso de la entrada de datos por teclado.

Con estos ejemplos, disponemos del control de un objeto sobre un lienzo y podremos pasar en siguientes artículos a abordar otras dinámicas o conceptos usados ampliamente en juegos sencillos. Puedes ver una implementación de los ejemplos comentados en el siguiente enlace: Ejemplo de movimiento de objetos