Chapter #03 More Drawing Tools 1

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

Window and Viewport 3

Window and viewport 4 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

Window and Viewport 5

Important Terms 6 The value of x: 0 screenwidth-1 The value of y: 0 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

Important Terms 7 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

Important Terms 8 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

The mapping from the Window to the Viewport 9 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

Proportionality in the mapping from ‘x’ to ‘sx’ 10 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 x sy sx W.b W.l V.b V.l V.t W.t V.r W.r window Graphics window viewport

How to determine A, B, C & D 11 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 W.lW.r V.lV.r x sx

How to determine A, B, C & D 12 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

Practice Problems 13 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).

Properties of mapping 14 The following properties must be checked carefully: 1. If x is at the window’s left edge (x = W.l), then sx is at the viewport’s left edge (sx = V.l) 2. If x is at the window’s right edge, then sx is at the viewport’s right edge 3. if x is a fraction ‘f ‘of the way across the window, then sx is a fraction ‘f’ of the way across the viewport 4. 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

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.

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.

Using OpenGL for the transformation 17 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)

Making the code 18 //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

Application:Tiling with Viewports

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.

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"); }

Using OpenGL for the transformation 22 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();

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

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).

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

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

Zooming 27 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(); }

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?

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.

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?

Automatic Aspect Ratio Preservation for Viewports

Resizing the Window 32 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

Making the matched viewport Prepared by Engr Nabiha Faisal 33 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) }

Clipping Lines 34 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

Clipping Algorithm 35 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 D C B E Window

The Cohen-Sutherland Clipping Algorithm 36 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”

The Cohen-Sutherland Clipping Algorithm 37 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

The Cohen-Sutherland Line Clipping Algorithm 38 How to clip lines to fit in windows? – easy to tell if whole line falls w/in window – harder to tell what part falls inside Consider a straight line And window

Cohen SutherLand 39 Basic Idea: First, do easy test – completely inside or outside the box? If no, we need a more complex test Note: we will also need to figure out how line intersects the box

Cohen SutherLand 40 Perform trivial accept and reject Assign each end point a location code Perform bitwise logical operations on a line`s location codes Accept or reject based on result Frequently provides no information – Then perform more complex line intersection

Cohen Sutherland 41 The Easy Test: Compute 4-bit code based on endpoints P 1 and P 2

Cohen Suther Land clipping algorithm 42 Line is completely visible iff both code values of endpoints are 0, i.e. If line segments are completely outside the window, then

Cohen SutherLand clipping algorithm 43 Otherwise, we clip the lines: We know that there is a bit flip, assume its (x 0,x 1 ) Which bit? Try all! – suppose it`s bit 4 – Then x 0 < WL and we know that x 1  WL – We need to find the point: (x c,y c )

Cohen Suther Land Clipping algorithm 44 Solving for y c gives Clearly xc=WL Using Similar triangles

Cohen SutherLand clipping algorithm 45 Replace (x 0,y 0 ) with (x c,y c ) Re-compute codes Continue until all bit flips (clip lines) are processed, i.e. all points are inside the clip window