Coordinate Rotation and Bouncing Off Angles - HTML5 Animation with JavaScript - page 238

y1 = ball.y - line.y,
//rotate coordinates
y2 = y1 * cos - x1 * sin,
//rotate velocity
vy1 = ball.vy * cos - ball.vx * sin;
//perform bounce with rotated values
if (y2 > -ball.radius && y2 < vy1) {
//rotate coordinates
var x2 = x1 * cos + y1 * sin,
//rotate velocity
vx1 = ball.vx * cos + ball.vy * sin;
y2 = -ball.radius;
vy1 *= bounce;
//rotate everything back
x1 = x2 * cos - y2 * sin;
y1 = y2 * cos + x2 * sin;
ball.vx = vx1 * cos - vy1 * sin;
ball.vy = vy1 * cos + vx1 * sin;
ball.x = line.x + x1;
ball.y = line.y + y1;
}
}
}
function drawLine (line) {
checkLine(line);
line.draw(context);
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
//normal motion code
ball.vy += gravity;
ball.x += ball.vx;
ball.y += ball.vy;
//bounce off ceiling, floor, and walls
if (ball.x + ball.radius > canvas.width) {
ball.x = canvas.width - ball.radius;
ball.vx *= bounce;
} else if (ball.x - ball.radius < 0) {
ball.x = ball.radius;
ball.vx *= bounce;
}
if (ball.y + ball.radius > canvas.height) {
ball.y = canvas.height - ball.radius;