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

Multiple Balls Bouncing Off Walls

One ball is cool, but what about 100? Is the code 100 times more complicated? No, not at
all. In fact, the code is only slightly more complicated, but it is also more refined. Most pro-
gramming tasks that require only a single object of a type tend to allow you to be a bit lazy.
However, when you need to build an application that must support n number of objects, you
need to make sure the code will work in many different cases.

Inthecaseof100ballsbouncingonthecanvas,wewillneedtocreateaballobjectwithafew
more properties. Recall that the ball object we created previously had only x and y properties
and looked like this:

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

All the other variables that represented the ball ( speed , angle , xunits , yunits ) were global
in scope to the canvasApp() . We used global variables because we could get away with it.
However,becauseweneedtomakesureeverythingworksthesamewayinthisapp,wemake
all those values properties of each ball object.
For the multiple-ball-bounce application, we will create an object that holds all the pertinent
information about each bouncing ball: x , y , speed , angle , xunits , and yunits . Because we
are going to create 100 balls of various sizes, we also add a property named radius , which
represents the size of the ball (well, half the size because it is a radius):

tempBall = { x : tempX , y : tempY , radius : tempRadius , speed : tempSpeed ,
angle : tempAngle , xunits : tempXunits , yunits : tempYunits }

Inside canvasApp() ,wedefinesomenewvariablestohelpmanagethemultipleballsthatwill
bounce around the canvas:

numBalls

The number of balls to randomly create

maxSize maxSize

The maximum radius length for any given ball

minSize

The minimum radius length for any given ball

maxSpeed maxSpeed

The maximum speed any ball can travel