# Math for circular object movement in a game

I am currently developing a really simple 2D-HTML5 game, where the player has to dodge obstacles by moving up and down. Besides a linear (boring) movement of the obstacles, I thought it would be cool that obstacles could approach the player by some sort of a rotating or up-and-down movement, so that it becomes a bit more difficult to play the game.

I am gonna use Javascript for the code examples, but of course it should work with every other language too ;)

## The goal

The goal is that this extinct becoming bee moves along a circle. Have a look at the JsFiddle-demo.

## Cosine and Sine

I am one of those guys, who sat in high school’s math class and was questioning myself “A*nd for what do I need that exactly*?”. It turns out when you start building computer games you realise that you indeed need some of the stuff you learned back then and for this article we need *Cosine* and *Sine*.

With Cosine and Sine we can calculate the sides of a triangle (remember *Pythagoras equation*?!).

So our triangle consists of 3 Points **A**, **B** and **C**. Point B (Beeeee) is the one we want to move around the center point **A **with the distance of **r** .

To calculate the x, y coordinates of Point B we simply have to know the radius r (= B-A) and the angle a (in radians).

`B.x = A.x + cos(a) * radius;`

B.y = A.y + sin(a) * radius;

A.x + cos(a) (or A.y) gives us the normalized point with radius = 1, which is why we multiply it by the radius.

## Example

Let’s assume our** radius = 10** and our **angle = 50** degree (ca. 0.87 in radians), then:

`// Let's say Point A is 2,4`

B.x = 2 + 10 * cos(0.87); // = 8.44

B.y = 4 + 10 * sin(0.87); // = 10.44

Which means our point B is at (8.44 | 10.33), when the angle is 0.87 radians and the radius is 10.

## The update-function code

Now to move our bee along the circle we only need to increase the angle within our game update function, which could look like this:

// We assume Bee is an object with x and y properties

var radius = 10;

var angle = 0;

var angular_speed = 0.1; // 0.1 radians per update tickvar moveCircular = function() {

Bee.x = Bee.x + radius * Math.cos(angle);

Bee.y = Bee.y + radius * Math.sin(angle);

// Reset the angle after 360 degree turn

if (angle >= Math.PI * 2) angle = 0; angle += angular_speed;

};

## Only move in one direction

Of course it is not necessary to move both Bee.x and Bee.y. If you want to have some kind of “ping-pong” movement (up-down-up-down…), you only have to update Bee.y.

`Bee.x = Bee.x;`

Bee.y = Bee.y + radius * Math.sin(angle);

## Up-and-down from right to left

If you decrease the value of Bee.x with every update, your Bee will fly from the right to the left and up and down:

var vx = -1;

var speed = 10;Bee.x += speed * vx;

Bee.y = Bee.y + radius * Math.sin(angle);

*Spiral movement*

A spiral movement is actually nothing else than a circular-movement with decreasing radius. Our bee still circulates, but the radius becomes less and less:

var radius = 10;var radius_direction = -1;

var angle = 0;

var orbit_speed = 0.1; // 0.1 radians per update tickvarmoveCircular= function() {

bee.x = bee.x + radius * Math.cos(angle);

bee.y = bee.y + radius * Math.sin(angle);

// Reset the angle after 360 degree turn

if (angle >= Math.PI * 2) {

angle = 0;

// Change spiral movement direction

if (radius <= 1 || radius > 10) {

radius_direction = radius_direction * -1;

}

// After 360 degree, we in- or decrease the radiusradius += 1 * radius_direction;

}

angle += orbit_speed;

};

Just play around with the code in the JsFiddle-Demo to get a better feeling about how all the variables affect the movement.

If you are interested in more math with javascript, I found this article “A Quick Look Into The Math Of Animations With JavaScript” really helpful.