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.
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:
Using trigonometry, we can now rotate points in 2D, even when they are not expressed in polar coordinates.
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.
- 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
💖 Support this blog
This websites exists thanks to the contribution of patrons on Patreon. If you think these posts have either helped or inspired you, please consider supporting this blog.
📧 Stay updated
You will be notified when a new tutorial is relesed!
You are free to use, adapt and build upon this tutorial for your own projects (even commercially) as long as you credit me.
You are not allowed to redistribute the content of this tutorial on other platforms. Especially the parts that are only available on Patreon.
If the knowledge you have gained had a significant impact on your project, a mention in the credit would be very appreciated. ❤️🧔🏻
Great tutorial! I am studying these concepts as part of my learning process and how to use math for creating games and your tutorial comes in very handy!
not helping really.
color mixup, why having a blue x-point and a red formula for it? and vice versa for the y point
then you state we do not need to know much about trig but refer to trig identities in the next block?
For my understanding not a good explanation of cartesian rotation.
It would be good if this explained the Greek letters as they are introduced, seeing unfamiliar symbols is one of the hardest things getting started.
I believe all of the letters were introduced in the text.
Is there anyone in particulate that you feel was not explained properly?