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.
Search WWH ::

Custom Search