HTML5 Canvas, 2nd Edition

Uniform Circular Motion

Uniform circular motion occurs when we move an object along the distinct radius of a defined 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(), 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 ...