7.2. Movimiento lineal
El ejemplo más sencillo que podemos crear es el de una variable que aumente a lo largo del tiempo y que usemos para determinar algún parámetro de nuestro dibujo.
Fuente: elaboración propia.
En la figura 78 vemos que hemos creado al principio del código una variable posX que hemos inicializado con el valor 100 y que luego en el draw() estamos utilizando para determinar la posición en el eje x de la elipse que dibujamos. Tras dibujarla, aumentamos el valor de posX en una unidad (recordemos que posX ++ es equivalente a posX = posX + 1), por lo que nuestra elipse comienza en la posición x 100 y, puesto que el draw() se ejecuta 60 veces por segundo, su posición va aumentando 60 unidades cada segundo, desplazándose hacia la derecha del canvas. En el ejemplo no estamos redibujando el fondo para que se aprecie la estela que deja el movimiento de la figura.
Podemos controlar fácilmente la velocidad y la dirección de este movimiento variando la cantidad que le sumamos a la posición en cada frame. Para ello, podemos utilizar una variable que almacene esta «velocidad». Cuanta mayor cantidad sumemos a la posición, más rápido será el movimiento. Para cambiar la dirección del movimiento, basta con cambiar el signo del valor que sumamos: si sumamos valores negativos en lugar de positivos a la posición, el movimiento será hacia la izquierda en lugar de hacia la derecha.
Fuente: elaboración propia.
En este ejemplo vemos claramente la diferencia de velocidad entre el movimiento de las dos elipses. Veamos a continuación un ejemplo manteniendo la misma velocidad, pero cambiando su dirección:
Fuente: elaboración propia.
La clave a la hora de cambiar la dirección del movimiento la tenemos en la línea 15: en lugar de utilizar el operador += estamos utilizando el -=, de manera que las 5 unidades de la variable speed se están restando en cada frame al valor de initPos2 en lugar de estar sumándose. Podríamos obtener el mismo resultado manteniendo el operador += pero cambiando el signo de speed:
initPos2 += -speed;
En dos dimensiones
Hasta ahora, el movimiento que hemos programado en nuestras formas ha sido en una única dimensión, solo se están moviendo en el eje x, pero podemos incluir una nueva variable para que el movimiento de produzca tanto en el eje x como en el y.
Fuente: elaboración propia.
En este caso, como estamos utilizando el mismo valor speed para aumentar la posición tanto en el eje x como en el y, el movimiento es diagonal a exactamente 45º, pero si utilizamos valores distintos de velocidad para un eje y para otro, la pendiente del movimiento cambiará.
Condiciones de borde
Ahora mismo, según tenemos nuestro código, la variable que determina la posición del círculo aumenta (o disminuye) hasta el infinito haciendo que el círculo desaparezca del canvas. En muchos casos, este comportamiento no será el deseado y querremos controlar qué ocurre cuando nuestra figura alcanza los límites del canvas.
Para ello, podemos ayudarnos de las ya conocidas estructuras condicionales para detectar cuándo la variable que almacena la posición de la figura llega a determinado valor. Uno de los comportamientos que podemos programar es que nuestra figura reaparezca por el lado contrario del canvas; veamos cómo llevarlo a cabo:
Fuente: elaboración propia.
En el ejemplo anterior hemos creado una condición que detecta cuándo la posición en y del círculo rebasa el límite inferior del canvas y, cuando lo hace, resetea la posición a la parte superior del canvas. Debemos tener en cuenta que el círculo se dibuja desde su centro, por lo que para que rebase completamente el límite del canvas debemos considerar también el tamaño del círculo.
Una vez que tenemos definida esta estructura condicional que detecta cuándo el círculo rebasa el límite inferior del canvas, podemos variar dentro del condicional otro tipo de parámetros además de la posición en el eje y. Podríamos crear una especie de lluvia aleatoria de círculos de distintos tamaños, colores y velocidades cambiando un par de parámetros.
Fuente: elaboración propia.
En lugar de hacer que el círculo reaparezca por el lado contrario del canvas, podríamos querer que rebotase. Para ello, lo que debemos hacer es simplemente cambiar de signo su velocidad cuando detectemos que ha llegado al límite:
Fuente: elaboración propia.
En el caso de la figura anterior, solo estamos detectando la colisión con el borde inferior del canvas, por lo que cuando el círculo vaya hacia arriba rebasará el límite superior del canvas sin rebotar. Para añadir la nueva condición, podemos usar el operador lógico OR:
if(posY >= height – size / 2 || posY <= 0 + size / 2) {
speed = -speed;
}
Podemos realizar esta comprobación en los cuatro bordes del canvas si tenemos movimiento en dos dimensiones añadiendo una nueva condición:
// REBOTE VERTICAL
if(posY >= height – size / 2 || posY <= 0 + size / 2) { speedY = -speedY; }
// REBOTE HORIZONTAL
if(posX >= width – size / 2 || posX <= 0 + size / 2) {
speedX = -speedX;
}
Y para que el código quede más limpio y organizado, podemos encapsular todas estas comprobaciones en una función:
function checkBorders(){
// REBOTE VERTICAL
if(posY >= height – size / 2 || posY <= 0 + size / 2) { speedY = -speedY; } // REBOTE HORIZONTAL if(posX >= width – size / 2 || posX <= 0 + size / 2) {
speedX = -speedX;
}
}
Veamos un ejemplo completo con rebote en los cuatro bordes del canvas:
Fuente: elaboración propia.