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,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 tick
var 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 tick
var 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.