Coordinate Systems & Geometric Transformations

TAKEAWAYS:

• Coordinate systems (Cartesian, homogeneous) define where objects exist in space, with homogeneous coordinates enabling uniform matrix operations.
• Geometric transformations (translation, scaling, rotation, reflection) move, resize, or flip objects using matrices; order matters in composite transformations.
• Window-to-viewport mapping scales and translates world coordinates to screen pixels while preserving aspect ratio, avoiding distortion.
• Homogeneous coordinates (3D for 2D) let all transformations be represented as matrix multiplications, simplifying code and hardware implementation.
• Real-world use: Daraz’s 3D product previews use rotation/scaling; Pathao’s route optimization relies on coordinate transformations to plot paths.
• Exam focus: Derive matrices, prove properties (e.g., scaling order), and solve window-to-viewport mappings—always show step-by-step matrix math.

1. Coordinate Systems in Computer Graphics

1.1 Cartesian vs. Homogeneous Coordinates

• Cartesian coordinates (x, y, z) represent points in space but cannot directly handle translation via matrix multiplication.
• Homogeneous coordinates extend this to (x, y, z, 1) for 2D or (x, y, z, w) for 3D, enabling uniform matrix operations.

   Cartesian (2D)       →       Homogeneous (2D)
   (x, y)               →       (x, y, 1)

Why homogeneous?

• All transformations (translation, scaling, rotation) become matrix multiplications.
• Simplifies pipeline processing (e.g., GPU rendering).

1.2 Common Coordinate Systems

2. Geometric Transformations

Transformations modify object positions, shapes, or orientations using matrices. All operations are linear (except reflection) and can be combined via matrix multiplication.

2.1 Translation (Moving Objects)

• Moves an object by (tx, ty, tz) without changing its shape.
• Matrix (2D): $$\left[\begin{array}{ccc}1& 0& tx\\ 0& 1& ty\\ 0& 0& 1\end{array}\right]$$

Worked Example: Moving a Point Translate point $P(2,3)$ by $(5,-1)$: $$\left[\begin{array}{ccc}1& 0& 5\\ 0& 1& -1\\ 0& 0& 1\end{array}\right]\left[\begin{array}{c}2\\ 3\\ 1\end{array}\right]=\left[\begin{array}{c}7\\ 2\\ 1\end{array}\right]$$ → New point: $(7,2)$.

2.2 Scaling (Resizing Objects)

• Scales object along x, y, or z axes by factors (sx, sy, sz).
• Matrix (2D): $$\left[\begin{array}{ccc}sx& 0& 0\\ 0& sy& 0\\ 0& 0& 1\end{array}\right]$$

Key Property: Two successive scalings are multiplicative: If scaled by $(s_1,s_2)$ then $(s_3,s_4)$, final scale is $(s_1\cdot s_3,s_2\cdot s_4)$.

Worked Example: Scaling a Triangle Scale triangle vertices $A(1,1)$, $B(3,1)$, $C(2,4)$ by $(2,0.5)$:

• $A^{\prime }=(2,0.5)$
• $B^{\prime }=(6,0.5)$
• $C^{\prime }=(4,2)$

2.3 Rotation (Turning Objects)

• Rotates an object around an axis by an angle $\theta$.
• 2D Rotation Matrix (about origin): $$\left[\begin{array}{ccc}\cos \theta & -\sin \theta & 0\\ \sin \theta & \cos \theta & 0\\ 0& 0& 1\end{array}\right]$$

Worked Example: Rotating a Point Rotate $P(1,0)$ by $90^{\circ }$ (clockwise): $$\theta =90^{\circ }\Rightarrow \cos \theta =0,\sin \theta =-1$$ $$\left[\begin{array}{ccc}0& -1& 0\\ 1& 0& 0\\ 0& 0& 1\end{array}\right]\left[\begin{array}{c}1\\ 0\\ 1\end{array}\right]=\left[\begin{array}{c}0\\ 1\\ 1\end{array}\right]$$ → New point: $(0,1)$.

2.4 Reflection (Mirroring Objects)

• Reflects an object across an axis (x, y, or origin).
• 2D Reflection Matrices:
  • X-axis: $$\left[\begin{array}{ccc}1& 0& 0\\ 0& -1& 0\\ 0& 0& 1\end{array}\right]$$
  • Y-axis: $$\left[\begin{array}{ccc}-1& 0& 0\\ 0& 1& 0\\ 0& 0& 1\end{array}\right]$$

Worked Example: Reflecting a Point Reflect $P(2,3)$ across the x-axis: $$\left[\begin{array}{ccc}1& 0& 0\\ 0& -1& 0\\ 0& 0& 1\end{array}\right]\left[\begin{array}{c}2\\ 3\\ 1\end{array}\right]=\left[\begin{array}{c}2\\ -3\\ 1\end{array}\right]$$ → New point: $(2,-3)$.

2.5 Composite Transformations

• Multiple transformations applied in sequence.
• Order matters: $T_1\circ T_2\ne T_2\circ T_1$.

Example: Rotation then Translation vs. Translation then Rotation Let $P(1,0)$, rotate by $90^{\circ }$, then translate by $(2,0)$:

1. Rotate: $$\left[\begin{array}{ccc}0& -1& 0\\ 1& 0& 0\\ 0& 0& 1\end{array}\right]\left[\begin{array}{c}1\\ 0\\ 1\end{array}\right]=\left[\begin{array}{c}0\\ 1\\ 1\end{array}\right]$$
2. Translate: $$\left[\begin{array}{ccc}1& 0& 2\\ 0& 1& 0\\ 0& 0& 1\end{array}\right]\left[\begin{array}{c}0\\ 1\\ 1\end{array}\right]=\left[\begin{array}{c}2\\ 1\\ 1\end{array}\right]$$ → Final: $(2,1)$.

Now translate first, then rotate:

1. Translate: $$\left[\begin{array}{ccc}1& 0& 2\\ 0& 1& 0\\ 0& 0& 1\end{array}\right]\left[\begin{array}{c}1\\ 0\\ 1\end{array}\right]=\left[\begin{array}{c}3\\ 0\\ 1\end{array}\right]$$
2. Rotate: $$\left[\begin{array}{ccc}0& -1& 0\\ 1& 0& 0\\ 0& 0& 1\end{array}\right]\left[\begin{array}{c}3\\ 0\\ 1\end{array}\right]=\left[\begin{array}{c}0\\ 3\\ 1\end{array}\right]$$ → Final: $(0,3)$.

Conclusion: Order changes the result!

Mermaid Diagram:

3. Window-to-Viewport Transformation

Maps world coordinates (window) to screen coordinates (viewport) without distortion.

flowchart LR
    subgraph Window
        A[(-2,-2)]--"Scale by 4"-->B[(2,2)]
        C[(2,-2)]--"Translate by (1,1)"-->D[(3,3)]
    end
    subgraph Viewport
        E[(-1,-1)]--"Scale by 200"-->F[(200,200)]
        G[(200,-1)]--"Translate by (300,300)"-->H[(500,300)]
    end
    A-->|"Window→Viewport"|E
    D-->F
    caption "Window-to-viewport mapping: Scale world coordinates by 4, translate by (1,1), then scale viewport by 200 and translate by (300,300)."

3.1 Key Concepts

• Window: Defined by $(x_{min},y_{min})$ to $(x_{max},y_{max})$.
• Viewport: Defined by $(x_{vmin},y_{vmin})$ to $(x_{vmax},y_{vmax})$.
• Aspect Ratio: Must match window/viewport to avoid stretching.

3.2 Transformation Steps

1. Scale the window to fit the viewport’s width/height.
2. Translate the scaled window to the viewport’s origin.

Formula: $$\{\begin{array}{l}{x}^{\prime }=x_{vmin}+\frac{(x-x_{min})(x_{vmax}-x_{vmin})}{(x_{max}-x_{min})}\\ y^{\prime }=y_{vmin}+\frac{(y-y_{min})(y_{vmax}-y_{vmin})}{(y_{max}-y_{min})}\end{array}$$

3.3 Worked Example

Window: $(0,0)$ to $(4,4)$. Viewport: $(0,0)$ to $(2,2)$.

Transform point $P(3,2)$:

1. Scale: $$\begin{gathered} x^{\prime }=0+\frac{(3-0)(2-0)}{(4-0)}=1.5 \\ {y}^{\prime }=0+\frac{(2-0)(2-0)}{(4-0)}=1 \end{gathered}$$
2. Translate: Already at viewport origin. → Final: $(1.5,1)$.

3.4 Preserving Aspect Ratio

If window/viewport aspect ratios differ, shearing occurs. To avoid:

• Use scaling factors that match the aspect ratio: $$s_x=\frac{x_{vmax}-x_{vmin}}{x_{max}-x_{min}},s_y=\frac{y_{vmax}-y_{vmin}}{y_{max}-y_{min}}$$
• If $s_x\ne s_y$, choose the smaller scale to fit entirely.

Mermaid Diagram:

4. 3D Transformations

Extend 2D matrices to 3D for depth (z-axis).

4.1 Rotation Matrices (3D)

• X-axis: $$\left[\begin{array}{cccc}1& 0& 0& 0\\ 0& \cos \theta & -\sin \theta & 0\\ 0& \sin \theta & \cos \theta & 0\\ 0& 0& 0& 1\end{array}\right]$$
• Y-axis: $$\left[\begin{array}{cccc}\cos \theta & 0& \sin \theta & 0\\ 0& 1& 0& 0\\ -\sin \theta & 0& \cos \theta & 0\\ 0& 0& 0& 1\end{array}\right]$$
• Z-axis: $$\left[\begin{array}{cccc}\cos \theta & -\sin \theta & 0& 0\\ \sin \theta & \cos \theta & 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right]$$

4.2 Worked Example: Rotating a 3D Point

Rotate $P(1,0,0)$ by $90^{\circ }$ about the y-axis: $$\theta =90^{\circ }\Rightarrow \cos \theta =0,\sin \theta =1$$ $$\left[\begin{array}{cccc}0& 0& 1& 0\\ 0& 1& 0& 0\\ -1& 0& 0& 0\\ 0& 0& 0& 1\end{array}\right]\left[\begin{array}{c}1\\ 0\\ 0\\ 1\end{array}\right]=\left[\begin{array}{c}0\\ 0\\ -1\\ 1\end{array}\right]$$ → New point: $(0,0,-1)$.

5. Real-World Applications

In the Real World

1. Daraz 3D Product Previews

   • Idea: Rotation and scaling transformations let users view products from any angle.
   • How: Daraz’s 3D models are rotated/scaled via matrix math to render dynamic views on mobile/web.

2. Pathao Route Optimization

   • Idea: Coordinate transformations map GPS coordinates (world space) to a 2D map (viewport).
   • How: Pathao’s algorithm translates real-world locations to a simplified grid for pathfinding.

3. Ncell’s 3D Network Visualization

   • Idea: Window-to-viewport mapping scales global network diagrams to fit mobile screens.
   • How: Ncell’s app renders tower locations (world coordinates) as icons on a 2D map (viewport).

6. Exam Tips

1. Matrix Derivation: Always show steps for deriving transformation matrices (e.g., rotation, reflection). Use trigonometric identities for angles.
2. Order Matters: For composite transformations, prove why $T_1\circ T_2\ne T_2\circ T_1$ with a concrete example.
3. Window-to-Viewport: Memorize the scaling/translation formula. For aspect ratio preservation, always check if $s_x=s_y$.
4. Homogeneous Coordinates: Explain why they enable uniform matrix operations (e.g., translation becomes multiplication).
5. Worked Examples: Practice transforming points/vertices. Show every matrix multiplication step.
6. Real-World Tie: Relate transformations to apps like Daraz or Pathao (e.g., "Daraz uses rotation matrices to render 3D products").

Common Pitfalls:

• Forgetting homogeneous coordinates for translation (use $(x,y,1)$).
• Mixing up viewport origin (top-left vs. bottom-left).
• Incorrectly applying scaling factors in window-to-viewport (always divide by window size).