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:
![\[x=R \, \cos\left(\theta\right ) \]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-e8b2e786f6267b518d76c162e95cad2a_l3.png "Rendered by QuickLaTeX.com")
![\[y=R \, \sin\left(\theta\right ) \]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-6aefa2309257048436b8d20d744271fe_l3.png "Rendered by QuickLaTeX.com")
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.
📰 Ad Break
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:
![\[{x}' = R \, \cos\left(\theta + \phi\right )\]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-6d791e22cf095a00ebaf05ada70f6743_l3.png "Rendered by QuickLaTeX.com")
![\[{y}' = R \, \sin\left(\theta + \phi\right )\]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-8cdd2fe63aa6ef9eefdf66bdf085f3de_l3.png "Rendered by QuickLaTeX.com")
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.
❓ The trigonometric addition formulas
![\[\cos\left(\theta+\phi\right) =\cos\left(\theta\right) \cos\left(\phi\right)-\sin\left(\theta\right)\sin\left(\phi\right)\]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-c8385ebc60b73b8258f0e6260677ae3a_l3.png "Rendered by QuickLaTeX.com")
![\[\sin\left(\theta+\phi\right) =\sin\left(\theta\right) \cos\left(\phi\right)+\cos\left(\theta\right)\sin\left(\phi\right)\]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-969d15608f6f80297e37d24109365715_l3.png "Rendered by QuickLaTeX.com")
We can now use these identities to expand the sum of angles into:
![\[{x}' = R \, \cos\left(\theta\right) \cos\left(\phi\right)- R \, sin\left(\theta\right) \sin\left(\phi\right)\]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-4bc2944b22dda1211dfaa0975fd464da_l3.png "Rendered by QuickLaTeX.com")
![\[{y}' = R \, \sin\left(\theta\right) \cos\left(\phi\right)+ R \, \cos\left(\theta\right) \sin\left(\phi\right)\]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-3ca148b777b7fe88f1029e493cbdde30_l3.png "Rendered by QuickLaTeX.com")
From the initial definition of 
and 
, we can extract the value of 
, which can be expressed in two different (yet equivalent) forms:
![\[R=\frac{x}{\cos\left(\theta\right)}=\frac{y}{\sin\left(\theta\right)}\]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-5e28253d9c3cf0323441fa015eb39582_l3.png "Rendered by QuickLaTeX.com")
Substituting:
![\[{x}' = \boxed{\frac{x}{\cos\left(\theta\right)}} \, \cos\left(\theta\right) \cos\left(\phi\right)- \boxed{\frac{y}{\sin\left(\theta\right)}} \, \sin\left(\theta\right)\sin\left(\phi\right)\]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-ce45595826e4ffc31722f8b07be11df0_l3.png "Rendered by QuickLaTeX.com")
![\[{y}' = \boxed{\frac{y}{\sin\left(\theta\right)}} \, \sin\left(\theta\right) \cos\left(\phi\right)+ \boxed{\frac{x}{\cos\left(\theta\right)}} \, \cos\left(\theta\right)\sin\left(\phi\right)\]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-cbad7b5f2cfd1f04d996c9f98956e133_l3.png "Rendered by QuickLaTeX.com")
Simplifying:
![\[{x}' = x \, \cos\left(\phi\right)- y\, \sin\left(\phi\right)\]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-c06eac1eb2b8967e4a72d06516252f29_l3.png "Rendered by QuickLaTeX.com")
![\[{y}' = x\, \sin\left(\phi\right) + y \, \cos\left(\phi\right)\]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-0d42f021df2e967e57b470834362b330_l3.png "Rendered by QuickLaTeX.com")
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 :
![\[\left\langle R,\theta+\phi\right\rangle\]](https://www.alanzucconi.com/wp-content/ql-cache/quicklatex.com-6b9a5a5d03f0e1e6bd2ee9d836c73b06_l3.png "Rendered by QuickLaTeX.com")
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
Become a member
Leave a Reply