Window to Viewport Mapping¶
This notebook introduces the transformation from window coordinates to the viewport coordinates.
Farhad Kamangar 2017
Definitions¶
World Coordinate - Is the space in which the objects are defined.
Screen Coordinate - The screen space in which the image is displayed.
Window - Is the rectangle in the world coordinates defining the region that is to be displayed. This rectangle is also used for 2-dimensional clipping..
Viewport - The rectangular portion of the screen that defines where the image should appear.
Window to Viewport Mapping (Transformation)¶
The window to viewport mapping is the process of mapping a world window in World Coordinates to the Viewport coordinates which is in screen coordinates.
Window and viewport coordinates are usually specified by giving the minimums and maximums of x and y of the opposite corners.
 |
 |
Notes:
- Window coordinates are real numbers while viewport coordinates are integers (because they are pixels on screen).
- The origin of the device (screen) coordinate system is usually at the upper left corner (positive y axis is downward).
- Normalized viewport coordinates are defined as the ratio of the viewport coordinates to the resolution of the monitor.
Mathematics of Mapping Window to Viewport¶
Given:
($X_{wmin}, Y_{wmin}$) and ($X_{wmax}, Y_{wmax}$), the coordinates of the two opposite corners of the window.
($X_{vmin}, Y_{vmin}$) and ($X_{vmax}, Y_{vmax}$), the coordinates of the two opposite corners of the viewport.
2D world coordinates of point $P = \left[ {\matrix{ x \cr y \cr } } \right]$;
Find the coordinates of the corresponding point in the viewport $P' = \left[ {\matrix{ x' \cr y' \cr } } \right]$.
Solution:
- Find the distance between point p and left boundary of window $\large d_x=(x – X_{wmin})$
- Calculate the ratio of the viewport width to the window width $\large s_x = {{(X_{vmax} - X_{vmin})} \over {(X_{wmax} - X_{wmin})}}$
- Scale $d_x$ by $s_x$ to find the distance of point $p’$ from the left boundary of the viewport $\large d’_x= d_x s_x$
- Add $d’_x$ to $X_{vmin}$ to find the screen x coordinate of the point $p’$ : $\large x’= X_{vmin} + d’_x$
In a similar manner, you can find $y’$. But it’s critical to notice that in the screen coordinates, the y-component increases in the downward direction.
Find the distance between point p and top boundary of window $\large d_y=(Y_{wmax}-y)$
Calculate the ratio of the viewport height to the window height $\large s_y = {{(Y_{vmax} - Y_{vmin})} \over {(Y_{wmax} - Y_{wmin})}}$
Scale $d_y$ by $s_y$ to find the distance of point $p’$ from the top boundary of the viewport $\large d’_y= d_y s_y$
Add $d’_y$ to $Y_{vmin}$ to find the screen y coordinate of the point $p’$ : $\large y’= Y_{vmin} + d’_y$
# Assuming a point in the world coordinate system
pwx=5.2
pwy=0.2
# Define window coordinates
xwmin=-1000.6
xwmax=20
ywmin=1.9
ywmax=10
# Define normalized viewport coordinates
nxvmin=.1
nxvmax=.5
nyvmin=.1
nyvmax=.6
# Define screen resolution
screen_width=1920
screen_height=1080
# Find actual viewport coordinates
xvmin=int(nxvmin*screen_width)
xvmax=int(nxvmax*screen_width)
yvmin=int(nyvmin*screen_height)
yvmax=int(nyvmax*screen_height)
# Calculate screen coordinates of point p
sx=(xvmax-xvmin)/(xwmax-xwmin)
psx=xvmin+int(sx*(pwx-xwmin))
sy=(yvmax-yvmin)/(ywmax-ywmin)
psy=yvmin+int(sy*(ywmax-pwy))
print("World coordinates of point p is = ", pwx," , ",pwy, " Screen coordinates of point p is = ",psx," , ",psy)