SlideShare a Scribd company logo
1 of 22
2D Drawing
Filling Rectangle, Filling Polygon
Coordinate Systems

We have been using the coordinate system of the
 screen window (in pixels).
The range is from 0 (left) to some value screenWidth
 – 1 in x, and from 0 (usually top) to some value
 screenHeight –1 in y.
    We can use only positive values of x and y.
    The values must have a large range (several hundred pixels) to
     get a reasonable size drawing.
CONTINUE…

It may be much more natural to think in terms of x
 varying from, say, -1 to 1, and y varying from –100.0
 to 20.0.
We want to separate the coordinates we use in a
 program to describe the geometrical object from the
 coordinates we use to size and position the pictures
 of the objects on the display.
Description is usually referred to as a modeling
 task, and displaying pictures as a viewing task.
WORLD COORDINATES

The space in which objects are described is called
 world coordinates (the numbers used for x and y
 are those in the world, where the objects are
 defined).
World coordinates use the Cartesian xy-coordinate
 system used in mathematics, based on whatever
 units are convenient.
world window

We define a rectangular world window in these
 world coordinates.
The world window specifies which part of the world
 should be drawn: whichever part lies inside the
 window should be drawn, and whichever part lies
 outside should be clipped away and not drawn.
OpenGL     does      the   clipping   automatically.
viewport

In addition, we define a rectangular viewport in the
 screen window on the display.
A mapping (consisting of scalings [change size] and
 translations [move object]) between the world
 window and the viewport is established by OpenGL.
The  objects inside the world window appear
 automatically at proper sizes and locations inside the
 viewport (in screen coordinates, which are pixel
 coordinates on the display).
Coordinate Systems Example

 We   want to graph



 Sinc(0)= 1 by
 definition.
 Interesting parts of
 the function are in
 -4.0 ≤ x ≤ 4.0.
Set WW

 The function setWindow sets the world window size:



void setWindow(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top)
{
       glMatrixMode(GL_PROJECTION);

      glLoadIdentity();

      gluOrtho2D(left, right, bottom, top);

}
Set VP

void setViewport(GLint left, GLint right, GLint bottom, GLint top)
{
    glViewport(left, bottom, right - left, top - bottom);
}




 Calls: setWindow(-5.0, 5.0, -0.3, 1.0);
         setViewport(0, 640, 0, 480);

In myInit();
Windows and Viewports

We use natural coordinates for what we are drawing
 (the world window).
OpenGL    converts our coordinates to screen
 coordinates when we set up a screen window and a
 viewport. The viewport may be smaller than the
 screen window. The default viewport is the entire
 screen window.
The   conversion requires scaling and shifting:
 mapping the world window to the screen window
 and the viewport.
Windows and Viewport
Mapping From the Window to VIEWPORT

Windows are described by their left, top, right, and
 bottom values, w.l, w.t, w.r, w.b.
Viewports are described by the same values: v.l, v.t,
 v.r, v.b, but in screen window coordinates.
Window-to-Viewport Mapping (Transformation)


We want our mapping to be proportional: for
 example, if x is ¼ of the way between the left and
 right world window boundaries, then the screen x (sx)
 should be ¼ of the way between the left and right
 viewport boundaries.
CONTINUE….

Proportionality forces the mappings to have a linear
 form:
     sx= A * x + C,
     sy = B * y + D
 For some constants A, B, C and D. The constants A and B scale the x
 and y coordinates, and C and D shift (or translate) them.

 How can A, B, C, and D be determined?
 Consider first the mapping for x.


 After algebraic manipulation


         Or
              A = (V.r-V.l)/(W.r-W.l),
              C = V.l – A*w.l
CONTINUE…

Similarly, proportionality in y dictates that




  and writing sy as B y + D yields:
CONTINUE…
Example

Consider the window and viewport of Figure 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).
Solution:

 Using the above eq:



Thus for this example, the window to viewport
  mapping is:

Check that this mapping properly maps various
 points of interest, such as
Each corner of the window is indeed mapped to the
 corresponding corner of the viewport. For example,
 (2.0, 1.0) maps to (400, 300).
CONTINUE….

The center of the window (1.0, 0.5) maps to the
 center of the viewport (220, 180 )
Practice Exercise

Find values of A, B, C, and D for the case of a world
 window (10.0, 10.0, -6.0, 6.0) and a viewport (0,
 600, 0, 400).
oGL Functions To Create the Map

Because OpenGL uses matrices to set up all its
 transformations, the call to gluOrtho2D() must be
 preceded by two setup functions:

   glMatrixMode(GL_PROJECTION);
   glLoadIdentity(); //to reset the matrix
Application:Tiling with Viewports

More Related Content

What's hot

Hidden surfaces
Hidden surfacesHidden surfaces
Hidden surfacesMohd Arif
 
Projection In Computer Graphics
Projection In Computer GraphicsProjection In Computer Graphics
Projection In Computer GraphicsSanu Philip
 
Computer graphics basic transformation
Computer graphics basic transformationComputer graphics basic transformation
Computer graphics basic transformationSelvakumar Gna
 
Two dimensional viewing
Two dimensional viewingTwo dimensional viewing
Two dimensional viewingMohd Arif
 
Visible surface determination
Visible  surface determinationVisible  surface determination
Visible surface determinationPatel Punit
 
Graphics_3D viewing
Graphics_3D viewingGraphics_3D viewing
Graphics_3D viewingRabin BK
 
Random scan displays and raster scan displays
Random scan displays and raster scan displaysRandom scan displays and raster scan displays
Random scan displays and raster scan displaysSomya Bagai
 
Computer graphics(parametric cubic curves)
Computer graphics(parametric cubic curves)Computer graphics(parametric cubic curves)
Computer graphics(parametric cubic curves)Sinthia Sarker
 
B. SC CSIT Computer Graphics Unit 3 By Tekendra Nath Yogi
B. SC CSIT Computer Graphics Unit 3 By Tekendra Nath YogiB. SC CSIT Computer Graphics Unit 3 By Tekendra Nath Yogi
B. SC CSIT Computer Graphics Unit 3 By Tekendra Nath YogiTekendra Nath Yogi
 
COMPUTER GRAPHICS-"Projection"
COMPUTER GRAPHICS-"Projection"COMPUTER GRAPHICS-"Projection"
COMPUTER GRAPHICS-"Projection"Ankit Surti
 
Window to viewport transformation&matrix representation of homogeneous co...
Window to viewport transformation&matrix representation of homogeneous co...Window to viewport transformation&matrix representation of homogeneous co...
Window to viewport transformation&matrix representation of homogeneous co...Mani Kanth
 
Two dimensional geometric transformations
Two dimensional geometric transformationsTwo dimensional geometric transformations
Two dimensional geometric transformationsMohammad Sadiq
 
2D transformation (Computer Graphics)
2D transformation (Computer Graphics)2D transformation (Computer Graphics)
2D transformation (Computer Graphics)Timbal Mayank
 
Homogeneous Representation: rotating, shearing
Homogeneous Representation: rotating, shearingHomogeneous Representation: rotating, shearing
Homogeneous Representation: rotating, shearingManthan Kanani
 
3D Transformation in Computer Graphics
3D Transformation in Computer Graphics3D Transformation in Computer Graphics
3D Transformation in Computer Graphicssabbirantor
 
3D Transformation in Computer Graphics
3D Transformation in Computer Graphics3D Transformation in Computer Graphics
3D Transformation in Computer GraphicsA. S. M. Shafi
 
Three dimensional transformations
Three dimensional transformationsThree dimensional transformations
Three dimensional transformationsNareek
 

What's hot (20)

3 d display-methods
3 d display-methods3 d display-methods
3 d display-methods
 
Hidden surfaces
Hidden surfacesHidden surfaces
Hidden surfaces
 
Projection In Computer Graphics
Projection In Computer GraphicsProjection In Computer Graphics
Projection In Computer Graphics
 
Computer graphics basic transformation
Computer graphics basic transformationComputer graphics basic transformation
Computer graphics basic transformation
 
Three dimensional concepts - Computer Graphics
Three dimensional concepts - Computer GraphicsThree dimensional concepts - Computer Graphics
Three dimensional concepts - Computer Graphics
 
Two dimensional viewing
Two dimensional viewingTwo dimensional viewing
Two dimensional viewing
 
Visible surface determination
Visible  surface determinationVisible  surface determination
Visible surface determination
 
Graphics_3D viewing
Graphics_3D viewingGraphics_3D viewing
Graphics_3D viewing
 
Random scan displays and raster scan displays
Random scan displays and raster scan displaysRandom scan displays and raster scan displays
Random scan displays and raster scan displays
 
Computer graphics(parametric cubic curves)
Computer graphics(parametric cubic curves)Computer graphics(parametric cubic curves)
Computer graphics(parametric cubic curves)
 
B. SC CSIT Computer Graphics Unit 3 By Tekendra Nath Yogi
B. SC CSIT Computer Graphics Unit 3 By Tekendra Nath YogiB. SC CSIT Computer Graphics Unit 3 By Tekendra Nath Yogi
B. SC CSIT Computer Graphics Unit 3 By Tekendra Nath Yogi
 
Projection
ProjectionProjection
Projection
 
COMPUTER GRAPHICS-"Projection"
COMPUTER GRAPHICS-"Projection"COMPUTER GRAPHICS-"Projection"
COMPUTER GRAPHICS-"Projection"
 
Window to viewport transformation&matrix representation of homogeneous co...
Window to viewport transformation&matrix representation of homogeneous co...Window to viewport transformation&matrix representation of homogeneous co...
Window to viewport transformation&matrix representation of homogeneous co...
 
Two dimensional geometric transformations
Two dimensional geometric transformationsTwo dimensional geometric transformations
Two dimensional geometric transformations
 
2D transformation (Computer Graphics)
2D transformation (Computer Graphics)2D transformation (Computer Graphics)
2D transformation (Computer Graphics)
 
Homogeneous Representation: rotating, shearing
Homogeneous Representation: rotating, shearingHomogeneous Representation: rotating, shearing
Homogeneous Representation: rotating, shearing
 
3D Transformation in Computer Graphics
3D Transformation in Computer Graphics3D Transformation in Computer Graphics
3D Transformation in Computer Graphics
 
3D Transformation in Computer Graphics
3D Transformation in Computer Graphics3D Transformation in Computer Graphics
3D Transformation in Computer Graphics
 
Three dimensional transformations
Three dimensional transformationsThree dimensional transformations
Three dimensional transformations
 

Viewers also liked

Hermite bicubic-surface-patch
Hermite bicubic-surface-patchHermite bicubic-surface-patch
Hermite bicubic-surface-patchRohit Gothwal
 
Surface representation
Surface representationSurface representation
Surface representationSunith Guraddi
 
Coons bicubic surface
Coons bicubic surfaceCoons bicubic surface
Coons bicubic surfaceramac123
 
Curves And Surfaces Representation And Application
Curves And Surfaces Representation And ApplicationCurves And Surfaces Representation And Application
Curves And Surfaces Representation And ApplicationDiaa ElKott
 
Window to viewport transformation
Window to viewport transformationWindow to viewport transformation
Window to viewport transformationAnkit Garg
 
Cellular manufacturing and group technology
Cellular manufacturing and group technologyCellular manufacturing and group technology
Cellular manufacturing and group technologyHitendrasinh Zala
 
FLEXIBLE MANUFACTURING SYSTEM
FLEXIBLE MANUFACTURING SYSTEMFLEXIBLE MANUFACTURING SYSTEM
FLEXIBLE MANUFACTURING SYSTEMAnand Khare
 
Concurrent Engineering
Concurrent EngineeringConcurrent Engineering
Concurrent Engineeringajithsrc
 

Viewers also liked (12)

Hermite bicubic-surface-patch
Hermite bicubic-surface-patchHermite bicubic-surface-patch
Hermite bicubic-surface-patch
 
Surface representation
Surface representationSurface representation
Surface representation
 
Coons bicubic surface
Coons bicubic surfaceCoons bicubic surface
Coons bicubic surface
 
Curves And Surfaces Representation And Application
Curves And Surfaces Representation And ApplicationCurves And Surfaces Representation And Application
Curves And Surfaces Representation And Application
 
Window to viewport transformation
Window to viewport transformationWindow to viewport transformation
Window to viewport transformation
 
B spline
B splineB spline
B spline
 
Group Technology
Group TechnologyGroup Technology
Group Technology
 
Curves and surfaces
Curves and surfacesCurves and surfaces
Curves and surfaces
 
Cellular manufacturing and group technology
Cellular manufacturing and group technologyCellular manufacturing and group technology
Cellular manufacturing and group technology
 
FLEXIBLE MANUFACTURING SYSTEM
FLEXIBLE MANUFACTURING SYSTEMFLEXIBLE MANUFACTURING SYSTEM
FLEXIBLE MANUFACTURING SYSTEM
 
Concurrent Engineering
Concurrent EngineeringConcurrent Engineering
Concurrent Engineering
 
Concurrent Engineering
Concurrent EngineeringConcurrent Engineering
Concurrent Engineering
 

Similar to Windows and viewport

3D Math Primer: CocoaConf Chicago
3D Math Primer: CocoaConf Chicago3D Math Primer: CocoaConf Chicago
3D Math Primer: CocoaConf ChicagoJanie Clayton
 
computer graphics
computer graphicscomputer graphics
computer graphicsMegabi Mamo
 
3 d graphics with opengl part 2
3 d graphics with opengl  part 23 d graphics with opengl  part 2
3 d graphics with opengl part 2Sardar Alam
 
CS 354 Object Viewing and Representation
CS 354 Object Viewing and RepresentationCS 354 Object Viewing and Representation
CS 354 Object Viewing and RepresentationMark Kilgard
 
The Day You Finally Use Algebra: A 3D Math Primer
The Day You Finally Use Algebra: A 3D Math PrimerThe Day You Finally Use Algebra: A 3D Math Primer
The Day You Finally Use Algebra: A 3D Math PrimerJanie Clayton
 
2 transformation computer graphics
2 transformation computer graphics2 transformation computer graphics
2 transformation computer graphicscairo university
 
Unit 3
Unit 3Unit 3
Unit 3ypnrao
 
6. Perspective Projection .pdf
6. Perspective  Projection                    .pdf6. Perspective  Projection                    .pdf
6. Perspective Projection .pdfYatruHarshaHiski
 
CS 354 Transformation, Clipping, and Culling
CS 354 Transformation, Clipping, and CullingCS 354 Transformation, Clipping, and Culling
CS 354 Transformation, Clipping, and CullingMark Kilgard
 
3 d graphics with opengl part 1
3 d graphics with opengl part 13 d graphics with opengl part 1
3 d graphics with opengl part 1Sardar Alam
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Groupdreambreeze
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Groupbernice-chan
 
Computer Graphics & linear Algebra
Computer Graphics & linear Algebra Computer Graphics & linear Algebra
Computer Graphics & linear Algebra Xad Kuain
 
Enhancing UI/UX using Java animations
Enhancing UI/UX using Java animationsEnhancing UI/UX using Java animations
Enhancing UI/UX using Java animationsNaman Dwivedi
 
Fundamentals of Multimedia - Vector Graphics.pdf
Fundamentals of Multimedia - Vector Graphics.pdfFundamentals of Multimedia - Vector Graphics.pdf
Fundamentals of Multimedia - Vector Graphics.pdfFatihahIrra
 
Trytten computergraphics(1)
Trytten computergraphics(1)Trytten computergraphics(1)
Trytten computergraphics(1)nriaz469
 
computer graphics slides by Talha shah
computer graphics slides by Talha shahcomputer graphics slides by Talha shah
computer graphics slides by Talha shahSyed Talha
 
3 projection computer graphics
3 projection computer graphics3 projection computer graphics
3 projection computer graphicscairo university
 

Similar to Windows and viewport (20)

3D Math Primer: CocoaConf Chicago
3D Math Primer: CocoaConf Chicago3D Math Primer: CocoaConf Chicago
3D Math Primer: CocoaConf Chicago
 
computer graphics
computer graphicscomputer graphics
computer graphics
 
3 d graphics with opengl part 2
3 d graphics with opengl  part 23 d graphics with opengl  part 2
3 d graphics with opengl part 2
 
CS 354 Object Viewing and Representation
CS 354 Object Viewing and RepresentationCS 354 Object Viewing and Representation
CS 354 Object Viewing and Representation
 
The Day You Finally Use Algebra: A 3D Math Primer
The Day You Finally Use Algebra: A 3D Math PrimerThe Day You Finally Use Algebra: A 3D Math Primer
The Day You Finally Use Algebra: A 3D Math Primer
 
2 transformation computer graphics
2 transformation computer graphics2 transformation computer graphics
2 transformation computer graphics
 
Unit 3
Unit 3Unit 3
Unit 3
 
Lesson 2 - Drawing Objects
Lesson 2 - Drawing ObjectsLesson 2 - Drawing Objects
Lesson 2 - Drawing Objects
 
6. Perspective Projection .pdf
6. Perspective  Projection                    .pdf6. Perspective  Projection                    .pdf
6. Perspective Projection .pdf
 
CS 354 Transformation, Clipping, and Culling
CS 354 Transformation, Clipping, and CullingCS 354 Transformation, Clipping, and Culling
CS 354 Transformation, Clipping, and Culling
 
3 d graphics with opengl part 1
3 d graphics with opengl part 13 d graphics with opengl part 1
3 d graphics with opengl part 1
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
 
Computer Graphics & linear Algebra
Computer Graphics & linear Algebra Computer Graphics & linear Algebra
Computer Graphics & linear Algebra
 
Intro to Canva
Intro to CanvaIntro to Canva
Intro to Canva
 
Enhancing UI/UX using Java animations
Enhancing UI/UX using Java animationsEnhancing UI/UX using Java animations
Enhancing UI/UX using Java animations
 
Fundamentals of Multimedia - Vector Graphics.pdf
Fundamentals of Multimedia - Vector Graphics.pdfFundamentals of Multimedia - Vector Graphics.pdf
Fundamentals of Multimedia - Vector Graphics.pdf
 
Trytten computergraphics(1)
Trytten computergraphics(1)Trytten computergraphics(1)
Trytten computergraphics(1)
 
computer graphics slides by Talha shah
computer graphics slides by Talha shahcomputer graphics slides by Talha shah
computer graphics slides by Talha shah
 
3 projection computer graphics
3 projection computer graphics3 projection computer graphics
3 projection computer graphics
 

Windows and viewport

  • 2. Coordinate Systems We have been using the coordinate system of the screen window (in pixels). The range is from 0 (left) to some value screenWidth – 1 in x, and from 0 (usually top) to some value screenHeight –1 in y.  We can use only positive values of x and y.  The values must have a large range (several hundred pixels) to get a reasonable size drawing.
  • 3. CONTINUE… It may be much more natural to think in terms of x varying from, say, -1 to 1, and y varying from –100.0 to 20.0. We want to separate the coordinates we use in a program to describe the geometrical object from the coordinates we use to size and position the pictures of the objects on the display. Description is usually referred to as a modeling task, and displaying pictures as a viewing task.
  • 4. WORLD COORDINATES The space in which objects are described is called world coordinates (the numbers used for x and y are those in the world, where the objects are defined). World coordinates use the Cartesian xy-coordinate system used in mathematics, based on whatever units are convenient.
  • 5. world window We define a rectangular world window in these world coordinates. The world window specifies which part of the world should be drawn: whichever part lies inside the window should be drawn, and whichever part lies outside should be clipped away and not drawn. OpenGL does the clipping automatically.
  • 6. viewport In addition, we define a rectangular viewport in the screen window on the display. A mapping (consisting of scalings [change size] and translations [move object]) between the world window and the viewport is established by OpenGL. The objects inside the world window appear automatically at proper sizes and locations inside the viewport (in screen coordinates, which are pixel coordinates on the display).
  • 7. Coordinate Systems Example  We want to graph  Sinc(0)= 1 by definition. Interesting parts of the function are in -4.0 ≤ x ≤ 4.0.
  • 8. Set WW  The function setWindow sets the world window size: void setWindow(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top) { glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(left, right, bottom, top); }
  • 9. Set VP void setViewport(GLint left, GLint right, GLint bottom, GLint top) { glViewport(left, bottom, right - left, top - bottom); }  Calls: setWindow(-5.0, 5.0, -0.3, 1.0);  setViewport(0, 640, 0, 480); In myInit();
  • 10. Windows and Viewports We use natural coordinates for what we are drawing (the world window). OpenGL converts our coordinates to screen coordinates when we set up a screen window and a viewport. The viewport may be smaller than the screen window. The default viewport is the entire screen window. The conversion requires scaling and shifting: mapping the world window to the screen window and the viewport.
  • 12. Mapping From the Window to VIEWPORT Windows are described by their left, top, right, and bottom values, w.l, w.t, w.r, w.b. Viewports are described by the same values: v.l, v.t, v.r, v.b, but in screen window coordinates.
  • 13. Window-to-Viewport Mapping (Transformation) We want our mapping to be proportional: for example, if x is ¼ of the way between the left and right world window boundaries, then the screen x (sx) should be ¼ of the way between the left and right viewport boundaries.
  • 14. CONTINUE…. Proportionality forces the mappings to have a linear form: sx= A * x + C, sy = B * y + D For some constants A, B, C and D. The constants A and B scale the x and y coordinates, and C and D shift (or translate) them. How can A, B, C, and D be determined? Consider first the mapping for x. After algebraic manipulation Or A = (V.r-V.l)/(W.r-W.l), C = V.l – A*w.l
  • 15. CONTINUE… Similarly, proportionality in y dictates that and writing sy as B y + D yields:
  • 17. Example Consider the window and viewport of Figure 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).
  • 18. Solution:  Using the above eq: Thus for this example, the window to viewport mapping is: Check that this mapping properly maps various points of interest, such as Each corner of the window is indeed mapped to the corresponding corner of the viewport. For example, (2.0, 1.0) maps to (400, 300).
  • 19. CONTINUE…. The center of the window (1.0, 0.5) maps to the center of the viewport (220, 180 )
  • 20. Practice Exercise Find values of A, B, C, and D for the case of a world window (10.0, 10.0, -6.0, 6.0) and a viewport (0, 600, 0, 400).
  • 21. oGL Functions To Create the Map Because OpenGL uses matrices to set up all its transformations, the call to gluOrtho2D() must be preceded by two setup functions: glMatrixMode(GL_PROJECTION); glLoadIdentity(); //to reset the matrix