HTML and CSS Reference

In-Depth Information

Uniform Circular Motion

Uniformcircularmotionoccurswhenwemoveanobjectalongthedistinctradiusofadefined

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
.

In
canvasApp()
,wewilldefinethiscirclepathasadynamicobjectstoredinthe
circle
vari-

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.