# 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 “And 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,4B.x = 2 + 10 * cos(0.87); // = 8.44B.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 propertiesvar 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 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;   // Change spiral movement direction   if (radius <= 1 || radius > 10) {     radius_direction = radius_direction * -1;   }   // After 360 degree, we in- or decrease the radius   radius += 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.

Written by

## More From Medium

### How the Pandemic Will End

#### 2.8K

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just \$5/month. Upgrade