1. Chapter #03
More Drawing Tools

2. Viewport Do not have use the entire window for the
image: glViewport(x,y,w,h)
Values in pixels (screen coordinates)

3. Window and Viewport

4. Window and viewport The world window is a rectangle.
•The viewport is a rectangle.
Both are not necessarily the same size or have the same aspect ratio.
Coordinates need to be stretched, shrunk and moved to make them fit

5. Window and Viewport

6. Important Terms The value of x: 0 screenwidth-1
The value of y: screenheight -1
Both the values of ‘x’ & ‘y’ are always +ve
The space in which objects are described is called world co- ordinates which are basic cartesian x-y coordinates used in mathematics
World window is a part of the “world” to be drawn
Viewport is a part of screen that captures/displays the part of world in the world window

7. Important Terms
At times distortion is incorporated to a world window image while displaying in a viewport either by stretch, skew, zoom etc.
Mapping or transformation called window-to-viewport mapping: for exact representation of world image into the viewport
This mapping is based on a formula that produces a point (sx, sy) in the screen window coordinates for any given point (x, y ) in the world
En point

8. Important Terms We want the mapping to be proportional
Proportionality, forces the mappings to have linear form
sx = Ax + C …………(i)
sy = By+D …………..(ii)
For A, B, C & D being constants. A &B being scaled by ’x’ &’y’ coordinates. C & D being the shift or translate them

9. The mapping from the Window to the Viewport
The world window is described by its left, top, right & bottom borders as W.l, W.t, W.r & W.b respectively
The viewport is described likewise in the coordinate system of the screen window by V.l, V.t, V.r & V.b measured in pixels

10. Proportionality in the mapping from ‘x’ to ‘sx’
By proportional mapping we mean to say if ‘x’ is say 20% of the way over the right edge of the window, the ‘sx’ is also 20% of the way over the right edge of the viewport y sy
V.l
V.r
W.t
V.t
W.l
W.r x
viewport
V.b sx
W.b
Graphics window
window

11. How to determine A, B, C & D First for ‘x’:
Fraction on screen:= sx - V.l
Total of screen: = V.r – V.l
Fraction of world: = x – W.l
Total of world: = W.r – W.l x sx
V.l
V.r
W.l
W.r

12. How to determine A, B, C & D Now, Or From eq (i) we have and
Similarly, since sy = By + D
Therefore,
This mapping can be used with any point (x, y) inside or outside window. Just that we map points inside the window in the viewport
s.x – V.l = x – W.l
V.r - V.l W.r – W.l
s.x = V.r – V.l x + V.l – V.r – V.l W.l
W.r – W.l W.r – W.l
A = V.r - V.l
W.r – W.l
C = V.l – A W.l
B = V.t – V.b & D = V.b - B W.b
W.t – W.b

13. Practice Problems
Consider the window and viewport as explained. The window has (W.l, W.r, W.b, W,t) = (0, 2.0, 0, 1.0), and the viewport has (V.l, V.r, V.b, V.t) = (40, 400, 60, 300). What is the window-to-viewport mapping function.
Find the values of A, B, C and D for the case of a world window of (-10.0, 10.0, -6.0, 6.0) and a viewport of (0, 600, 0, 400).

14. Properties of mapping
The following properties must be checked carefully:
If x is at the window’s left edge (x = W.l), then sx is at the viewport’s left edge (sx = V.l)
If x is at the window’s right edge, then sx is at the viewport’s right edge
if x is a fraction ‘f ‘of the way across the window, then sx is a fraction ‘f’ of the way across the viewport
If x is outside the window to the left (x < W.l), then sx is outside the viewport to the left (sx < V.l), and analogously if x is outside to the right

15. GL Functions To Create the Map
World window: void gluOrtho2D(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top);
Viewport: void glViewport(GLint x, GLint y, GLint width, GLint height);
This sets the lower left corner of the viewport, along with its width and height.

16. GL Functions To Create the Map (2)
Because OpenGL uses matrices to set up all its transformations, the call to gluOrtho2D() must be preceded by two setup functions: glMatrixMode(GL_PROJECTION);
and glLoadIdentity();
setWindow() and setViewport() are useful code “wrappers”.
They simplify the process of creating the window and viewport.

17. Using OpenGL for the transformation
Window-to-viewport mapping is very easy in OpenGL
It clips off the region in its transformation
Commands used are:
glVertex2*(); //gives vertex/parameter for transformation
gluOrtho2D(); //2D world transformation
glViewPort(); //viewport setting function
void gluOrtho2D(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top); //prototype of the above functions
**setting window to have lower left corner as (left,bottom) & an upper right (right, top)

18. Making the code //set window//
void SetWindow(float left, float right, float bottom, float top) {
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(left, right, bottom, top); }
//set viewport//
void SetViewPort(int left, int right, int bottom, int top)
glViewport(left, bottom, right-left, top-bottom);
** float & int data types used above are automatically type-casted into ‘Gldouble’ & ‘Glint’ respectively

19. Application:Tiling with Viewports

20. Applications (continued)
Tiling A was set up by the following code:
setWindow(0, 640.0, 0, 440.0); // set a fixed window
for (int i = 0; i < 5; i++) // for each column
for (int j = 0; j < 5; j++){ // for each row
{glViewport (i*64, j*44,64, 44); // set the next viewport
drawPolylineFile("dino.dat"); // draw it again }
Tiling B requires more effort: you can only turn a window upside down, not a viewport.

21. Applications (continued)
Code for Tiling B
for (int i = 0; i < 5; i++) // for each column
for (int j = 0; j < 5; j++){ // for each row
if ((i + j) % 2 == 0){
setWindow(0.0, 640.0, 0.0, 440.0);
} else {
setWindow(0.0, 640.0, 440.0, 0.0); // upside-down }
glViewport (i*64, j*44,64, 44); // no distortion
drawPolylineFile("dino.dat"); }

22. Using OpenGL for the transformation
void glViewPort(GLint x, GLint y, GLint width, GLint height);
**With lower left corner as (x, y) & upper right corner as
(x + width, y + height) ;
By default the viewport is the entire screen thus
lower left (0, 0) & upper right (w,h)
where, w width of screen
h height of screen
Since transformation requires matrices, therefore the gluOrtho2D() is proceeded by:
glMatrixMode(GL_PROJECTION); &
glLoadIdentity();

23. Application: Clip, Zoom and Pan
Clipping refers to viewing only the parts of an image that are in the window.

24. Application (continued)
The figure is a collection of concentric hexagons of various sizes, each rotated slightly with respect to the previous one. It is drawn by a function called hexSwirl ();
The figure showed 2 choices of world windows.
We can also use world windows for zooming and roaming (panning).

25. Zooming and Panning
To zoom, we pick a concentric set of windows of decreasing size and display them from outside in.

26. Zooming and Roaming (2)
The animation of the zoom will probably not be very smooth. We want to look at one drawing while the next one is drawn, and then switch to the new drawing.
We use glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB); //gives us 2 buffers, one to look at and one to draw in
We add glutSwapBuffers(); after the call to hexSwirl (); // change to the new drawing

27. Zooming Float cx=0.3,cy=0.2//center of the window
Float H,W=1.2,aspect=0.7;
//set the viewport
For(int frame=0;frame<numframes;frame++) {
//Clears the screen
W*=aspect
H=W*aspect;
setWindow(cx-W,cx+W,cy-H,cy+H)//set the next window
hexSwirl(); }
Prepared by Engr Nabiha Faisal

28. Roaming (Panning)
To roam, or pan, we move a viewport through various portions of the world. This is easily accomplished by translating the window to a new position.
What sequence of windows would you want in order to roam through the image?

29. Resizing the Screen Window
Users are free to alter the size and aspect ratio of the screen window.
You may want GL to handle this event so that your drawing does not get distorted.
Register the reshape function:
glutReshapeFunc (myReshape);
Void myReshape (GLsizei W, GLsizei H); collects the new width and height for the window.

30. Preserving Aspect Ratio
We want the largest viewport which preserves the aspect ratio R of the world window.
Suppose the screen window has width W and height H:
If R > W/H, the viewport should be width W and height W/R
set Viewport(0,W,0,W/R)
If R < W/H, the viewport should be width H*R and height H
set Viewport(0,H*R,0,H)
What happens if R = W/H?

31. Automatic Aspect Ratio Preservation for Viewports

32. Resizing the Window
void myReshape(GLsizei W, GLsizei H) When this function is executed the system automatically passes it the new width and height of the screen window
Prepared by Engr Nabiha Faisal

33. Making the matched viewport
void myReshape(GLsizei W, GLsizei H) {
If(R>W/H)
setViewport(0,W,0,W/R)
If(R<W/H)
setViewport(0,H*R,0,H) }
Prepared by Engr Nabiha Faisal

34. Clipping Lines
A fundamental task of graphics that keeps parts of objects outside a given region to be drawn
In an OpenGL environment, each object is automatically clipped to the world window with the use of particular algorithms

35. Clipping Algorithm
If the entire line lies within the window (CD), the function returns a value of 1
If the entire line lies outside the window (AB), the function returns a value of 0
If one endpoint is inside the window and the other is outside (ED), the function clips the portion of the segment that lies outside the window & returns the value 1
If both the endpoints are outside the window, but portion of the segment passes through (AE), the function clips both ends & returns the value 1 A B C E D
Window

36. The Cohen-Sutherland Clipping Algorithm
Objective: To develop a routine for clipping
ClipSegment(p1, p2, window); //takes two 2D points & an aligned rectangle & clips the line segment defined by the endpoints p1 & p2
If some part of the line is present after clipping then 1 is returned else no part of the line exists after clipping to return 0
The function ClipSegment() performs one of the function mentioned priorly
the algo quickly detects & dispenses with 2 common cases, called “trivial accept” & “trivial reject”

37. The Cohen-Sutherland Clipping Algorithm
When the whole object is present in the window it means “trivially accepted” & the window is large enough to hold the object
When the whole object is NOT in the window it is “trivially rejected” , showing that the window is small with dense pictures
Testing a trivial accept or reject: to detect such a situation quickly, an “inside-outside codeword” is computed for each endpoint of a segment

38. The Cohen-Sutherland Clipping Algorithm
Is P to the left of W?
Window
Is P below W? T F
Is P above W?
Is P to the right of W?

39. Clipping (4)
The diagram below shows Boolean codes for the 9 possible regions the endpoint lies in (left, above, below, right).

40. Clipping (5)
A line consists of 2 endpoints (vertices), P1 and P2. If we do not have a trivial case, we must alter the vertices to the points where the line intersects the window boundaries (replace P1 by A).

41. Clipping (6) In the diagram, d/dely = e/delx (similar triangles).
Obviously, A.x = W.r.
Also, delx = p1.x – p2.x, dely = p1.y – p2.y and e = p1.x – W.r.
So A.y = p1.y – d.

42. A Line Needing 4 Clips
The equation of the line is y = x * (p1.y – p2.y)/(p1.x – p2.x) + p2.y = mx + p2.y.
The intersection B with the top window boundary is at x where y = W.t, or x = (W.t – p2.y)/m.
The intersection A with the right boundary is y where x = W.r, or y = m*W.r + p2.y.

43. Clipping Pseudocode
Complete pseudocode for the Cohen-Sutherland Line Clipper is shown in Fig