¿Cómo simular una pelota rebotando en 2D?

Para simular una pelota rebotando por la pantalla tenemos que hacer una animación en la que un dibujo, que represente la pelota, se mueva por la pantalla y al llegar a los límites cambie de dirección.

El dibujo puede ser un círculo con un radio determinado al que llamaremos RADIO. Para simular el movimiento de la pelota usaremos dos variables, x e y, para representar sus coordenadas. El valor de estas dos variables cambiará a lo largo de la simulación.

Cómo además la dirección de la pelota tendrá que variar al llegar a las paredes será necesario usar otro par de variables, vx e vy, para representar las componentes horizontal y vertical de la velocidad.

double x = 160; double y = 160; double radio = 20; void dibuja() { x = x + 2; y = y + 1; background(0,0,0); ellipse(x,y,radio*2,radio*2); text("x = " + x + " y = " + y + " VX = 2 VY = 1", 10,20); } void main() { animate(dibuja); }


// En cada actualización de la pantalla se modifican x e y sumando vx y vy
x = x + vx;
y = y + vy;
// El círculo se dibuja en sus coordenadas (x,y)

Evidentemente, el círculo termina desapareciendo por la parte derecha de la pantalla cuando la coordenada x se hace suficientemente grande. Si queremos que la pelota rebote en los márgenes, despues de mover la pelota, tendremos que hacer dos cosas: determinar cuándo hay que rebotar y cambiar la dirección hacia la que se mueve la pelota.

Para saber cuándo se produce el rebote bastará con comparar la distancia del centro de la pelota a la pared en cuestión con el radio de la pelota. Si la distancia es menor que el radio la pelota estará colisionando con la pared por lo que podremos generar el rebote.

double x = 160; double y = 160; double vx = 2; double radio = 20; boolean colision = false; void dibuja() { x = x + vx; y = y + 1; if ( x > 320-radio ) { x = 320-radio; fill(255,0,0); colision = true; } background(0,0,0); ellipse(x,y,radio*2,radio*2); text("x = "+x+" y = " + y + " VX = 2 VY = 1", 10,20); if ( colision ) exit(); } void main() { animate(dibuja); }

// Detección de choques con los bordes suponiendo una pantalla de 320x320 pixels
if ( x > 320 - RADIO ) {
	// Colisión horizontal con pared derecha
}
if ( x < 0 + RADIO ) {
	// Colisión horizontal con pared izquierda
}
if ( y > 320 - RADIO ) {
	// Colisión vertical con pared inferior
}
if ( y < 0 + RADIO ) {
	// Colisión vertical con pared superior
}

Una vez detectada la colisión es conveniente corregir la posición para evitar que parte de la pelota se salga del borde, especialmente cuando el módulo de la velocidad sea alto.

Además, hay que cambiar la dirección para que se produzca el rebote. El cambio de dirección consiste en cambiar de signo la componente de la velocidad adecuada. Si la colisión es con un borde vertical habrá que cambiar el signo de la componente horizontal de la velocidad. Del mismo modo, si la colisión es con un borde horizontal, habrá que cambiar el signo de la componente vertical de la velocidad. Tanto la comparación como la corrección habrá que hacerla antes de dibujar cada nuevo frame.

double x = 160; double y = 160; double vx = 2; double vy = 1; double radio = 20; void dibuja() { fill(255,255,255); x = x + vx; y = y + vy; if ( x > 320-radio || x < radio ) { fill(255,0,0); vx *= -1; } if (y > 320-radio || y < radio ) { fill(255,0,0); vy *= -1; } background(0,0,0); ellipse(x,y,radio*2,radio*2); text("x = "+x+" y = " + y + " vx = " + vx + " vy = " + vy, 10,20); } void main() { animate(dibuja); }

// Colisión horizontal con pared derecha
if ( x > 320-RADIO ) {
	x = 320-RADIO;   // Corrección
	vx = vx * -1;    // Cambio de dirección
}
// Colisión horizontal con pared izquierda
if ( x < 0 + RADIO ) {
	x = RADIO;       // Corrección
	vx = vx * -1;    // Cambio de dirección
}
// Colisión vertical con pared inferior
if ( y > 320 - RADIO ) {
	y = 320 - RADIO; // Corrección
	vy = vy * -1;    // Cambio de dirección
}
// Colisión vertical con pared superior
if ( y < 0 + RADIO ) {
	y = RADIO;       // Corrección
	vy = vy * -1;    // Cambio de dirección
}