2D viewing pipeline with matrices

The two-dimensional viewing pipeline is the sequence of transformations that converts a 2D scene described in world coordinates into the pixels of a viewport on the display device.

Steps of the 2D viewing pipeline

Modelling      Modelling        World         Viewing
coordinates -> transform  -> coordinates -> transform
                                                 |
Device     <- Window-to-viewport <- Clipping <- Viewing
coordinates      mapping            (window)     coordinates

1. Modelling transformation: each object is defined in its own modelling coordinates and is placed into the common world coordinate system (WC) by translation, rotation and scaling.
2. World to viewing coordinates (viewing transformation): a window (the part of the world to be displayed) is defined in WC. If the window is rotated by an angle θ and has reference point (xw, yw), the window is aligned with the axes: M = R(−θ) · T(−xw, −yw).
3. Clipping: everything outside the window is removed (point, line, polygon clipping).
4. Window-to-viewport mapping: the window is mapped to the viewport (the area of the screen on which the image appears), normally via normalised coordinates 0 to 1.
5. Device coordinates: the viewport coordinates are given to the display device.

Matrices

Translate T(−xwmin, −ywmin):  | 1 0 −xwmin |
                              | 0 1 −ywmin |
                              | 0 0   1    |

Scale S(sx, sy):              | sx 0  0 |
 sx = (xvmax−xvmin)/(xwmax−xwmin)  | 0 sy 0 |
 sy = (yvmax−yvmin)/(ywmax−ywmin)  | 0  0 1 |

Translate T(xvmin, yvmin):    | 1 0 xvmin |
                              | 0 1 yvmin |
                              | 0 0   1   |

Composite window-to-viewport:  M = T(xvmin,yvmin) · S(sx,sy) · T(−xwmin,−ywmin)

       | sx  0  xvmin − sx·xwmin |
   M = | 0  sy  yvmin − sy·ywmin |
       | 0   0         1         |

Window-to-viewport equations:
   xv = xvmin + (xw − xwmin)·sx
   yv = yvmin + (yw − ywmin)·sy

If sx = sy, the shape is preserved; otherwise the picture is stretched or compressed.