In this second part of the series on trigonometric functions we will use the sine and cosine of an angle to rotate a point around a specific central point. We will then see that by drawing multiple points around the central point and using the same calculation on each we can create the effect of an object spinning around.
Rotating a point around a central point is actually really simple. Here is the algorithm.
rotated point x = original x * cosine (angle in radians to change by) – original y * sine (angle in radians to change by)
rotated point y = original x * sine (angle in radians to change by) + original y * cosine (angle in radians to change by)
Notice the subtle but important differences in finding the rotated y coordinate compared to finding the rotated x coordinate.
However, implementing this algorithm in a game takes a bit more discussion. First, let’s look at some really simple angles and coordinates where we don’t really need a fancy algorithm, to prove that this works.
Assume that we have a point at -10, -10 and we rotate it 180 degrees around the point 0,0. We don’t need the algorithm to know that the rotated point will end up at 10,10 as shown in the next diagram.
Doing the math
Let’s break up the algorithm and run the numbers through it a step at a time. If all is well we should come up with the rotated coordinates 10,10.
Starting with finding the rotated x. Here is a reminder of how we find x.
rotated point x = original x * cosine (angle in radians to change by) – original y * sine (angle in radians to change by)
X Step 1: original x * cosine (angle to change by)
-10 * cosine of radian equivalent of 180 =
-10 * cosine of pi / 180 * 180 =
-10 * cosine of 3.1415926535897932384626433832795 =
-10 * -1 =
= 10
X Step 2: original y * sine (angle in radians to change by)
-10 * sine of radian equivalent of 180 =
-10 * sine of pi / 180 * 180 =
-10 * sine of 3.1415926535897932384626433832795 =
– 10 * 0 =
= 0
X Step 3: part 1 – part 2
10 – 0 =
10
So x = 10. Yay!
Now for y. Here is a reminder of how we find y.
rotated point y = original x * sine (angle in radians to change by) + original y * cosine (angle in radians to change by)
Y Part 1: original x * sine (angle in radians to change by)
-10 * sine of radian equivalent of 180 =
-10 * sine of pi / 180 * 180 =
-10 * sine of 3.1415926535897932384626433832795 =
– 10 * 0 =
= 0
Y Part 2: original y * cosine (angle in radians to change by)
-10 * cosine of radian equivalent of 180 =
-10 * cosine of pi / 180 * 180 =
-10 * cosine of 3.1415926535897932384626433832795 =
-10 * -1 =
= 10
Y Part 3: part 1 + part 2
0 + 10 =
10
So y = 10. Yay!
So as we can see the results are as expected. But we need to do more to put this into action in a 2d game.
Object space and world space
The problem is that this algorithm will only work when the centre of the rotation is zero. This is known as the origin. This is why we used the example that we did. It is not to say that there aren’t some cool uses for doing rotations around points other than 0,0 but that is for another article.
All of a sudden our algorithm might seem a little bit useless. However, it is quite simple to accommodate this requirement. We just need to treat each of the objects in our game as having there own coordinate system known as object space yet still existing in the larger game world known as world space.
The simple trick to managing these two different coordinate systems is to track a centre point of the object in world space coordinates as well as the three points that make up the actual vertices of the object.
So let’s say that in the previous image the centre point of the object is in the exact centre of the screen and the resolution of the device is 1920 x 1080. The centre of the object has the coordinates 960, 540. Also, We can therefore, draw lines between the three vertices as follows:
point a at centre x, centre y + 150 = 960, 690
point b at centre x – 75, centre y – 150 = 885, 390
point c at centre x + 75, centre y – 150 = 1035, 390
Simply join up the dots with three lines and we have our cool triangle spaceship. The problem is that if we try and rotate any of those points, perhaps a (960, 690) we will get results that are totally unusable for rotating our spaceship. In fact, the point would disappear entirely from the screen. Try it with the algorithm we have recently stepped through if you like. However if we simply subtract the centre point from each of the others we will then have a zero based, object space coordinate range identical to the coordinates above and our rotation algorithm will work just fine.
So the solution is as follows. To rotate the spaceship each frame:
- subtract centre x from point a x
- subtract centre y from point a y
- rotate point a
- add centre x to point a x
- add centre y to point a y
- repeat from step 1 for points b and c as well
- draw the spaceship at the new coordinates
Let’s go ahead and try this out for real.
Hello again,
Another good article. From this post I was able to code a triangle spaceship and make it rotate when I press either the left or right keyboard buttons.
Had a quick question. If I wanted the ship to move around like an asteroids game. How to get the ship to propel forward or backwards based off the angle, also, how do I figure out the angle that it is pointing. If you don’t have an article already about this, would be a good one!
Thanks!
Hi Dave,
Thanks for your comment. Try this article. It puts all the theory and a bit more, into practice: Android 2d rotation and heading demo. It is for Android in Java but shouldn’t be too hard to translate to your chosen platform.
Good luck!