HTML and CSS Reference
In-Depth Information
Uniform Circular Motion
circle. When we know the radius, we can use our old friends cosine and sine to find the x
and y locations of the moving object. The equations to find the locations of an object moving
uniformly on a defined circle are as follows:
x = radius * cosine ( angle )
y = radius * sine ( angle )
We will create an example of uniform circular movement with a circle that has a radius of
125 , with its center position at 250 , 250 on the canvas. We will move a ball along that circle,
starting at an angle of 0 .
able. While this object defines the properties of a circle, we will not actually draw this circle
on the canvas; rather, it defines only the path on which we will move our ball object:
var
var circle = { centerX : 250 , centerY : 250 , radius : 125 , angle : 0 }
var
var ball = { x : 0 , y : 0 , speed : . 1 };
In drawScreen() , we will incorporate the equations for uniform circular movement. To do
this, we will set the x and y properties of the ball object to the products of the equations,
added to the center location of the circle path on the canvas ( circle.centerX ,
circle.centerY ):
ball . x = circle . centerX + Math . cos ( circle . angle ) * circle . radius ;
ball . y = circle . centerY + Math . sin ( circle . angle ) * circle . radius ;
We then add the speed of the ball to the angle of the circle path. This effectively sets the ball
to move to a new location the next time drawScreen() is called:
circle . angle += ball . speed ;
Finally, we draw the ball onto the canvas:
context . fillStyle = "#000000" ;
context . beginPath ();
context . arc ( ball . x , ball . y , 15 , 0 , Math . PI * 2 , true
true );
context . closePath ();
context . fill ();
You can see what the circle path looks like in Figure 5-13 . We have drawn the points on the
canvas to illustrate the circle path.
Search WWH ::

Custom Search