Math, Physics, and Animation - HTML5 Canvas - page 317

Bouncing a Single Ball

In this first example, we will create a ball traveling on a vector. We will set the speed (mag-
nitude) to 5 and the angle (direction) to 35 degrees. The rest of the variables are identical to
those in Example 5-3 . We are still moving on a vector, but now we will test to see whether
the ball hits a “wall” (the edges of the canvas), in which case it will bounce off, using the rule
of the angle of reflection. One big change from the previous vector example is the location in
which we initialize the values for radians , xunits , and yunits . Instead of setting them up
when we initialize the application in canvasApp() , we save that for a call to a new function
named updateBall() :

var var speed = 5 ;

var var p1 = { x : 20 , y : 20 };

var var angle = 35 ;

var

var radians = 0 ;
var

var xunits = 0 ;
var var yunits = 0 ;

var var ball = { x : p1 . x , y : p1 . y };

updateBall ();

The updateBall() function is called every time we set a new angle for the ball, because we
need to recalculate the radians and find new values for xunits and yunits . A new angle
value is generated when the app starts, as well as every time the ball bounces off a wall:

function function updateBall () {

radians = angle * Math . PI / 180 ;
xunits = Math . cos ( radians ) * speed ;
yunits = Math . sin ( radians ) * speed ;

}

In drawScreen() , we update the position of the ball and then draw it on the canvas:

ball . x += xunits ;
ball . y += yunits ;
context . fillStyle = "#000000" ;
context . beginPath ();
context . arc ( ball . x , ball . y , 15 , 0 , Math . PI * 2 , true

true );

context . closePath ();
context . fill ();

Next, we test to see whether the ball has hit a wall before we draw it to the canvas. If the ball
hits the right side ( ball.x > theCanvas.width ) or the left side ( ball.x < 0 ) of the canvas,
we set the angle to 180 degrees minus the angle of the vector on which the ball is traveling.
This gives us the angle of reflection. Alternatively, if the ball hits the top ( ball.y < 0 ) or