Sphere to Block - Corner Collision Detection (JS)

Question

I made a little Engine / Game. Its about Physics and Collision everything seems to be fine the only thing i cannot figure out how to achieve this:

How to make the Sphere bounce correctly off the Corners?

I got only Collision Detection for all 4 Sides for each Block but that makes the Game so hard because when the Sphere would hit a Corner it would gain velocity on the X-Axis also.

Try this by letting the Sphere fall down on the Edge of a Block, it will slide to the side and keep its fall-direction.

The Game is on CodePen

Just in Case you want to make your own Level

Check CodePen :)

Blindman67 Blindman67 · Accepted Answer · 2018-04-10T10:56:47

The solution once you have found the point where the circle contacts the corner

Defining the problem. Set ? to your values

const corner  = {x : ?, y : ?};
const ball = {
    x : ?,   // ball center
    y : ?,
    dx : ?,  // deltas (the speed and direction the ball is moving on contact)
    dy : ?,
}

And image to help visulize

The the steps are

// get line from ball center to corner
const v1x = ball.x - corner.x;  // green line to corner
const v1y = ball.x - corner.x;

// normalize the line and rotate 90deg to get the tangent
const len = (v1x ** 2 + v1y ** 2) ** 0.5;
const tx = -v1y / len;  // green line as tangent
const ty =  v1x / len;

// Get the dot product of the balls deltas and the tangent
// and double it (the dot product represents the distance the balls
// previous distance was away from the line v1, we double it so we get 
// the distance along the tangent to the other side of the line V1)
const dot = (ball.dx * tx + ball.dy * ty) * 2; // length of orange line

// reverse the delta and move dot distance parallel to the tangent
// to find the new ball delta.
ball.dx = -ball.dx + tx * dot; // outgoing delta (red)
ball.dy = -ball.dy + ty * dot;

Sphere to Block - Corner Collision Detection (JS)

1 Answers