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

Surface

y velocity y velocity

Ball 1 Ball 2

Figure 10-8. Did it go through or just pass under?

With the ball on the left, the y velocity is greater than the y position in relation to the line. This means that
just before it moved, it had to be above the line. With the ball on the right, the velocity is less than the
relative y position. In other words, it's below the line on this frame, and it was below the line on the last
frame; so it's just moving underneath the line. The only time you want to do a bounce is when the ball goes
from above the line to below it, so we'll alter the code to do that. Here's a section out of the drawFrame
function:

//rotate coordinates
var y2 = y1 * cos - x1 * sin;

//perform bounce with rotated values
if (y2 > -ball.radius) {
//rotate coordinates
var x2 = x1 * cos + y1 * sin,

//rotate velocity
vx1 = ball.vx * cos + ball.vy * sin,
vy1 = ball.vy * cos - ball.vx * sin;
You need to add y2 < vy1 into your if statement:

if (y2 > -ball.radius && y2 < vy1 ) { ...
But in order to do that, you need to calculate vy1 beforehand. So that part comes out of the if statement,
and the snippet is modified to this:

//rotate coordinates
var y2 = y1 * cos - x1 * sin,

//rotate velocity
vy1 = ball.vy * cos - ball.vx * sin;

//perform bounce with rotated values