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

More Related Content

What's hot (20)

PPTX
Window to viewport transformation&amp;matrix representation of homogeneous co...
Mani Kanth
 
PPTX
2D viewing & clipping
MdAlAmin187
 
PPTX
Clipping 22
Lokesh Reddy
 
PPTX
Circle & curve clipping algorithm
Mohamed El-Serngawy
 
PPTX
Cohen sutherland line clipping
Mani Kanth
 
PPTX
line clipping
Saurabh Soni
 
PPTX
Clipping in Computer Graphics
Laxman Puri
 
PPTX
Lect 5 2d clipping
majicyoung
 
PPT
Cohen and Sutherland Algorithm for 7-8 marks
Rehan Khan
 
PPTX
Cohen sutherland line clipping algorithm
Tawfiq Ahmed
 
PPT
Lecture filling algorithms
avelraj
 
PDF
Lect7 viewing in2d
BCET
 
PPT
Clipping
Mohd Arif
 
PPTX
Computer Graphic - Clipping
2013901097
 
PPTX
Line clipping algorithm (Detailed)
Aamir Sohail
 
PPTX
Curve clipping
Mohamed El-Serngawy
 
PPT
06 clipping
Ketan Jani
 
PPTX
Polygon clipping with sutherland hodgeman algorithm and scan line fill algorithm
Mani Kanth
 
PPT
Clipping
Udayan Gupta
 
PPT
2.5 graph dfs
Krish_ver2
 
Window to viewport transformation&amp;matrix representation of homogeneous co...
Mani Kanth
 
2D viewing & clipping
MdAlAmin187
 
Clipping 22
Lokesh Reddy
 
Circle & curve clipping algorithm
Mohamed El-Serngawy
 
Cohen sutherland line clipping
Mani Kanth
 
line clipping
Saurabh Soni
 
Clipping in Computer Graphics
Laxman Puri
 
Lect 5 2d clipping
majicyoung
 
Cohen and Sutherland Algorithm for 7-8 marks
Rehan Khan
 
Cohen sutherland line clipping algorithm
Tawfiq Ahmed
 
Lecture filling algorithms
avelraj
 
Lect7 viewing in2d
BCET
 
Clipping
Mohd Arif
 
Computer Graphic - Clipping
2013901097
 
Line clipping algorithm (Detailed)
Aamir Sohail
 
Curve clipping
Mohamed El-Serngawy
 
06 clipping
Ketan Jani
 
Polygon clipping with sutherland hodgeman algorithm and scan line fill algorithm
Mani Kanth
 
Clipping
Udayan Gupta
 
2.5 graph dfs
Krish_ver2
 

Similar to Drawing Tools (20)

PPT
CS 354 More Graphics Pipeline
Mark Kilgard
 
PPT
CS 354 Transformation, Clipping, and Culling
Mark Kilgard
 
PPTX
CHAPTER - 4 for software engineering (1).pptx
lcon22
 
PDF
Complex Integral
HalmatJalalHassan
 
PPTX
20101017 program analysis_for_security_livshits_lecture02_compilers
Computer Science Club
 
PPTX
IGCSE_Functions.pptx fffffffffffffffffffffffffffffffffffffffffffffffffffffff...
ssuser1e25bf1
 
PDF
6. Perspective Projection .pdf
Yatru Harsha Hiski
 
PDF
raster algorithm.pdf
Mattupallipardhu
 
PDF
3.pdf
Dhiraj Bhaskar
 
DOC
algorithm Unit 3
Monika Choudhery
 
DOCX
Theoryofcomp science
Raghu nath
 
PDF
Visual surface detection computer graphics
530BYManoj
 
PPTX
Mrongraphs acm-sig-2 (1)
Nima Sarshar
 
PDF
CD504 CGM_Lab Manual_004e08d3838702ed11fc6d03cc82f7be.pdf
RajJain516913
 
PDF
BS LAB Manual (1).pdf
ssuser476810
 
PDF
Goldie chapter 4 function
Sarah Sue Calbio
 
PPTX
Clipping
nehrurevathy
 
PPT
Lesson 4B - Intro to Quadratics.ppt
MarjoCeloso1
 
PPT
Windows and viewport
Technology & Education
 
PDF
Lecture03 p1
aa11bb11
 
CS 354 More Graphics Pipeline
Mark Kilgard
 
CS 354 Transformation, Clipping, and Culling
Mark Kilgard
 
CHAPTER - 4 for software engineering (1).pptx
lcon22
 
Complex Integral
HalmatJalalHassan
 
20101017 program analysis_for_security_livshits_lecture02_compilers
Computer Science Club
 
IGCSE_Functions.pptx fffffffffffffffffffffffffffffffffffffffffffffffffffffff...
ssuser1e25bf1
 
6. Perspective Projection .pdf
Yatru Harsha Hiski
 
raster algorithm.pdf
Mattupallipardhu
 
algorithm Unit 3
Monika Choudhery
 
Theoryofcomp science
Raghu nath
 
Visual surface detection computer graphics
530BYManoj
 
Mrongraphs acm-sig-2 (1)
Nima Sarshar
 
CD504 CGM_Lab Manual_004e08d3838702ed11fc6d03cc82f7be.pdf
RajJain516913
 
BS LAB Manual (1).pdf
ssuser476810
 
Goldie chapter 4 function
Sarah Sue Calbio
 
Clipping
nehrurevathy
 
Lesson 4B - Intro to Quadratics.ppt
MarjoCeloso1
 
Windows and viewport
Technology & Education
 
Lecture03 p1
aa11bb11
 
Ad

More from Ghaffar Khan (20)

PPT
World is beautiful ... ...
Ghaffar Khan
 
PPTX
My Presentation On Ajax
Ghaffar Khan
 
PPT
Sorting
Ghaffar Khan
 
PPT
How A Computer Works
Ghaffar Khan
 
PPT
For Loop
Ghaffar Khan
 
PPT
Exponential and Logarthmic funtions
Ghaffar Khan
 
PPT
Exponential and Logarthmic funtions (1)
Ghaffar Khan
 
PPT
Functions
Ghaffar Khan
 
PPT
Quadratic And Polinomial Function
Ghaffar Khan
 
PPT
Quadratic And Polinomial Function
Ghaffar Khan
 
PPT
Exponentioal And Logarthmic Functions
Ghaffar Khan
 
PPT
Internet Protocol
Ghaffar Khan
 
PPT
Introduction to Computer Networks
Ghaffar Khan
 
PPT
Network Layer
Ghaffar Khan
 
PPT
Control Structures
Ghaffar Khan
 
PPT
Input And Output
Ghaffar Khan
 
PPT
Surfaces
Ghaffar Khan
 
PPT
Vector Tools
Ghaffar Khan
 
PPT
Drawing Figures
Ghaffar Khan
 
PPT
Computer Graphics Introduction
Ghaffar Khan
 
World is beautiful ... ...
Ghaffar Khan
 
My Presentation On Ajax
Ghaffar Khan
 
Sorting
Ghaffar Khan
 
How A Computer Works
Ghaffar Khan
 
For Loop
Ghaffar Khan
 
Exponential and Logarthmic funtions
Ghaffar Khan
 
Exponential and Logarthmic funtions (1)
Ghaffar Khan
 
Functions
Ghaffar Khan
 
Quadratic And Polinomial Function
Ghaffar Khan
 
Quadratic And Polinomial Function
Ghaffar Khan
 
Exponentioal And Logarthmic Functions
Ghaffar Khan
 
Internet Protocol
Ghaffar Khan
 
Introduction to Computer Networks
Ghaffar Khan
 
Network Layer
Ghaffar Khan
 
Control Structures
Ghaffar Khan
 
Input And Output
Ghaffar Khan
 
Surfaces
Ghaffar Khan
 
Vector Tools
Ghaffar Khan
 
Drawing Figures
Ghaffar Khan
 
Computer Graphics Introduction
Ghaffar Khan
 
Ad

Recently uploaded (20)

PDF
Women in Automation Presents: Reinventing Yourself — Bold Career Pivots That ...
DianaGray10
 
PPTX
Building and Operating a Private Cloud with CloudStack and LINBIT CloudStack ...
ShapeBlue
 
PDF
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
PDF
Ampere Offers Energy-Efficient Future For AI And Cloud
ShapeBlue
 
PDF
NewMind AI Journal - Weekly Chronicles - July'25 Week II
NewMind AI
 
PPTX
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
PDF
Français Patch Tuesday - Juillet
Ivanti
 
PDF
Why Orbit Edge Tech is a Top Next JS Development Company in 2025
mahendraalaska08
 
PPTX
Extensions Framework (XaaS) - Enabling Orchestrate Anything
ShapeBlue
 
PDF
Log-Based Anomaly Detection: Enhancing System Reliability with Machine Learning
Mohammed BEKKOUCHE
 
PDF
SFWelly Summer 25 Release Highlights July 2025
Anna Loughnan Colquhoun
 
PDF
Building Resilience with Digital Twins : Lessons from Korea
SANGHEE SHIN
 
PDF
CloudStack GPU Integration - Rohit Yadav
ShapeBlue
 
PDF
The Builder’s Playbook - 2025 State of AI Report.pdf
jeroen339954
 
PDF
Human-centred design in online workplace learning and relationship to engagem...
Tracy Tang
 
PPTX
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
PDF
Blockchain Transactions Explained For Everyone
CIFDAQ
 
PDF
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
PDF
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
PDF
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 
Women in Automation Presents: Reinventing Yourself — Bold Career Pivots That ...
DianaGray10
 
Building and Operating a Private Cloud with CloudStack and LINBIT CloudStack ...
ShapeBlue
 
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
Ampere Offers Energy-Efficient Future For AI And Cloud
ShapeBlue
 
NewMind AI Journal - Weekly Chronicles - July'25 Week II
NewMind AI
 
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
Français Patch Tuesday - Juillet
Ivanti
 
Why Orbit Edge Tech is a Top Next JS Development Company in 2025
mahendraalaska08
 
Extensions Framework (XaaS) - Enabling Orchestrate Anything
ShapeBlue
 
Log-Based Anomaly Detection: Enhancing System Reliability with Machine Learning
Mohammed BEKKOUCHE
 
SFWelly Summer 25 Release Highlights July 2025
Anna Loughnan Colquhoun
 
Building Resilience with Digital Twins : Lessons from Korea
SANGHEE SHIN
 
CloudStack GPU Integration - Rohit Yadav
ShapeBlue
 
The Builder’s Playbook - 2025 State of AI Report.pdf
jeroen339954
 
Human-centred design in online workplace learning and relationship to engagem...
Tracy Tang
 
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
Blockchain Transactions Explained For Everyone
CIFDAQ
 
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 

Drawing Tools

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