Rotation

Rotation in 2D

Rotation is where coordinate transformation gets genuinely interesting. Unlike translation and scaling, rotation cannot be expressed as simple addition or multiplication of individual coordinates. We need to mix x and y together using trigonometry.

The fundamental insight: a point at angle $\theta$ from the origin, at distance $r$, has coordinates $(r \cos\theta, r \sin\theta)$. To rotate that point by an additional angle $\phi$, we need to compute its new coordinates at angle $\theta + \phi$.

Expanding the trigonometric identities:

The new x coordinate depends on both the old x and old y. The same is true for the new y. This mixing of coordinates is what makes rotation fundamentally different from other transformations.

Notice how the entire coordinate grid spins around the origin. Every point maintains its distance from the center but changes its angle.

The Rotation Matrix

We can express this transformation compactly as a matrix multiplication:

In GLSL, we implement this as:

vec2 rotate(vec2 p, float angle) {
  float c = cos(angle);
  float s = sin(angle);
  return vec2(p.x * c - p.y * s, p.x * s + p.y * c);
}

This function takes any 2D point and returns that point rotated by the given angle around the origin. The angle is in radians: $\pi$ is half a turn, $2\pi$ is a full turn.

Watch how the matrix values change as you adjust the angle. At 0 degrees, the matrix is the identity. At 90 degrees, cos becomes 0 and sin becomes 1, perfectly swapping and negating coordinates.

Rotating Around Different Centers

By default, rotation happens around the origin. But what if we want to rotate around a different point?

The technique is straightforward: translate the coordinate system so the desired center becomes the origin, rotate, then translate back.

vec2 rotateAround(vec2 p, vec2 center, float angle) {
  p -= center;
  p = rotate(p, angle);
  p += center;
  return p;
}

Drag the center point to see how the rotation changes. When the center is at the origin, the shape spins in place. When the center is offset, the shape orbits around that point.

Order of Transformations

The order of rotation, translation, and scaling matters enormously. Consider these two sequences:

Rotate then translate: The shape rotates in place, then moves to its new position.

Translate then rotate: The translation gets rotated. If you translate right then rotate 90 degrees, the shape ends up above the origin, not to the right.

// Rotate first, then translate
uv = rotate(uv, angle);
uv = uv - offset;
 
// Translate first, then rotate
uv = uv - offset;
uv = rotate(uv, angle);

Toggle between the two orderings while adjusting the angle. The visual difference is dramatic. Understanding this ordering is essential for building complex animated scenes.

Building Intuition

The counterintuitive nature of coordinate space transformations can be confusing. Here is a mental model that helps:

When you apply a transformation to coordinates, you are describing how to convert from screen space (where the pixel lives) to local space (where your shape is defined). You read the transformations in reverse order from how they visually appear.

If your code says "rotate, then translate," the shape visually appears to "translate, then rotate." This is because you are transforming the question "where am I?" not the answer "where should this go?"

Animation with Rotation

Rotation naturally lends itself to animation. By using time as the angle, you create spinning effects:

float angle = u_time;  // one full rotation per 2*PI seconds
vec2 rotated = rotate(uv, angle);

For smoother, slower rotation, multiply time by a smaller factor. For faster rotation, multiply by a larger factor. The relationship is linear: u_time * 0.5 gives you half the rotation speed.

Looking Ahead

With translation, scaling, and rotation under your belt, you have the complete toolkit for 2D coordinate manipulation. In the next part of the course, we will apply these transformations to shape drawing, learning how functions like step and smoothstep let us carve out regions of the coordinate plane.

Key Takeaways

• Rotation mixes x and y coordinates using sine and cosine
• The rotation matrix is $\begin{bmatrix} \cos\phi & -\sin\phi \\ \sin\phi & \cos\phi \end{bmatrix}$
• Rotation happens around the origin unless you translate first
• To rotate around an arbitrary point: translate to origin, rotate, translate back
• Transform order matters: rotate-then-translate differs from translate-then-rotate
• Time-based rotation creates smooth spinning animations