in maths

A Gentle Primer on 2D Rotations

Share Button

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

📧 Stay updated

A new tutorial is released every week.

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

Paypal
Ko-fi
Twitter_logo

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!

Webmentions

  • Something for the weekend #017 | OZARIN July 21, 2018

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