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.
