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.
