撞墙后计算角度变化

Question

I'm making a game in javascript, where an object is supposed to bounce from walls. I really tried to get it to work myself, but it never works correctly.

Let's say theres a ball bouncing inside this cage (blue = 30°, brown = 60°);

The ball's coordinates are known. The angle of movement is known. The point of collision (P) coordinates are known. The angle of the wall is known. The ball's position is updating it's coordinates inside a setInterval function using this function:

function findNewPoint(x, y, angle, distance) {
var result = {};

result.x =(Math.cos(angle * Math.PI / 180) * distance + x);
result.y = (Math.sin(angle * Math.PI / 180) * distance + y);

return result;

So, upon colliding, there should be a function that properly changes the ball's angle. It's a very complicated problem it seems, because even if I know that the wall is 30°, its important to know from what side the ball is colliding into it. I tried using the "Reflection across a line in the plane" formula and also some vectors, but it never worked out for me. I'm not expecting a complete answer with code, if someone could suggest in what way this should be programmed, it would help aswell.

Edit: Thanks for your tips guys, I realized what was causing the most confustion; if I select an angle on the canvas with my mouse, the starting coordinate(0,0) is in the bottom left corner. But since the canvas' starting coordinate is in the top left corner, this has to be considered.

Basically using this formula for calculating the angle:

function angle(cx, cy, ex, ey) {
var dy = ey - cy;
var dx = ex - cx;
var theta = Math.atan2(dy, dx);
theta *= 180 / Math.PI; 
return theta;

}

if the ball moved from (50,50) to (100,100), the angle would be -45.

Now, this angle changes in the following way when hitting walls:

If im honest, I got these out of trial and error, am not really understanding why exactly 60 and 120.

Answer 1

It is not wise to use angle for moving ball and calculate Cos/Sin again and again. Instead use unit velocity direction vector with components vx, vy like this:

new_x = old_x + vx * Velocity_Magnitude * Time_Interval

Note that vx = Cos(angle), vy = Sin(angle) , but with direction approach you seldom need to use trigonometric functions.

Tilted wall with angle Fi has normal

nx = -Sin(Fi)
ny = Cos(Fi)

To find reflection , you need to calculate dot product of velocity and normal

dot = vx * nx + vy * ny

Velocity after reflection transforms:

vnewx = v.x - 2 * dot * n.x 
vnewy = v.y - 2 * dot * n.y 

Use these values for further moving

(note that you can use both internal and external normal direction, because direction flip changes both components, and sign of 2 * dot * nx remains the same)

Examples:

horizontal moving right
vx=1, vy=0   
30 degrees wall has normal 
nx=-1/2, ny=Sqrt(3)/2  
dot = -1/2
vnewx = 1 - 2 * (-1/2) * (-1/2) = 1/2
vnewy = 0 - 2 * (-1/2) * Sqrt(3)/2 = Sqrt(3)/2
(velocity direction angle becomes 60 degrees)

horizontal moving left
vx=-1, vy=0   
330 degrees wall (left bottom corner) has normal 
nx=1/2, ny=Sqrt(3)/2  
dot = -1/2
vnewx = -1 - 2 * (-1/2) * (1/2) = -1/2
vnewy = 0 - 2 * (-1/2) * (Sqrt(3)/2) = Sqrt(3)/2
(velocity direction angle becomes 120 degrees)

Answer 2

If you're assuming that the ball behaves like light bouncing off a mirror, then the angle of incidence equals the angle of reflection.

So your board is 30° from 0° (straight up). The means the normal (perpendicular to the board at the point the ball hits ) is 300°. Say the ball arrives from 280°, it must leave at 320° as the difference between the angle of incidence and the normal and the angle of reflection and the normal must be equal.

Answer 3

Here is a function that returns the angle of reflection given an angle of incidence and a surface angle (in degrees). It also ensures that the returned angle is between 0 and 359 degrees.

function angleReflect(incidenceAngle, surfaceAngle){
  var a = surfaceAngle * 2 - incidenceAngle;
  return a >= 360 ? a - 360 : a < 0 ? a + 360 : a;
}

Here's a demonstration , where the blue line is the angle of incidence, the purple line is the angle of reflection, and the black line is the surface.