Canvas move object in circle

Question

I have a rectangle in canvas, and I know how to move it up and sideways. What I want to do is have it move in a circular motion.

So my objects(rectangle) x and y would go in a circle.

Now I am assuming I need a radius for how far out and some formula for the speed(1pixel) to get it rotate on the axis.

Any idea's?

Solution

The parametric equation for moving in a circle is this:

x=r*cos(theta)
y=r*sin(theta)

theta is the angle, and r the radius.

If you want to know the change in theta to get the desired speed, solving for the distance d you get that the change in theta is: arccos(1-(d/r)^2/2)

The JavaScript functions are Math.cos, Math.sin, and Math.acos, respsectively. They all deal with radians.

Comments

[Steve P]

Could you or someone provide me with a jsFiddle on how to add the math libs or how they are connected?

[simonzack]

Here's a fiddle with fixes of markE's fiddle to make it work, and to show the calculation of the angle: jsfiddle.net/Cu6Zv/1