Theory about applications - [TA6]

Introduction

Window to Viewport Transformation is the process of transforming a 2D world-coordinate objects to device coordinates. Objects inside the world or clipping window are mapped to the viewport which is the area on the screen where world coordinates are mapped to be displayed.

The transformation step by step

• Step 1 - Translation of the window towards the Origin:
  If we shift the window towards the origin, the upper left, and the lower-left corner of the window will be negative (-). The translation factor also should be negative (-).
• Step 2 - Resize the window to viewport size:
  To Convert the size of the window into the size of the viewport, we will use the following formulas: $$ S_x = \frac { X_{V_{max}} - X_{V{min}} } { X_{W_{max}} - X_{W{min}} } $$ $$ S_y = \frac { Y_{V_{max}} - Y_{V{min}} } { Y_{W_{max}} - Y_{W{min}} } $$
• Step 3 - Translation of window (Position of window and viewport must be same): If the lower-left corner of viewport is (0, 0), then the window lower-left corner is already shifted on origin after following step 1. If the lower-left corner is not equal to (0, 0), then the translation factor should be positive (+).

  

Considering the image above we have:

• World coordinate: It is the Cartesian coordinate w.r.t which we define the diagram, like $X_{W_{min}}$, $X_{W_{max}}$, $Y_{W_{min}}$, $Y_{W_{max}}$
• Device Coordinate: It is the screen coordinate where the objects is to be displayed, like $X_{V_{min}}$, $X_{V_{max}}$, $Y_{V_{min}}$, $Y_{V_{max}}$
• Window: It is the area on world coordinate selected for display.
• ViewPort: It is the area on device coordinate where graphics is to be displayed.

It may be possible that the size of the Viewport is much smaller or greater than the Window. In these cases, we have to increase or decrease the size of the Window according to the Viewport and for this, we need some mathematical calculations.
$(X_w, Y_w)$ as a point on Window.
$(X_v, Y_v)$ corresponding point on Viewport.
To calculate the point $(X_v, Y_v)$:

$$ PointOnWindow = \Biggl( {\frac {X_W - X_{W_{min}}} {X_{W_{max}} - X_{W_{min}}} }, {\frac {Y_W - Y_{W_{min}}} {Y_{W_{max}} - Y_{W_{min}}} } \Biggl) $$

$$ PointOnViewport = \Biggl( {\frac {X_V - X_{V_{min}}} {X_{V_{max}} - X_{V_{min}}} }, {\frac {Y_V - Y_{V_{min}}} {Y_{V_{max}} - Y_{V_{min}}} } \Biggl) $$

Now the relative position of the object in Window and Viewport are same.
For x coordinates:

$$ {\frac {X_W - X_{W_{min}}} {X_{W_{max}} - X_{W_{min}}} } = {\frac {X_V - X_{V_{min}}} {X_{V_{max}} - X_{V_{min}}} } $$

For y coordinates:

$$ {\frac {Y_W - Y_{W_{min}}} {Y_{W_{max}} - Y_{W_{min}}} } = {\frac {Y_V - Y_{V_{min}}} {Y_{V_{max}} - Y_{V_{min}}} } $$

So, after calculating for x and y coordinate, we get:

$$ X_v = X_{V_{min}} + (X_W−X_{W_{min}}) \cdot S_x \\ Y_v = Y_{V_{min}} + (Y_W−Y_{W_{min}}) \cdot S_y $$

Where, $S_x$ is scaling factor of $x$ coordinates and $S_y$ is scaling factor of $y$ coordinates, as expressed before.
The following is an implementation of this transformation in C#:

using System;

class GFG
{

    // Function for window to viewport transformation
    static void WindowtoViewport(int x_w, int y_w,
                                int x_wmax, int y_wmax,
                                int x_wmin, int y_wmin,
                                int x_vmax, int y_vmax,
                                int x_vmin, int y_vmin)
    {
        // point on viewport
        int x_v, y_v;

        // scaling factors for x coordinate
        // and y coordinate
        float sx, sy;

        // calculatng Sx and Sy
        sx = (float)(x_vmax - x_vmin) /
                    (x_wmax - x_wmin);
        sy = (float)(y_vmax - y_vmin) /
                    (y_wmax - y_wmin);

        // calculating the point on viewport
        x_v = (int) (x_vmin +
            (float)((x_w - x_wmin) * sx));
        y_v = (int) (y_vmin +
            (float)((y_w - y_wmin) * sy));

        Console.Write("The point on viewport: " +
                    "({0}, {1} )\n ", x_v, y_v);
    }

    // Driver Code
    public static void Main(String[] args)
    {

        // boundary values for window
        int x_wmax = 80, y_wmax = 80,
            x_wmin = 20, y_wmin = 40;

        // boundary values for viewport
        int x_vmax = 60, y_vmax = 60,
            x_vmin = 30, y_vmin = 40;

        // point on window
        int x_w = 30, y_w = 80;

        WindowtoViewport(30, 80, 80, 80, 20,
                        40, 60, 60, 30, 40);
    }

}

Sources

• https://www.geeksforgeeks.org/window-to-viewport-transformation-in-computer-graphics-with-implementation/