HTML and CSS Reference

In-Depth Information

Uniform Circular Motion

Uniform circular motion occurs when we move an object along the distinct radius of a

defined circle. Once 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:

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
.

In
canvasApp()
, we will define this circle path as a dynamic object stored in the

circle
variable. 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 circle = {centerX:250, centerY:250, radius:125, angle:0}

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);

context.closePath();

context.fill();

You can see what the circle path looks like in
Figure 5-12
. We have drawn the points

on the canvas to illustrate the circle path.