Controlar el rebote de un objeto
Siguiendo con las entregas sobre la utilización de la librería processing.js, vamos a implementar las funciones necesarias para que una esfera vaya rebotando sobre los bordes de la pantalla en ángulos de 45 grados.
Aunque se podría realizar más complicado, vamos a utilizar únicamente dos variables que controlen el sentido del movimiento de la bola en los dos ejes de coordenadas. La dirección disx será 1 cuando avance a la derecha y -1 cuando vaya a la izquierda. De forma similar disy controlará el sentido ascendente (1) y descendente (-1). Para la velocidad usaremos una variable extra ballvel que podremos ajustar a conveniencia y que marcará el incremento de posición en el sentido del movimiento.
var ballvel=5; var dirx=1; var diry=-1;
La función que controla el rebote se encarga de repintar, de controlar el movimiento de la bola y de detectar si llegamos a un borde para cambiar el sentido del movimiento en el eje correspondiente.
void rebot(){
//Pintar fondo
background(0,0,0);
//Pintar bola
fill(255,255,255);
ellipse(ballx, bally, balltam, balltam);
//Moviment de la bola
if (dirx > 0){ballx+=ballvel;}else{ballx-=ballvel;}
if (diry > 0){bally+=ballvel;}else{bally-=ballvel;}
//Rebots del borde de pantalla
if (ballx >= tamx){ dirx=-1; }
if (ballx <= 0){ dirx=1; }
if (bally >= tamy){ diry=-1;}
if (bally <= 0){diry=1; }
}
Adicionalmente, y para el ejemplo, tenemos una función que permite regenerar la posición inicial de la bola para observar diferentes posiciones de partida.
void mouseClicked(){
ballx = random(50,tamx-50);
bally = random(50,tamy-50);
}
En conclusión, hemos sido capaces de implementar la funcionalidad de rebote básico en ángulos de 45 grados sobre los bordes de pantalla mediante el uso de variables que controlan el sentido de movimiento en cada uno de los ejes de coordenadas..
