in Maths

A Gentle Primer on 2D Rotations

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.

2d transform_01

While the former \left(x,y\right) measures the distance of the point according a set of orthogonal axes, the latter \left\langle R,\theta\right\rangle 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.

2d transform_02 These two representations are deeply connected by trigonometry, since:

    \[x=R \, \cos\left(\theta\right ) \]

    \[y=R \, \sin\left(\theta\right ) \]

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.

a2

Sine and cosine are actually the same function. The only difference is that they’re shifted of 90 degrees:

oie_transparent

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.

2d transform_03In this image, the point \left(x,y\right) is rotate by an angle \phi. Its new position \left({x}',{y}'\right) can be defined as:

    \[{x}' = R \, \cos\left(\theta + \phi\right )\]

    \[{y}' = R \, \sin\left(\theta + \phi\right )\]

Knowing the polar coordinates of \left(x,y\right), finding \left({x}',{y}'\right) 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:

    \[\cos\left(\theta+\phi\right) =\cos\left(\theta\right) \cos\left(\phi\right)-\sin\left(\theta\right)\sin\left(\phi\right)\]

    \[\sin\left(\theta+\phi\right) =\sin\left(\theta\right) \cos\left(\phi\right)+\cos\left(\theta\right)\sin\left(\phi\right)\]

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)\]

    \[{y}' = R \, \sin\left(\theta\right) \cos\left(\phi\right)+ R \, \cos\left(\theta\right) \sin\left(\phi\right)\]

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

    \[R=\frac{x}{\cos\left(\theta\right)}=\frac{y}{\sin\left(\theta\right)}\]

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)\]

    \[{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)\]

Simplifying:

    \[{x}' = x \, \cos\left(\phi\right)- y\, \sin\left(\phi\right)\]

    \[{y}' =  x\, \sin\left(\phi\right) + y \, \cos\left(\phi\right)\]

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\right\rangle:

    \[\left\langle R,\theta+\phi\right\rangle\]

Cartesian coordinates \left(x,y\right):

    \[{x}' = x \, \cos\left(\phi\right)- y\, \sin\left(\phi\right)\]

    \[{y}' =  x\, \sin\left(\phi\right) + y \, \cos\left(\phi\right)\]

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

💖 Support this blog

This website 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.

Patreon Patreon_button
Twitter_logo

YouTube_logo
📧 Stay updated

You will be notified when a new tutorial is released!

📝 Licensing

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. ❤️🧔🏻

Write a Comment

Comment

  1. 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!

  2. 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.

  3. Hi,
    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.

Webmentions

  • Unity 4D #2: Extending Unity to 4D - Alan Zucconi March 25, 2020

    […] A Gentle Primer on 2D Rotations […]

  • Topographical Maps in Unity: Terrain Shading - Alan Zucconi March 25, 2020

    […] In linear algebra, matrix multiplication can be used to rotate and translate objects. To understand how this works, you can refer to A Gentle Primer on 2D Rotations. […]

  • Something for the weekend #017 | OZARIN March 25, 2020

    […] Read the full article on Alan Zucconi’s blog […]