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

Image for post

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?!).

Image for post

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.


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.

Image for post
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:

Image for post
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.

Technical Product Manager and Software Engineer working for

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store