cyberangles blog

2D Transformation | Rotation of Objects

In computer graphics and geometric modeling, 2D transformations play a crucial role in manipulating the position, orientation, and shape of objects. One of the fundamental 2D transformations is rotation. Rotation allows us to turn an object around a specific point (usually the origin or a user - defined pivot point) in a 2D plane. This blog post will delve into the details of 2D rotation, including its mathematical formulation, implementation in different programming languages, common practices, and best practices.

2026-07

Table of Content#

  1. Mathematical Formulation of 2D Rotation
    • Rotation Matrix
    • Angle of Rotation
  2. Implementation in Programming Languages
    • Python (using NumPy and Matplotlib)
    • JavaScript (using Canvas API)
  3. Common Practices
    • Choosing the Pivot Point
    • Handling Coordinate Systems
  4. Best Practices
    • Performance Optimization
    • Error Handling
  5. Example Usage
    • Rotating a Simple Shape (e.g., a Square)
    • Animating Rotation
  6. References

1. Mathematical Formulation of 2D Rotation#

Rotation Matrix#

The rotation of a 2D point ((x,y)) around the origin by an angle (\theta) (measured in radians) can be represented using a rotation matrix (R). The rotation matrix is given by:

[R=\begin{bmatrix}\cos\theta&-\sin\theta\\sin\theta&\cos\theta\end{bmatrix}]

If we have a point (\mathbf{p}=(x,y)) (represented as a column vector (\begin{bmatrix}x\y\end{bmatrix})), the new coordinates ((x',y')) after rotation are obtained by multiplying the rotation matrix with the point vector:

(\begin{bmatrix}x'\y'\end{bmatrix}=\begin{bmatrix}\cos\theta&-\sin\theta\\sin\theta&\cos\theta\end{bmatrix}\begin{bmatrix}x\y\end{bmatrix})

Expanding the matrix multiplication:

(x' = x\cos\theta - y\sin\theta)

(y'=x\sin\theta + y\cos\theta)

Angle of Rotation#

The angle (\theta) determines the direction and amount of rotation. A positive angle value (in the standard mathematical convention) results in a counter - clockwise rotation, while a negative angle value results in a clockwise rotation.

2. Implementation in Programming Languages#

Python (using NumPy and Matplotlib)#

import numpy as np
import matplotlib.pyplot as plt
 
# Define a point
point = np.array([[2], [3]])
 
# Define the rotation angle (in radians)
theta = np.pi/4
 
# Rotation matrix
R = np.array([[np.cos(theta), -np.sin(theta)], [np.sin(theta), np.cos(theta)]])
 
# Rotate the point
rotated_point = np.dot(R, point)
 
# Plotting
plt.plot([point[0], rotated_point[0]], [point[1], rotated_point[1]], 'ro-')
plt.axis('equal')
plt.show()

JavaScript (using Canvas API)#

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
 
    // Define a point
    let x = 100;
    let y = 100;
 
    // Rotation angle (in radians)
    let theta = Math.PI/4;
 
    // Save the current state (for transformation)
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.arc(0, 0, 50, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.restore();
</script>

3. Common Practices#

Choosing the Pivot Point#

  • Origin as Pivot: When rotating around the origin, the mathematical formulation is straightforward. However, in many cases, we want to rotate an object around a different point (e.g., the center of the object).
  • Object - Centric Pivot: To rotate an object around its center ((c_x,c_y)), we first translate the object so that its center coincides with the origin, perform the rotation, and then translate it back.

Handling Coordinate Systems#

  • Screen Coordinate System: In graphics programming, the coordinate system may have the origin at the top - left corner (as in HTML5 Canvas). When performing rotations, we need to adjust the mathematical formulation accordingly. For example, if (y) - axis is pointing downwards, we may need to flip the sign of (y) in the rotation equations.

4. Best Practices#

Performance Optimization#

  • Pre - computation: If we are rotating multiple objects with the same rotation angle, we can pre - compute the rotation matrix.
  • Using Hardware Acceleration: In graphics libraries that support it (e.g., WebGL in JavaScript), use hardware - accelerated functions for rotation.

Error Handling#

  • Input Validation: Ensure that the input angle is within a valid range (usually (0\leq\theta < 2\pi) for a full rotation cycle).
  • Precision: Be aware of floating - point precision issues when performing matrix multiplications. Use appropriate data types (e.g., double - precision in Python) for more accurate results.

5. Example Usage#

Rotating a Simple Shape (e.g., a Square)#

  • Python (using NumPy and Matplotlib):
import numpy as np
import matplotlib.pyplot as plt
 
# Define the vertices of a square (assuming center at (0,0))
square_vertices = np.array([[-1,-1], [1,-1], [1,1], [-1,1], [-1,-1]])
 
# Rotation angle (in radians)
theta = np.pi/3
 
# Rotation matrix
R = np.array([[np.cos(theta), -np.sin(theta)], [np.sin(theta), np.cos(theta)]])
 
# Rotate each vertex
rotated_vertices = []
for vertex in square_vertices:
    rotated_vertex = np.dot(R, vertex)
    rotated_vertices.append(rotated_vertex)
 
rotated_vertices = np.array(rotated_vertices)
 
# Plotting
plt.plot(square_vertices[:,0], square_vertices[:,1], 'b-')
plt.plot(rotated_vertices[:,0], rotated_vertices[:,1], 'r-')
plt.axis('equal')
plt.show()

Animating Rotation#

  • JavaScript (using Canvas API and requestAnimationFrame):
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
 
    let theta = 0;
 
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
 
        // Rotation angle (in radians)
        theta += 0.01;
 
        // Save the current state (for transformation)
        ctx.save();
        ctx.translate(canvas.width/2, canvas.height/2);
        ctx.rotate(theta);
        ctx.beginPath();
        ctx.arc(0, 0, 50, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.restore();
 
        requestAnimationFrame(animate);
    }
 
    animate();
</script>

6. References#