2D Transformations: Translations, Rotations, Scaling & Shearing

TAKEAWAYS:

• 2D transformations move, resize, or distort objects using matrices (translation, rotation, scaling, shearing).
• Homogeneous coordinates (adding a w term) unify all transformations into a single 3×3 matrix.
• Composition of transformations applies multiple operations in sequence (e.g., rotate-then-scale).
• Applications include game character movement, UI animations, and CAD tools like AutoCAD.
• Key matrices:
  • Translation: [1 0 tx; 0 1 ty; 0 0 1]
  • Rotation: [cosθ -sinθ 0; sinθ cosθ 0; 0 0 1]
  • Scaling: [sx 0 0; 0 sy 0; 0 0 1]
  • Shearing: [1 shx 0; shy 1 0; 0 0 1]

---

1. Introduction to 2D Transformations

Transformations alter the position, size, or shape of objects in 2D space. They are essential for:

• Animation (e.g., a spinning fan in a game).
• User interfaces (e.g., dragging a window).
• Computer-aided design (CAD) (e.g., resizing a blueprint).

Real-world example:

• Pathao’s ride animation: When you request a ride, the app shows a moving dot (your driver) on a map. This uses translation (moving the dot along a path) and rotation (updating the driver’s car icon orientation).
• Khalti’s QR code scanner: The app dynamically scales and rotates the QR code preview to align it with the camera feed.

---

2. Types of 2D Transformations

There are four fundamental transformations:

1. Translation: Moves an object without rotating or scaling.
2. Rotation: Rotates an object around a fixed point (origin or custom pivot).
3. Scaling: Resizes an object uniformly or non-uniformly.
4. Shearing: Slants an object along an axis (e.g., turning a square into a parallelogram).

2.1 Translation

Moves an object by (tx, ty) units. Matrix form (using homogeneous coordinates):

[ x' ]   [ 1   0   tx ] [ x ]
[ y' ] = [ 0   1   ty ] [ y ]
[ 1  ]   [ 0   0   1  ] [ 1 ]

Worked Example: Translate point (2, 3) by (4, -1):

x' = 1·2 + 0·3 + 4·1 = 6
y' = 0·2 + 1·3 + (-1)·1 = 2

Result: (6, 2)

Visual:

---

2.2 Rotation

Rotates a point (x, y) by angle θ around the origin. Matrix form:

[ x' ]   [ cosθ  -sinθ  0 ] [ x ]
[ y' ] = [ sinθ   cosθ  0 ] [ y ]
[ 1  ]   [ 0      0     1 ] [ 1 ]

Worked Example: Rotate (1, 0) by 90° (θ = π/2 radians):

cos(90°) = 0, sin(90°) = 1
x' = 0·1 + (-1)·0 + 0·1 = 0
y' = 1·1 + 0·0 + 0·1 = 1

Result: (0, 1) (moves from the x-axis to the y-axis).

Real-world tie-in:

• NTC’s traffic signal animation: A traffic light changes from red to green via rotation of the signal icon (e.g., a circular arrow spinning).
• Daraz’s product carousel: Items in the "You may also like" section slide horizontally using translation and rotation for smooth transitions.

Visual:

---

2.3 Scaling

Resizes an object by factors (sx, sy) along x and y axes. Matrix form:

[ x' ]   [ sx   0   0 ] [ x ]
[ y' ] = [ 0   sy   0 ] [ y ]
[ 1  ]   [ 0    0   1 ] [ 1 ]

Worked Example: Scale (2, 3) by (1.5, 0.5):

x' = 1.5·2 + 0·3 + 0·1 = 3
y' = 0·2 + 0.5·3 + 0·1 = 1.5

Result: (3, 1.5)

Uniform scaling (same factor for x and y) preserves shape. Non-uniform scaling distorts shape (e.g., stretching a circle into an ellipse).

Real-world example:

• WhatsApp’s zoom feature: Pinch-to-zoom uses scaling to enlarge chat messages or images.
• Nepal Stock Exchange (NEPSE) charts: Price graphs use scaling to fit data into a readable window.

Visual:

---

2.4 Shearing

Slants an object along an axis without changing its area. X-shear matrix (slants along x-axis):

[ x' ]   [ 1   shx  0 ] [ x ]
[ y' ] = [ 0    1   0 ] [ y ]
[ 1  ]   [ 0    0   1 ] [ 1 ]

Y-shear matrix (slants along y-axis):

[ x' ]   [ 1    0   0 ] [ x ]
[ y' ] = [ shy  1   0 ] [ y ]
[ 1  ]   [ 0    0   1 ] [ 1 ]

Worked Example: Shear (1, 1) by shx = 1 (x-shear):

x' = 1·1 + 1·1 + 0·1 = 2
y' = 0·1 + 1·1 + 0·1 = 1

Result: (2, 1) (the point moves right but stays at the same height).

Real-world example:

• Google Maps’ tilted buildings: Some 3D buildings in Street View appear sheared to match real-world perspectives.
• eSewa’s receipt design: Text or logos may use shearing for artistic effects (e.g., slanted headers).

Visual:

---

3. Homogeneous Coordinates

To represent translation as a matrix (like rotation/scaling), we use homogeneous coordinates:

• Convert (x, y) to (x, y, 1).
• Translation becomes:

  [ x' ]   [ 1   0   tx ] [ x ]
  [ y' ] = [ 0   1   ty ] [ y ]
  [ 1  ]   [ 0   0    1 ] [ 1 ]
  

Why?

• All transformations (translation, rotation, scaling, shearing) can now be combined into single matrices.
• Enables composition (applying multiple transformations in sequence).

Example: Combine rotate 90° and translate (1, 0):

T = [1 0 1; 0 1 0; 0 0 1]   (Translation)
R = [0 -1 0; 1 0 0; 0 0 1]   (Rotation)
Combined = T · R = [0 -1 1; 1 0 0; 0 0 1]

Apply to (1, 0):

x' = 0·1 + (-1)·0 + 1·1 = 1
y' = 1·1 + 0·0 + 0·1 = 1

Result: (1, 1) (first rotates to (0, 1), then translates to (1, 1)).

---

4. Composition of Transformations

Applying multiple transformations in sequence is called composition. The order matters! Example:

1. Scale (2, 3) by (0.5, 1) → (1, 3)
2. Rotate by 90° → (-3, 1)
3. Translate by (2, 2) → (-1, 3)

Matrix composition:

T_final = T · R · S

Worked Example: Compose scale (2, 2) and rotate 45°:

S = [2 0 0; 0 2 0; 0 0 1]
R = [cos45 -sin45 0; sin45 cos45 0; 0 0 1] = [√2/2 -√2/2 0; √2/2 √2/2 0; 0 0 1]
T_final = R · S = [2√2/2 -2√2/2 0; 2√2/2 2√2/2 0; 0 0 1]

Apply to (1, 0):

x' = (2√2/2)·1 + (-2√2/2)·0 + 0·1 = √2 ≈ 1.414
y' = (2√2/2)·1 + (2√2/2)·0 + 0·1 = √2 ≈ 1.414

Result: (√2, √2) (scaled first, then rotated).

Real-world example:

• AutoCAD drawings: Engineers compose transformations to design complex parts (e.g., rotate a gear, then scale it to fit).
• Unity game engine: Characters move via composed transformations (e.g., rotate + translate to walk diagonally).

---

5. Inverse Transformations

To undo a transformation, use its inverse matrix. Examples:

Worked Example: Find the inverse of translate (3, -2):

Original: [1 0 3; 0 1 -2; 0 0 1]
Inverse:  [1 0 -3; 0 1 2; 0 0 1]

Apply to (5, 4) to reverse the translation:

x' = 1·5 + 0·4 + (-3)·1 = 2
y' = 0·5 + 1·4 + 2·1 = 6

Result: (2, 6) (original point before translation).

---

6. Applications in Real-World Systems

---

7. Common Pitfalls and Exam Tips

Mistakes to Avoid:

1. Forgetting homogeneous coordinates for translation (always use (x, y, 1)).
2. Incorrect matrix multiplication order: T_final = T2 · T1 (right-to-left application).
3. Sign errors in rotation: sinθ and cosθ must match the angle’s quadrant.
4. Assuming composition is commutative: T1 · T2 ≠ T2 · T1 (order matters!).

Exam Tip:

• Always show matrix multiplication steps in exams (even if simplified).
• Label transformations clearly (e.g., "Rotate 30° about origin").
• Use small numbers in examples (e.g., rotate (1, 0) by 90°) to avoid calculation errors.
• Draw before and after diagrams for transformations (e.g., a square sheared into a parallelogram).

Example Question: "A triangle with vertices (1,1), (2,1), (1,2) is first scaled by (2, 0.5), then rotated by 90° about the origin. Find the final coordinates."

Solution Steps:

1. Scale each vertex:
   • (1,1) → (2, 0.5)
   • (2,1) → (4, 0.5)
   • (1,2) → (2, 1)
2. Rotate by 90° (use rotation matrix):
   • (2, 0.5) → (-0.5, 2)
   • (4, 0.5) → (-0.5, 4)
   • (2, 1) → (-1, 2)
3. Final vertices: (-0.5, 2), (-0.5, 4), (-1, 2).

---

8. Summary Table of Transformations

---

9. In the Real World

1. Pathao’s Ride Tracking:

   • Transformations used: Translation (moving the driver’s dot along the route) + Rotation (updating the car’s orientation to match the road).
   • How it works: The app calculates the driver’s position in real-time using GPS, then applies a translation matrix to update the dot’s coordinates on the 2D map. Rotation matrices adjust the car icon’s angle based on the road’s slope.

2. Khalti’s QR Code Scanner:

   • Transformations used: Scaling (zooming in/out to focus on the QR code) + Rotation (tilting the phone to align the code with the camera).
   • How it works: The scanner uses computer vision to detect the QR code’s edges. If the code is tilted, a rotation matrix corrects its orientation before decoding. Scaling adjusts the preview size for readability.

3. AutoCAD for Engineering Designs:

   • Transformations used: Composition of scaling and rotation.
   • Example: An engineer designs a gear:
     1. Draws a circle (radius = 10 units).
     2. Scales it by (0.5, 0.5) to fit a blueprint.
     3. Rotates it by 45° to align with other components.
     4. Uses the combined transformation matrix to apply both steps at once.

4. Google Maps’ 3D Buildings:

   • Transformations used: Shearing (tilting buildings to match real-world perspectives) + Scaling (adjusting height/width for accuracy).
   • Example: A building in Kathmandu might appear sheared slightly to the right when viewed from a street-level angle, mimicking how humans perceive depth.

5. Nepal Rastra Bank’s Digital Currency Notes:

   • Transformations used: Rotation and scaling in security features.
   • Example: The holographic strip on new banknotes uses rotation to create shifting 3D effects when tilted, while scaling adjusts the size of microtext for anti-counterfeiting.

---

10. Exam Tip

• For matrix questions, always:
  1. Write the transformation matrices clearly.
  2. Multiply step-by-step (show intermediate results).
  3. Label axes and points in diagrams (e.g., "Original point P(2,3)").
• For composition, remember:
  • Rightmost matrix is applied first.
  • Draw a small diagram to visualize the order.
• For inverses, practice deriving them from the original matrix (e.g., negate translation values, use reciprocal for scaling).
• Real-world questions often involve composition (e.g., "A robot arm first rotates, then translates. Find the combined matrix."). Assume standard axes unless stated otherwise.

---