Why won't the balls bounce fully in my pong JavaScript canvas game?

Question

I have multiple elipses on the canvas in javascript and I want all of them to bounce off each other. I tried using the distance formula and then changing the x and y direction of the ball when the distance is less than the ball radius *2.

This worked well for one ball, but it doesn't work so well for many balls as it often leads to the dreaded 'bounce loop' depicted Here

To remedy this issue, I resolved to change the way the balls bounce depending on where they collide with each other to avoid the bounce loop and to make the game closer to real life physics.

If there's a side to side collision, I want to reverse the x direction of both balls and if there's a top to bottom collision, I want to reverse the y direction of both balls.

So, I calculated all the points, for example, between 45 degrees and 135 degrees that correlate with a degree (that's 90 points) and compared them to all 90 point between 225 degrees and 315 degrees and vice versa.

If the distance between any of the points on the edge of the circle and all the other balls center point is less than the radius, I want the Y direction of both balls to be reversed.

I repeated the same process for 135 degrees and 225 degress to 315 degrees and 405 degrees (equivalent to 45) and reversed the X direction of both balls.

As of right now, I think the balls should bounce off each other how I want them to, but they just don't. They bounce off each other's sides and tops, bottoms, and occasionally at angles, but they tend to dip inside of each other and then change direction. Here is a video of the output.

Below is the code comparing top to bottom:

    // radius is the same for all the balls and is at 25.
let ballToBallDistance = (x1, y1, x2, y2) => {
    return Math.sqrt((Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
}
const ballCollisionY = (start, end) => {
    for (let i = start; i <= end; i++) {
        return ballObjects[0].ballRadius * Math.sin((i * Math.PI / 180));
    }
}
const ballCollisionX = (start, end) => {
    for (let i = start; i <= end; i++) {
        return ballObjects[0].ballRadius * Math.cos((i * Math.PI / 180));
    }
}
const upperYBall = {
    bounceTopBottom() {
        let n = 0;
        for (let i = 0; i < ballObjects.length; i++) {
            if (ballObjects.length == 1) {
                return;
            }
            if (n == i) {
                continue;
            }
            let yUpXPoint = ballObjects[n].ballXPos - ballCollisionX(45, 135);
            let yUpYPoint = ballObjects[n].ballYPos - ballCollisionY(45, 135);
            let centerBallX = ballObjects[i].ballXPos;
            let centerBallY = ballObjects[i].ballYPos;
            let pointDistance = ballToBallDistance(yUpXPoint, yUpYPoint, centerBallX, centerBallY);
            if (pointDistance <= 25) {
                ballObjects[n].ballMotionY = ballObjects[n].ballMotionY * -1;
            }
            if (i == ballObjects.length - 1) {
                ++n;
                i = -1;
                continue;
            }
        }
    }
}
const lowerYBall = {
    bounceBottomTop() {
        let n = 0;
        for (let i = 0; i < ballObjects.length; i++) {
            if (ballObjects.length == 1) {
                return;
            }
            if (n == i) {
                continue;
            }
            let yDownXPoint = ballObjects[n].ballXPos - ballCollisionX(225, 315);
            let yDownYPoint = ballObjects[n].ballYPos - ballCollisionY(225, 315);
            let centerBallX = ballObjects[i].ballXPos;
            let centerBallY = ballObjects[i].ballYPos;
            let pointDistance = ballToBallDistance(yDownXPoint, yDownYPoint, centerBallX, centerBallY);
            if (pointDistance <= 25) {
                ballObjects[n].ballMotionY = ballObjects[n].ballMotionY * -1;
            }
            if (i == ballObjects.length - 1) {
                ++n;
                i = -1;
                continue;
            }
        }
    }
}

I've been stuck on this feature for two weeks. If anyone has any insight as to what I am doing wrong and perhaps a solution to achieve the desired result, that would be very much appreciated.

score 2 · Accepted Answer · answered Feb 06 '19 at 20:04

I propose you switch from the special-case coding to a more general approach.

When two balls collide:

Calculate the collision normal (angle)
Calculate the new velocity based on the previous velocity and the normal
Reposition the balls so that they do not overlap anymore, preventing the 'bounce loop'.

You will need:

A method to calculate the angle between two balls:

function ballToBallAngle(ball1,ball2) {
    return Math.atan2(ball2.y-ball1.y,ball2.x-ball1.x)
}

A method to derive the normal vector from a angle:

function calcNormalFromAngle(angle){
  return [
    Math.cos(angle),
    Math.sin(angle)
  ]
}

A method to calculate the dot product of two vectors:

function dotproduct (a, b){
    return a.map((x, i) => a[i] * b[i]).reduce((m, n) => m + n)
}

Finally a way to calculate the bounce angle. Read this, it describes it perfectly.

So to put it together, see the snippet below:

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')


let balls = [
 {x:40,y:40,radius:25,vx:4,vy:3},
    {x:300,y:300,radius:50,vx:-2,vy:-3},
    {x:100,y:220,radius:25,vx:4,vy:-3},
    {x:400,y:400,radius:50,vx:-1,vy:-3},
    {x:200,y:400,radius:32,vx:2,vy:-3}
]

function tick() {
 balls.forEach((ball, index) => {
  ball.x += ball.vx
  ball.y += ball.vy

  //check for x bounds collision
  if (ball.x - ball.radius < 0) {
   bounceBall(ball, Math.PI)
   ball.x = ball.radius
  } else if (ball.x + ball.radius > 500) {
   bounceBall(ball, 0)
   ball.x = 500 - ball.radius
  }

  //check for y bounds collision
  if (ball.y - ball.radius < 0) {
   bounceBall(ball, Math.PI / 2)
   ball.y = ball.radius
  } else if (ball.y + ball.radius > 500) {
   bounceBall(ball, -Math.PI / 2)
   ball.y = 500 - ball.radius
  }

  balls.forEach((other_ball, other_index) => {
   if (index == other_index)
    return

   // how many px the balls intersect
   let intersection = ball.radius + other_ball.radius - ballToBallDistance(ball, other_ball)

   // if its greater than 0, they must be colliding
   if (intersection > 0) {
    let angle = ballToBallAngle(ball, other_ball)
    let normal = calcNormalFromAngle(angle)

    bounceBall(ball, angle)
    bounceBall(other_ball, angle + Math.PI)

    // set positions so that they are not overlapping anymore
    ball.x -= normal[0] * intersection / 2
    ball.y -= normal[1] * intersection / 2

    other_ball.x += normal[0] * intersection / 2
    other_ball.y += normal[1] * intersection / 2
   }
  })
 })

 render()
 requestAnimationFrame(tick)
}

function render() {
 ctx.clearRect(0, 0, canvas.width, canvas.height)

 balls.forEach(ball => {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
  ctx.stroke();
 })
}



function bounceBall(ball, angle) {
 let normal = calcNormalFromAngle(angle)
 let velocity = [ball.vx, ball.vy]

 let ul = dotproduct(velocity, normal) / dotproduct(normal, normal)
 let u = [
  normal[0] * ul,
  normal[1] * ul
 ]

 let w = [
  velocity[0] - u[0],
  velocity[1] - u[1]
 ]

 let new_velocity = [
  w[0] - u[0],
  w[1] - u[1]
 ]

 ball.vx = new_velocity[0]
 ball.vy = new_velocity[1]
}

function dotproduct(a, b) {
 return a.map((x, i) => a[i] * b[i]).reduce((m, n) => m + n)
}

function ballToBallDistance(ball1, ball2) {
 return Math.sqrt((Math.pow(ball2.x - ball1.x, 2) + Math.pow(ball2.y - ball1.y, 2)));
}

function ballToBallAngle(ball1, ball2) {
 return Math.atan2(ball2.y - ball1.y, ball2.x - ball1.x)
}

function calcNormalFromAngle(angle) {
 return [
  Math.cos(angle),
  Math.sin(angle)
 ]
}

tick();

body{
  background-color: #eee;
}

canvas{
  background-color: white;
}

<canvas width="500" height="500"></canvas>

Why won't the balls bounce fully in my pong JavaScript canvas game?

1 Answers1