This tutorial will introduce rotations, translations and other affine transformations. This knowledge is essential not just for 2D games, but also to understand Quaternions and transformations in 3D games. This first post of the series is a gentle primer on 2D rotations.

Representing 2D points

A point in a 2D space can be represented in a series of ways. Despite being all equivalent, each one finds its own applications. The Cartesian (left) and Polar (right) representations are the two most common ways to define 2D points.

While the former measures the distance of the point according a set of orthogonal axes, the latter uses the distance from the centre and the angle the point makes with the X axis. Regardless of the way you represent a point in 2D, you will always need two coordinates.

These two representations are deeply connected by trigonometry, since:

At this stage it doesn’t matter if you have never heard of the trigonometric functions cosine and sine. The only thing you should know to understand the rest of this post is that given a vector, cosine and sine are used to calculate the length of its projections onto the X and Y axes (in blue and red, respectively). Trigonometry is, in a nutshell, the glue that connects Cartesian and Polar representations of points.

A primer on trigonometry The cosine and sine functions plays a key role in 2D and 3D graphics. Given an angle, they return the projection onto the X and Y axes of a unitary segment. Sine and cosine are actually the same function. The only difference is that they’re shifted of 90 degrees: For the purposes of this tutorial, you don’t need to know anything more about trigonometry.

Rotating points

Using trigonometry might seem an overkill, but there are many instances in which talking about angles is convenient. Rotations, for instance, are trivial to represent with angles.

In this image, the point is rotate by an angle . Its new position can be defined as:

Knowing the polar coordinates of , finding is trivial. However, doing the same in the Cartesian plane is not.

Before doing this, we need a little refresher on trigonometry.

Remembering the trigonometric addition formulas:

We can now use these identities to expand the sum of angles into:

From the initial definition of and , we can extract the value of , which can be expressed in two different (yet equivalent) forms:

Substituting:

Simplifying:

Using trigonometry, we can now rotate points in 2D, even when they are not expressed in polar coordinates.

Conclusion

This post has introduced two ways of representing points in a 2D, and how they are connected by trigonometry. We have also shown how to rotate points in 2D in both representations.

Polar coordinates :

Cartesian coordinates :

The next post in this series will focus on how rotations can be expressed in matrix form. This is the next step to understand how quaternion works.

Other resources

Part 1. A Gentle Primer on 2D Rotations

Part 2. The Transformation Matrix

Part 3. Rotations in the Complex Plane

Part 4. Understanding Rotations in 3D

Part 5. Understanding Quaternions