Predict bouncing ball destination in JavaScript

Question

In a Pong-style 2D game, a ball (a circle of radius BALLRADIUS) can bounce (with perfect elasticity) on the top or bottom of the screen. When it hits the left or right side of the screen, one of the players scores a point. This function calculates the y-coordinate at which a ball initially at coordinates (x, y) and travelling at velocity (vx, vy) will next hit the left or right side of the screen.

const WIDTH = 1000;
const HEIGHT = 1000;
const BALLRADIUS = 10;

function predictBallDestination(x, y, vx, vy) {
    /* Predict y coordinate at which a ball at (x, y) and travelling at velocity
    (vx, vy) will next hit the left or right side of the screen. The ball can bounce
    on the top or bottom of the screen with perfect elasticity. */
    if (vy === 0) {  // Traveling horizontally
        return y;   
    }
    if (vx === 0) {  // Traveling vertically
        throw new Error("Ball.predict: ball can never reach the side because vx is 0");
    }
    // Calculate horizontal distance to the side towards which it is traveling
    const dx = vx > 0 ? WIDTH - BALLRADIUS - x : x - BALLRADIUS;   
    
    // Calculate total vertical distance it will travel 
    const dy = Math.abs(vy * dx / vx); 
    
    // Calculate remaining vertical distance to travel after the first bounce
    let remainder;  
    if (vy > 0) {  // Initially going down
        if (dy <= HEIGHT - y - BALLRADIUS) {
            return y + dy; // no bounce
        }
        remainder = dy - (HEIGHT - y - BALLRADIUS);
    } else {    // Initially going up
        if (dy <= y - BALLRADIUS) {
            return y - dy; // no bounce
        }
        remainder = dy - (y - BALLRADIUS);
    }

    // Calculate distance it will still have to travel after the last bounce
    const lastPart = remainder % (HEIGHT - BALLRADIUS * 2);  

    const bounces = 1 + Math.floor(remainder / (HEIGHT - BALLRADIUS * 2));
    const evenBounces = bounces % 2 === 0;
    console.log("Bounces", bounces);
    if ((vy > 0 && evenBounces) || (vy < 0 && !evenBounces)) {    
        // If the ball is going down after the last bounce
        return lastPart + BALLRADIUS;
    } else {    // going up after the last bounce
        return HEIGHT - BALLRADIUS - lastPart;
    }
}
console.log(predictBallDestination(500, 500, 1, 0));     // 500 - travels right and hits the right side at (WIDTH - 10, 500)
console.log(predictBallDestination(500, 500, 1, .5));   // 745 - travels down-right without bounce 
console.log(predictBallDestination(500, 500, 1, 1));    // 990 - hits at the corner
console.log(predictBallDestination(500, 500, 1, 2));     // 500 - bounces once at the middle bottom 
console.log(predictBallDestination(500, 500, 1, 4));     // 500 - bounces twice and still hits in the middle

I would appreciate any suggestions to simplify the logic or otherwise improve this function. Is there some way to take care of all the different cases (going up or down, no bounce, odd number of bounces, even number of bounces) with a single formula?

Answer 1

Single responsibility.

Never ignore or cover up bugs.

I will point out that the function predictBallDestination has gone way outside its role by throwing an error due to a game state that should never happen.

Even if it is possible somehow for the ball to have no horizontal movement, detecting this state should be done at a much higher level.

Yes this function is where vx = 0 will matter, but then a divide by zero is the least of your problems.

Always attempt to recover the correct state, and reserve throwing errors only when there is absolutely no way to recover the valid state.

Ask yourself "What is setting vx == 0?" and fix the problem there! Throwing an error is just ignoring the underlying bug.

More constants

You code is doing a lot of repeated calculations. Most notable you are subtracting BALLRADIUS many times. Extend your list of constants to avoid the needless math.

For example to define a play field with inset

const WIDTH = canvas.width;   // Whatever sets the size
const HEIGHT = canvas.height;
const INSET = 50;
const BALLRADIUS = 10;
const LEFT = INSET + BALLRADIUS;
const RIGHT = WIDTH - INSET - BALLRADIUS;
const TOP = INSET + BALLRADIUS;
const BOTTOM = HEIGHT - INSET - BALLRADIUS;

To many conditions

You are checking the ball velocity over and over, is ball going left or right, up or down. That can all be done in the math. The only check needed is which edge you want the y position at.

If you set the max slope of the ball's travel such that it does not hit the top and bottom edge more than say 2000 times you can simplify the final odd even check.

// using constants from above
const MAX_BOUNCES = 2000; // number of times ball hits top and bottom
function getYPos(x, y, vx, vy) {
    const h = BOTTOM - TOP;
    const edge = vx < 0 ? LEFT : RIGHT;
    const hy = ((y + (edge - x) * vy / vx) - TOP + h * MAX_BOUNCES) % (h * 2);
    return (hy < h ? hy : h - hy + h) + TOP;
}

Answer 2

As I looked over the code, I considered a few possibilities based on your request regarding the cases of the ball going up and the ball going down (you already handle the ball going vertical only and horizontal only). I thought to write out two new functions, each one handling the up and down cases. However, I decided against it since both functions had some code which were repeated between the two and didn't add significant value (unless further extractions were taken to avoid repeating code).

The primary changes I made were mostly extracting values to add readability and avoided repeating the code and values which these introduced variables held. For example, vy > 0 is repeated a few times in your code, so I extracted it to a constant variable named goingDown:

const goingDown = vy > 0;
//...
const dx = goingDown ? WIDTH - BALLRADIUS - x : x - BALLRADIUS;

There were a few other calculations which were repeated in your code (at least 2 repetitions was my threshold), so I created those as constants within the function.

I also simplified the assignment to remainder by extracting out the check for no bounces so that I could use the ternary operator.

Since the end of the function has an if..else at the end, I remove the else block since there is nothing else at the end after it:

    } // else {
        // Going up after the last bounce
        return HEIGHT - BALLRADIUS - lastPart;
    // }

I would have removed the bounces variable as well, but decided to leave it since we use it in the console.log and it actually helps with readability.

const WIDTH = 1000;
const HEIGHT = 1000;
const BALLRADIUS = 10;

function predictBallDestination(x, y, vx, vy) {
    /* Predict y coordinate at which a ball at (x, y) and travelling at velocity
    (vx, vy) will next hit the left or right side of the screen. The ball can bounce
    on the top or bottom of the screen with perfect elasticity. */
    if (vy === 0) {  // Traveling horizontally
        return y;
    }
    if (vx === 0) {  // Traveling vertically
        throw new Error("Ball.predict: ball can never reach the side because vx is 0");
    }
    const goingDown = vy > 0;
    const goingUp = vy < 0;

    // Calculate horizontal distance to the side toward which it is traveling
    const dx = goingDown ? WIDTH - BALLRADIUS - x : x - BALLRADIUS;

    // Calculate total vertical distance it will travel
    const dy = Math.abs((vy * dx) / vx);

    const TOP_Y = y - BALLRADIUS;
    const DOWN_VERT_DIST = HEIGHT - TOP_Y;
    if (goingDown && dy <= DOWN_VERT_DIST) {
        // Going down and no bounces
        return y + dy;
    }
    if (goingUp && dy <= TOP_Y) {
        // Going up and no bounces
        return y - dy;
    }

    // Calculate remaining vertical distance to travel after the first bounce
    const remainder = goingDown ? dy - DOWN_VERT_DIST : dy - TOP_Y;

    const VERTICAL_TRAVEL = HEIGHT - BALLRADIUS * 2;

    // Calculate distance it will still have to travel after the last bounce
    const lastPart = remainder % VERTICAL_TRAVEL;

    const bounces = 1 + Math.floor(remainder / VERTICAL_TRAVEL);
    const evenBounces = bounces % 2 === 0;
    console.log("Bounces", bounces, "times");
    if ((goingDown && evenBounces) || (goingUp && !evenBounces)) {
        // Going down after the last bounce
        return lastPart + BALLRADIUS;
    }
    // Going up after the last bounce
    return HEIGHT - BALLRADIUS - lastPart;
}
console.log(predictBallDestination(500, 500, 1, 0)); // 500 - travels right and hits the right side at (WIDTH - 10, 500)
console.log(predictBallDestination(500, 500, 1, 0.5)); // 745 - travels down-right without bounce
console.log(predictBallDestination(500, 500, 1, 1)); // 990 - hits at the corner
console.log(predictBallDestination(500, 500, 1, 2)); // 500 - bounces once at the middle bottom
console.log(predictBallDestination(500, 500, 1, 4)); // 500 - bounces twice and still hits in the middle

Answer 3

I have simplified this slightly and made the logic more transparent by calculating endX and endY (the destination coordinates without any bounce) instead of dx and dy (the horizontal and vertical distances to be traveled).

function predictBallDestination(x, y, vx, vy) {
    /* Predict y coordinate at which a ball at (x, y) and travelling at velocity (vx, vy) will next hit the 
        left or right side of the screen. The ball can bounce on the top or bottom of the screen with perfect
        elasticity. */
    if (vy === 0) {
        return y;
    }
    if (vx === 0) {
        throw new Error("Ball.predict: ball can never reach the side because vx is 0");
    }
    const top = BALLRADIUS;
    const bottom = HEIGHT - BALLRADIUS; 
    const endX = vx > 0 ? WIDTH - BALLRADIUS : BALLRADIUS;   // x-coordinate of the side the ball is bouncing towards
    const endY = y + vy * (endX - x) / vx; // final y coordinate without any bounce 
    if (top <= endY && endY <= bottom) {    // no bounce
        return endY;
    } 
    const remainder = vy > 0 ? endY - bottom : top - endY;
    const innerHeight = bottom - top;
    const bounces = 1 + Math.floor(remainder / innerHeight);
    const evenBounces = bounces % 2 === 0;
    console.log("Bounces", bounces);
    const lastPart = remainder % innerHeight;
    if ((vy > 0 && evenBounces) || (vy < 0 && !evenBounces)) {     // bouncing down  at the end
        return top + lastPart;
    } else {                        // bouncing up at the end
        return bottom - lastPart;
    }
}