World to Screen (Window-to-Viewport) Transformation
Theory of Computation & Computer Graphics — Two-Dimensional Transformation, NEC licence examination syllabus (Nepal Engineering Council).
World to Screen: Window-to-Viewport Transformation
The exact formula that maps your drawing's coordinates onto real screen pixels.
Window-to-viewport mapping formulas:
Given window (xw_min,yw_min)-(xw_max,yw_max)
and viewport (xv_min,yv_min)-(xv_max,yv_max):
xv = xv_min + (xw - xw_min) × (xv_max-xv_min)/(xw_max-xw_min)
yv = yv_min + (yw - yw_min) × (yv_max-yv_min)/(yw_max-yw_min)
Worked example: window (0,0)-(10,10), viewport (0,0)-(400,300)
Map world point (5,5):
xv = 0 + (5-0) × (400-0)/(10-0) = 5 × 40 = 200
yv = 0 + (5-0) × (300-0)/(10-0) = 5 × 30 = 150
Screen point: (200, 150) — the exact center of the viewport,
matching (5,5) being the exact center of the window. Makes sense!
sx = (xv_max−xv_min)/(xw_max−xw_min), sy = (yv_max−yv_min)/(yw_max−yw_min) With ww = 10, wh = 10, vw = 400, vh = 300, sx = 40, sy = 30.
The default values give sx = 40 and sy = 30. They differ, so the picture is distorted — set the viewport to 400 × 400 and watch them match.
💡 This exact numerical (given window and viewport rectangles, map a world point to screen coordinates) is a guaranteed question — practice with different window/viewport size ratios, including non-square ones.
What the formula is doing, in three steps
The single line hides a familiar pattern — it is the translate-scale-translate sandwich again.
1. Subtract xw_min → shift the window's corner to the origin
2. Multiply by sx → scale to the viewport's size
3. Add xv_min → shift to the viewport's position
where sx = (xv_max − xv_min) / (xw_max − xw_min)
Recognising it as a composite transformation means there is nothing new to memorise: it is exactly the same three-step recipe used to rotate about an arbitrary point or scale about a fixed point.
The aspect-ratio trap
Look carefully at the worked example above. The window is 10 × 10 — square. The viewport is 400 × 300 — not square. So the two scale factors are:
sx = 400 / 10 = 40
sy = 300 / 10 = 30 ← not equal to sx
The point (5,5) still lands correctly at the viewport's centre, so the example looks fine. But because sx ≠ sy, the mapping stretches x more than y, and every shape is distorted.
A circle of radius 2 in that world does not appear as a circle. It becomes an ellipse with semi-axes 2×40 = 80 and 2×30 = 60 pixels. Squares become rectangles, and a 45° line no longer appears at 45°.
💡 So the exam question "will this mapping distort the image?" is answered by comparing sx and sy, not by looking at the picture. Equal means faithful; unequal means stretched. To preserve shapes, the window and viewport must have the same aspect ratio — here a 400 × 300 viewport would need a window with a 4:3 ratio, such as 10 × 7.5.
Two details that cost marks
Rounding. Screen coordinates are integers, so the computed value must be rounded to an actual pixel. Write the exact value first and round at the end — rounding early accumulates error across a shape's vertices.
The y-flip. If the question's screen coordinates increase downward, the y formula becomes yv = yv_max − (yw − yw_min) × sy instead. Using the un-flipped version there produces a vertically mirrored image, which is a full-marks answer to the wrong question.
Syllabus points
Window-to-viewport mapping (numerical)
Create a free account to tick topics off, take notes as you read, watch the video lessons and get a day-by-day study plan built around your exam date.