Upcoming SlideShare
×

# Drawing Tools

1,577
-1

Published on

1 Comment
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• thx

Are you sure you want to  Yes  No
• Be the first to like this

Views
Total Views
1,577
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
0
1
Likes
0
Embeds 0
No embeds

No notes for slide

### Drawing Tools

1. 1. A Lecture by Abdul Ghaffar on Drawing Tools Reference Chapter #3 of text book
2. 2. World, Windows, Viewports <ul><li>World Coordinates </li></ul><ul><ul><ul><li>are the usual certain xy-coordinates used in mathematics based on whatever units are convenient. </li></ul></ul></ul><ul><li>World window </li></ul><ul><ul><ul><li>specifies which rectangle part of world should be drawn, and which clipped away. </li></ul></ul></ul><ul><li>Viewport defined in screen window </li></ul><ul><ul><ul><li>mapping (scaling, shifting) between world window and viewport </li></ul></ul></ul><ul><ul><ul><li>draw in world window; automatically mapped to viewport </li></ul></ul></ul>
3. 3. 3.2.1 Window to viewport mapping <ul><ul><li>World window and viewport </li></ul></ul>
4. 4. 3.2.1 Window to viewport mapping <ul><ul><li>Borders of world window as left, top, right, bottom </li></ul></ul><ul><ul><li>Likewise Viewport is described within the coordinate system of the screen measured in pixel. </li></ul></ul>
5. 5. 3.2.1 Window to viewport mapping <ul><ul><li>World window can be of any size and shape </li></ul></ul><ul><ul><li>Viewport can be of any size within the screen coordinate </li></ul></ul><ul><ul><li>WW and VP may have different aspect ratios, which will cause distortion in the picture. </li></ul></ul>
6. 6. 3.2.1 Window to viewport mapping <ul><ul><li>Window to viewport mapping </li></ul></ul><ul><ul><ul><li>If x is 40% of the way over from the left edge of the window then sx is 40% of the way over from the left edge of the viewport </li></ul></ul></ul><ul><ul><ul><li>If y is some fraction f of the height of the window from the bottom, sy must be the same fraction f up from the bottom of the viewport. </li></ul></ul></ul><ul><ul><ul><li>This proportionality forces the mapping to have the linear form </li></ul></ul></ul><ul><ul><ul><ul><ul><li>sx = Ax + C </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>sy = Bx + D </li></ul></ul></ul></ul></ul><ul><ul><ul><li>The only task is to calculate the four constant A, B, C, D </li></ul></ul></ul>
7. 7. 3.2.1 Window to viewport mapping <ul><ul><li>From figure </li></ul></ul><ul><ul><li> and similarly </li></ul></ul>(x,y) W.t W.b W.l W.r (sx,sy) V.t V.b V.l V.r W V x sx y sy
8. 8. Derivation for sx: <ul><ul><li>Repeat same process for sy </li></ul></ul>
9. 9. 3.2.1 Window to viewport mapping <ul><ul><li>After repeating same process for sy finally we get </li></ul></ul>
10. 10. Doing it in OpenGL void glOrtho2D (GLdouble left, GLdouble right, GLdouble bottom, GLdouble top) void glViewport (GLlint x, GLlint y, GLlint Width, GLlint Height)
11. 11. Example:
12. 12. 3.2.2 Setting the window and viewport automatically <ul><ul><li>Find the extant </li></ul></ul>
13. 13. 3.2.2 Setting the window and viewport automatically <ul><ul><li>Find the aspect ratio R </li></ul></ul><ul><ul><ul><li>If R > W / H then setViewport (0, W, 0, W / R); </li></ul></ul></ul><ul><ul><ul><li>If R < W / H then setViewport ( 0. H * R, 0, H ); </li></ul></ul></ul>
14. 14. Self study and exercises: <ul><ul><ul><li>Example 3.2.1 , window and viewport </li></ul></ul></ul><ul><ul><ul><li>exercise 3.2.1 , building the mapping </li></ul></ul></ul><ul><ul><ul><li>example 3.2.2 , plotting sine function </li></ul></ul></ul><ul><ul><ul><li>Ex. 3.2.3 Drawing polylines from a file </li></ul></ul></ul><ul><ul><ul><li>Ex. 3.2.4 Tiling a window with a motif </li></ul></ul></ul><ul><ul><ul><li>Ex. 3.2.5 Clipping, zooming and roaming </li></ul></ul></ul><ul><ul><ul><li>Ex. 3.2.7 A tall window </li></ul></ul></ul><ul><ul><ul><li>Ex 3.2.8 A short window </li></ul></ul></ul>
15. 15. Chapter 3: Windows, viewports <ul><li>3.3 Clipping lines </li></ul><ul><ul><li>Some possible situations </li></ul></ul><ul><ul><ul><li>Entire line lies within the window (trivial accept) </li></ul></ul></ul><ul><ul><ul><li>Entire line lies outside the window (trivial reject) </li></ul></ul></ul><ul><ul><ul><li>One point is inside and one is outside </li></ul></ul></ul><ul><ul><ul><li>Both points are outside of the window and a segment lies inside the window. </li></ul></ul></ul>
16. 16. Chapter 3: Windows, viewports <ul><li>3.3.2 Cohen-Sutherland clipping </li></ul><ul><ul><li>Checks for trivial accept or trivial reject </li></ul></ul><ul><ul><ul><li>Construct Inside-outside code word for </li></ul></ul></ul><ul><ul><ul><li>each endpoint </li></ul></ul></ul><ul><ul><ul><li>Trivial accept: Both code words are FFFF </li></ul></ul></ul><ul><ul><ul><li>Trivial reject: Code words have T in same position </li></ul></ul></ul>
17. 17. 3.3.2 Cohen-Sutherland clipping <ul><ul><li>Algorithm </li></ul></ul><ul><ul><ul><li>do { </li></ul></ul></ul><ul><ul><ul><li>form the code word for p1 and p2 </li></ul></ul></ul><ul><ul><ul><li>if ( trivial accept ) return 1; </li></ul></ul></ul><ul><ul><ul><li>if ( trivial reject ) return 0; </li></ul></ul></ul><ul><ul><ul><li>chop the line at the “next” window border; discard the “outside” part; </li></ul></ul></ul><ul><ul><ul><li>} while (1); </li></ul></ul></ul>
18. 18. 3.3.2 Cohen-Sutherland clipping <ul><li>Chopping (no trivial accept/reject) </li></ul><ul><li>Example: if a point is to the right of the window </li></ul><ul><ul><li>Goal : Calculate the location of point A I.e A.x and A.y </li></ul></ul><ul><ul><li>A.x = W.right </li></ul></ul><ul><ul><li>A.y ? </li></ul></ul><ul><ul><ul><li>A.y = p1.y + d </li></ul></ul></ul><ul><ul><ul><li>d = ? </li></ul></ul></ul><ul><li>From figure </li></ul><ul><li>e = W.right – P 1 .x </li></ul><ul><li>delx = P 2 .x – P 1 .x </li></ul><ul><li>dely = P 2 .y – P 1 .y </li></ul><ul><li>To find d we set a relation as </li></ul><ul><li>Therefore new P1 is </li></ul><ul><ul><li>p1,x = W.right </li></ul></ul><ul><ul><li>p1.y = p1.y + d </li></ul></ul>
19. 19. 3.3.2 Cohen-Sutherland clipping <ul><li>Similarly </li></ul><ul><li>if the point is to the left of the window then </li></ul><ul><li> e = W.left – P 1 .x and d = e * m </li></ul><ul><li> p1.x = W.left and p1.y = p1.y + d </li></ul><ul><li>if the point is below the bottom of the window then </li></ul><ul><li>e = W.bottom – P 1 .y and d = e / m </li></ul><ul><ul><li>p1.y = W.bottom and p1.x = p1.y + d </li></ul></ul><ul><li>if the point is below the top of the window then </li></ul><ul><li>e = W.top – P 1 .y and d = e / m </li></ul><ul><ul><li>p1.y = W.top and p1.x = p1.y + d </li></ul></ul>
20. 20. 3.3.2 Cohen-Sutherland clipping <ul><ul><li>Example : A segment that requires four clips </li></ul></ul>
21. 21. 3.3.2 Cohen-Sutherland clipping (Complete Algorithm:)
22. 22. Chapter 3: Windows, viewports <ul><li>The Canvas Class: Self study. </li></ul><ul><ul><li>3.4 Developing the canvas class </li></ul></ul><ul><ul><ul><li>Page 101 Structures , Point2 and Rect </li></ul></ul></ul><ul><ul><ul><li>Page 102 Canvas class declaration </li></ul></ul></ul><ul><ul><ul><li>Page 103 class constructor </li></ul></ul></ul><ul><ul><ul><li>Page 104 MoveTo, LineTo, setwndow </li></ul></ul></ul><ul><ul><ul><li>Page 105 Move and line relative </li></ul></ul></ul><ul><ul><ul><li>Page 107 turnto, turn, forward </li></ul></ul></ul>
23. 23. Chapter 3: Windows, viewports <ul><ul><ul><li>Page 106 Example 3.5.3 Polyspiral </li></ul></ul></ul><ul><ul><ul><ul><li>for ( …..) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>{ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>forward(length, 1); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>turn(angle); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>length+=increment) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul>
24. 24. 3.6 Figures based on regular polygons <ul><ul><li>3.6.1 Regular Polygons </li></ul></ul><ul><ul><ul><li>A polygon is Regular if it is simple, if all sides have equal length, and adjacent sides meet at equal interior angles. E.g n-gon. </li></ul></ul></ul>
25. 25. 3.6.1 n-gon ( function )
26. 26. 3.6 Figures based on regular polygons <ul><ul><li>Example 3.6.2 rosette (p.112) </li></ul></ul><ul><ul><li>3.7 Drawing circles and arcs </li></ul></ul>
27. 27. 3.7.1 Drawing arcs
28. 28. Chapter 3: Windows, viewports <ul><li>3.8 Parametric forms of curves </li></ul><ul><ul><li>Implicit : Point on line if F(x,y) = 0 </li></ul></ul><ul><ul><ul><li>Line f ( x, y ) = ( y – y1 ) ( x2 - x1 ) - ( x - x1 ) ( y2 - y1 ) </li></ul></ul></ul><ul><ul><ul><li>Circle f ( x, y ) = x 2 + y 2 –R 2 </li></ul></ul></ul><ul><ul><li>Parametric: Position at time t is given by x(t), y(t) </li></ul></ul><ul><ul><ul><li>Line </li></ul></ul></ul><ul><ul><ul><ul><li>x ( t ) = A x + ( B x – A x ) t </li></ul></ul></ul></ul><ul><ul><ul><ul><li>y ( t ) = A y + ( B y – A y ) t </li></ul></ul></ul></ul><ul><ul><ul><li>Ellipse </li></ul></ul></ul><ul><ul><ul><ul><li>x ( t ) = W cos( t ) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>y ( t ) = H sine( t ) </li></ul></ul></ul></ul><ul><ul><ul><li>Circle </li></ul></ul></ul><ul><ul><ul><ul><li>x ( t ) = R cos( t ) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>y ( t ) = R sine( t ) </li></ul></ul></ul></ul>
29. 29. Chapter 3: Windows, viewports <ul><ul><li>Drawing parametric curves: </li></ul></ul>
30. 30. Chapter 3: Windows, viewports <ul><ul><li>3.8.3 Super-ellipses </li></ul></ul><ul><ul><ul><li>Implicit : (x/W) n + (y/H) n =1 </li></ul></ul></ul><ul><ul><ul><li>Parametric: </li></ul></ul></ul><ul><ul><ul><ul><li>x(t) = W cos(t) |cos(t) 2/n-1 | </li></ul></ul></ul></ul><ul><ul><ul><ul><li>y(t) = H sin(t) |sin(t) 2/n-1 | </li></ul></ul></ul></ul>Super Ellipse: n=1 -> Square n<1 -a Inward n>1 -> outward
31. 31. Chapter 3: Windows, viewports <ul><ul><li>3.8.4 Polar Coordinate Shapes </li></ul></ul><ul><ul><ul><li>x(t) = r(t) cos (  (t)) </li></ul></ul></ul><ul><ul><ul><li>x(t) = r(t) cos (  (t)) </li></ul></ul></ul><ul><ul><ul><li>Given point (r,  ), </li></ul></ul></ul><ul><ul><ul><li>Cartesian point (x,y) is given by x = f (  ) cos (  ) y = f (  ) sin (  ) </li></ul></ul></ul><ul><ul><li>Some Example of f(  ) </li></ul></ul><ul><ul><ul><li>Cardioids K( 1 + cos(  )) </li></ul></ul></ul><ul><ul><ul><li>Rose K cos (n  ) </li></ul></ul></ul><ul><ul><ul><li>Spiral K  </li></ul></ul></ul>