Transformation Techniques: Translation, Rotation, Scaling, Shearing & Homogeneous Coordinates

TAKEAWAYS:

• Translation shifts objects by adding/subtracting vectors (e.g., moving a Daraz product image left/right in a carousel).
• Rotation turns objects around axes using trigonometric matrices (e.g., rotating a Pathao driver’s route on a map).
• Scaling resizes objects uniformly or non-uniformly (e.g., zooming in on a Kathmandu traffic camera’s live feed).
• Shearing skews objects along axes (e.g., distorting a WhatsApp chat bubble for artistic effects).
• Homogeneous coordinates combine all transformations into a single 4×4 matrix for efficient computation (used in OpenGL).
• Composition of transformations follows matrix multiplication order (right-to-left execution, left-to-right definition).

1. Why Transformations Matter

Computer graphics relies on mathematical transformations to manipulate objects in virtual space. These operations—translation, rotation, scaling, and shearing—are the building blocks for:

• Animations (e.g., a spinning 3D model in a game like Pokhara Dungeon).
• User interfaces (e.g., dragging a window in Windows or resizing a photo in Canva).
• Simulations (e.g., a robot arm in a factory or a virtual surgery tool).

Real-world tie-in:

• eSewa’s QR code scanner: When you scan a bill, the app uses translation + scaling to align the QR code correctly before decoding it, even if it’s tilted or zoomed.
• Ncell’s 3D map: The interactive map rotates cities (e.g., Pokhara) using rotation matrices when you drag your finger.
• Daraz’s "Add to Cart" button: The button scales up slightly on hover (scaling) and moves if the user’s cursor is near the edge (translation).

2. Core Transformations

Each transformation modifies an object’s position, orientation, or shape using matrices. Below are the four primary transformations, their formulas, and visual examples.

2.1 Translation: Moving Objects

Definition: Shifts an object by a specified distance along the x or y (or z in 3D) axis. Formula: For a point $P(x,y)$, translation by vector $(t_x,t_y)$ is: $$P^{\prime }=(x+t_x,y+t_y)$$ Matrix form (requires homogeneous coordinates, covered later): $$\left[\begin{array}{ccc}1& 0& t_x\\ 0& 1& t_y\\ 0& 0& 1\end{array}\right]\left[\begin{array}{c}x\\ y\\ 1\end{array}\right]=\left[\begin{array}{c}x+t_x\\ y+t_y\\ 1\end{array}\right]$$

Worked Example: Moving a Daraz Product Image Suppose a product thumbnail is at $P(50,50)$ pixels and needs to move 10 pixels right and 5 pixels down for a carousel effect.

• Translation vector: $(10,-5)$.
• New position: $$P^{\prime }=(50+10,50-5)=(60,45)$$

Visual:

graph LR
    A["Original (50,50)"] -->|"Translate (10,-5)"| B["Moved (60,45)"]

Real-world use:

• Khalti’s payment success screen: The "Thank You" message slides up from the bottom (translation) after a transaction.

2.2 Rotation: Turning Objects

Definition: Rotates a point around the origin (or another point) by an angle $\theta$. Formula (counter-clockwise around origin): $$\left[\begin{array}{c}{x}^{\prime }\\ y^{\prime }\end{array}\right]=\left[\begin{array}{cc}\cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \end{array}\right]\left[\begin{array}{c}x\\ y\end{array}\right]$$ For rotation around a point $(x_0,y_0)$:

1. Translate $(x_0,y_0)$ to origin.
2. Rotate.
3. Translate back.

Worked Example: Rotating a Pathao Driver’s Route A driver’s current position is $P(3,4)$ on a 2D map. Rotate it 45° counter-clockwise around the origin.

• $\theta =45°$, so $\cos 45°=\sin 45°=\frac{\sqrt{2}}{2}\approx 0.707$.
• New coordinates: $$x^{\prime }=3\cdot 0.707-4\cdot 0.707=-0.707$$ $$y^{\prime }=3\cdot 0.707+4\cdot 0.707=5.656$$ So, $P^{\prime }\approx (-0.71,5.66)$.

Visual:

graph TD
    A["Original (3,4)"] -->|"Rotate 45°"| B["Rotated (-0.71,5.66)"]

Real-world use:

• Google Maps: When you rotate the map (e.g., to align with your phone’s compass), it uses rotation matrices.
• NTC’s traffic simulation: Virtual cars turn at intersections using rotation around the road’s center point.

2.3 Scaling: Resizing Objects

Definition: Uniform scaling resizes an object equally in all directions; non-uniform scaling distorts it. Formula: $$\left[\begin{array}{c}{x}^{\prime }\\ y^{\prime }\end{array}\right]=\left[\begin{array}{cc}{s}_x& 0\\ 0& s_y\end{array}\right]\left[\begin{array}{c}x\\ y\end{array}\right]$$

• $s_x=s_y$: Uniform scaling (e.g., zooming in/out).
• $s_x\ne s_y$: Non-uniform scaling (e.g., stretching a banner).

Worked Example: Zooming a Kathmandu Traffic Camera A traffic camera captures a car at $P(100,150)$ pixels. To zoom in 2× uniformly:

• Scaling matrix: $$\left[\begin{array}{cc}2& 0\\ 0& 2\end{array}\right]$$
• New position: $$P^{\prime }=(100\cdot 2,150\cdot 2)=(200,300)$$

Visual:

graph LR
    A["Original (100,150)"] -->|"Scale 2x"| B["Zoomed (200,300)"]

Real-world use:

• WhatsApp’s photo viewer: Pinch-to-zoom uses scaling matrices.
• NEPSE stock charts: Price graphs scale vertically when you adjust the view.

2.4 Shearing: Skewing Objects

Definition: Slants an object along an axis without changing its area. Formulas:

• X-shear (skew along x-axis): $$\left[\begin{array}{cc}1& k\\ 0& 1\end{array}\right]$$
• Y-shear (skew along y-axis): $$\left[\begin{array}{cc}1& 0\\ k& 1\end{array}\right]$$ Where $k$ is the shear factor.

Worked Example: Distorting a WhatsApp Sticker Apply an x-shear with $k=0.5$ to a point $P(2,3)$: $$\left[\begin{array}{cc}1& 0.5\\ 0& 1\end{array}\right]\left[\begin{array}{c}2\\ 3\end{array}\right]=\left[\begin{array}{c}2+0.5\cdot 3\\ 3\end{array}\right]=\left[\begin{array}{c}3.5\\ 3\end{array}\right]$$

Visual:

graph TD
    A["Original (2,3)"] -->|"Shear k=0.5"| B["Skewed (3.5,3)"]

Real-world use:

• Canva’s text effects: Skewed text in posters uses shearing.
• 3D games: Terrain tilting (e.g., in Pokhara Dungeon) uses shearing for perspective.

3. Homogeneous Coordinates: The Unified System

Problem: Translation cannot be represented as a 2×2 matrix. Solution? Homogeneous coordinates add a third dimension (w=1) to combine all transformations into a single 4×4 matrix.

Key Idea:

• A point $(x,y)$ becomes $(x,y,1)$ in homogeneous coordinates.
• All transformations (translation, rotation, scaling, shearing) can now be written as: $$\left[\begin{array}{c}{x}^{\prime }\\ y^{\prime }\\ 1\end{array}\right]=\left[\begin{array}{ccc}a& b& t_x\\ c& d& t_y\\ 0& 0& 1\end{array}\right]\left[\begin{array}{c}x\\ y\\ 1\end{array}\right]$$

Example: Combined Transformation Apply translation (5, 3) followed by rotation 90° to $P(1,0)$:

1. Translation matrix: $$T=\left[\begin{array}{ccc}1& 0& 5\\ 0& 1& 3\\ 0& 0& 1\end{array}\right]$$
2. Rotation matrix (90°): $$R=\left[\begin{array}{ccc}0& -1& 0\\ 1& 0& 0\\ 0& 0& 1\end{array}\right]$$
3. Combined matrix (right-to-left execution): $$M=R\cdot T=\left[\begin{array}{ccc}0& -1& -3\\ 1& 0& 5\\ 0& 0& 1\end{array}\right]$$
4. Apply to $P(1,0,1)$: $$M\cdot P=\left[\begin{array}{c}0\cdot 1+(-1)\cdot 0+(-3)\cdot 1\\ 1\cdot 1+0\cdot 0+5\cdot 1\\ 1\end{array}\right]=\left[\begin{array}{c}-3\\ 6\\ 1\end{array}\right]$$ So, $P^{\prime }=(-3,6)$.

Visual:

graph LR
    A["Original (1,0)"] -->|"Translate (5,3)"| B["Temp (6,3)"] -->|"Rotate 90°"| C["Final (-3,6)"]

Why it matters:

• OpenGL (used in games like Pokhara Dungeon) relies on homogeneous coordinates for 3D transformations.
• CAD software (e.g., AutoCAD) uses these matrices to manipulate 3D models.

4. Transformation Composition

Rule: Transformations are applied right-to-left (matrix multiplication is associative but not commutative). Example: To move a point right by 2, then scale by 3, then rotate 90°: $$M=R\cdot S\cdot T$$ Where:

• $T$: Translation matrix.
• $S$: Scaling matrix.
• $R$: Rotation matrix.

Worked Example: Ncell’s 3D Tower Model A tower at $P(1,1)$ is:

1. Translated right by 2: $T=\left[\begin{array}{ccc}1& 0& 2\\ 0& 1& 0\\ 0& 0& 1\end{array}\right]$.
2. Scaled by 2: $S=\left[\begin{array}{ccc}2& 0& 0\\ 0& 2& 0\\ 0& 0& 1\end{array}\right]$.
3. Rotated 90°: $R=\left[\begin{array}{ccc}0& -1& 0\\ 1& 0& 0\\ 0& 0& 1\end{array}\right]$.

Combined matrix: $$M=R\cdot S\cdot T=\left[\begin{array}{ccc}0& -2& -2\\ 2& 0& 2\\ 0& 0& 1\end{array}\right]$$ Apply to $P(1,1,1)$: $$M\cdot P=\left[\begin{array}{c}0\cdot 1+(-2)\cdot 1+(-2)\cdot 1\\ 2\cdot 1+0\cdot 1+2\cdot 1\\ 1\end{array}\right]=\left[\begin{array}{c}-4\\ 4\\ 1\end{array}\right]$$ Final position: $(-4,4)$.

Visual:

graph TD
    A["Original (1,1)"] -->|"Translate (2,0)"| B["Temp (3,1)"] -->|"Scale 2x"| C["Temp (6,2)"] -->|"Rotate 90°"| D["Final (-2,6)"]

5. Inverse Transformations

Definition: The reverse of a transformation (e.g., undoing a rotation). Key Points:

• Translation inverse: $T^{-1}=\left[\begin{array}{ccc}1& 0& -t_x\\ 0& 1& -t_y\\ 0& 0& 1\end{array}\right]$.
• Rotation inverse: Rotate by $-\theta$.
• Scaling inverse: Scale by $\frac{1}{s_x},\frac{1}{s_y}$.
• Shearing inverse: Shear by $-k$.

Worked Example: Undoing a Scaling in Canva A rectangle was scaled by $S=\left[\begin{array}{cc}2& 0\\ 0& 0.5\end{array}\right]$. To revert: $$S^{-1}=\left[\begin{array}{cc}0.5& 0\\ 0& 2\end{array}\right]$$

6. Comparison Table: Transformations

7. Real-World Applications

7.1 Games and Animations

• Pokhara Dungeon: Enemies rotate toward the player (rotation matrices) and scale when hit (scaling).
• Roblox: Objects translate to new positions and shear for "wind effects."

7.2 UI/UX Design

• eSewa: Buttons translate when pressed and scale on hover.
• Khalti: Transaction success animations use rotation + translation.

7.3 CAD and 3D Modeling

• AutoCAD: Architects use scaling to resize blueprints and rotation to align structures.
• Blender: 3D models are transformed using homogeneous coordinates for realistic animations.

7.4 Robotics

• Factory arms: Use inverse kinematics (a chain of transformations) to position grippers precisely.

8. Common Pitfalls

1. Order matters: $R\cdot T\ne T\cdot R$. Always apply transformations right-to-left.
2. Forgetting homogeneous coordinates: Translation won’t work without the extra dimension.
3. Negative scaling: Can flip objects unexpectedly (e.g., scaling by $-1$ reflects a shape).
4. Angle units: Ensure $\theta$ is in radians (not degrees) unless the library converts it.

9. Exam Tip

How this unit is tested:

1. Derive matrices: Given a transformation (e.g., rotate 60°), write its matrix. (10 marks)
2. Apply transformations: Given a point and a transformation, compute the new coordinates. (10 marks)
3. Compose transformations: Combine two transformations (e.g., translate then rotate) and apply to a point. (10 marks)
4. Inverse transformations: Find the matrix to undo a given transformation. (5 marks)
5. Real-world scenarios: Explain how transformations are used in a specific app (e.g., "How does WhatsApp use scaling?"). (5 marks)

Key formulas to memorize:

• Translation, rotation, scaling, and shearing matrices.
• Homogeneous coordinate system.
• Matrix multiplication order (right-to-left).

Worked example for exams:

A triangle with vertices at $A(1,1)$, $B(2,1)$, and $C(1,2)$ is first translated by $(1,-1)$, then rotated 90° counter-clockwise. Find the new coordinates of $A$. Solution:

1. Translate $A$: $A^{\prime }=(1+1,1-1)=(2,0)$.
2. Rotate 90°: $$\left[\begin{array}{cc}0& -1\\ 1& 0\end{array}\right]\left[\begin{array}{c}2\\ 0\end{array}\right]=\left[\begin{array}{c}0\\ 2\end{array}\right]$$ So, $A^{\prime \prime }=(0,2)$.