SlideShare una empresa de Scribd logo
1 de 22
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

2D viewing & clipping
2D viewing & clipping2D viewing & clipping
2D viewing & clippingMdAlAmin187
 
Mid point circle algorithm
Mid point circle algorithmMid point circle algorithm
Mid point circle algorithmMani Kanth
 
Unit 3
Unit 3Unit 3
Unit 3ypnrao
 
Attributes of Output Primitives
Attributes of Output PrimitivesAttributes of Output Primitives
Attributes of Output PrimitivesRenita Santhmayora
 
Polygon clipping
Polygon clippingPolygon clipping
Polygon clippingMohd Arif
 
Bressenham’s Midpoint Circle Drawing Algorithm
Bressenham’s Midpoint Circle Drawing AlgorithmBressenham’s Midpoint Circle Drawing Algorithm
Bressenham’s Midpoint Circle Drawing AlgorithmMrinmoy Dalal
 
3d transformation computer graphics
3d transformation computer graphics 3d transformation computer graphics
3d transformation computer graphics University of Potsdam
 
2D Transformation
2D Transformation2D Transformation
2D TransformationShahDhruv21
 
2D Transformation in Computer Graphics
2D Transformation in Computer Graphics2D Transformation in Computer Graphics
2D Transformation in Computer GraphicsA. S. M. Shafi
 
HOMOGENEOUS CO-ORDINATES IN COMPUTER GRAPHICS PPT
HOMOGENEOUS CO-ORDINATES IN COMPUTER GRAPHICS PPTHOMOGENEOUS CO-ORDINATES IN COMPUTER GRAPHICS PPT
HOMOGENEOUS CO-ORDINATES IN COMPUTER GRAPHICS PPTAhtesham Ullah khan
 
Quadric surfaces
Quadric surfacesQuadric surfaces
Quadric surfacesAnkur Kumar
 
Circle generation algorithm
Circle generation algorithmCircle generation algorithm
Circle generation algorithmAnkit Garg
 
Clipping in Computer Graphics
Clipping in Computer GraphicsClipping in Computer Graphics
Clipping in Computer GraphicsLaxman Puri
 
Output primitives in Computer Graphics
Output primitives in Computer GraphicsOutput primitives in Computer Graphics
Output primitives in Computer GraphicsKamal Acharya
 
Character generation techniques
Character generation techniquesCharacter generation techniques
Character generation techniquesMani Kanth
 
Attributes of output primitives( curve attributes & area fill attributes)
Attributes of output primitives( curve attributes & area fill attributes)Attributes of output primitives( curve attributes & area fill attributes)
Attributes of output primitives( curve attributes & area fill attributes)shalinikarunakaran1
 

La actualidad más candente (20)

2D viewing & clipping
2D viewing & clipping2D viewing & clipping
2D viewing & clipping
 
Mid point circle algorithm
Mid point circle algorithmMid point circle algorithm
Mid point circle algorithm
 
Unit 3
Unit 3Unit 3
Unit 3
 
Attributes of Output Primitives
Attributes of Output PrimitivesAttributes of Output Primitives
Attributes of Output Primitives
 
Polygon clipping
Polygon clippingPolygon clipping
Polygon clipping
 
Bressenham’s Midpoint Circle Drawing Algorithm
Bressenham’s Midpoint Circle Drawing AlgorithmBressenham’s Midpoint Circle Drawing Algorithm
Bressenham’s Midpoint Circle Drawing Algorithm
 
3d transformation computer graphics
3d transformation computer graphics 3d transformation computer graphics
3d transformation computer graphics
 
2D Transformation
2D Transformation2D Transformation
2D Transformation
 
Shading
ShadingShading
Shading
 
2D Transformation in Computer Graphics
2D Transformation in Computer Graphics2D Transformation in Computer Graphics
2D Transformation in Computer Graphics
 
Clipping
ClippingClipping
Clipping
 
Spline representations
Spline representationsSpline representations
Spline representations
 
HOMOGENEOUS CO-ORDINATES IN COMPUTER GRAPHICS PPT
HOMOGENEOUS CO-ORDINATES IN COMPUTER GRAPHICS PPTHOMOGENEOUS CO-ORDINATES IN COMPUTER GRAPHICS PPT
HOMOGENEOUS CO-ORDINATES IN COMPUTER GRAPHICS PPT
 
Computer graphics
Computer graphicsComputer graphics
Computer graphics
 
Quadric surfaces
Quadric surfacesQuadric surfaces
Quadric surfaces
 
Circle generation algorithm
Circle generation algorithmCircle generation algorithm
Circle generation algorithm
 
Clipping in Computer Graphics
Clipping in Computer GraphicsClipping in Computer Graphics
Clipping in Computer Graphics
 
Output primitives in Computer Graphics
Output primitives in Computer GraphicsOutput primitives in Computer Graphics
Output primitives in Computer Graphics
 
Character generation techniques
Character generation techniquesCharacter generation techniques
Character generation techniques
 
Attributes of output primitives( curve attributes & area fill attributes)
Attributes of output primitives( curve attributes & area fill attributes)Attributes of output primitives( curve attributes & area fill attributes)
Attributes of output primitives( curve attributes & area fill attributes)
 

Destacado

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

Destacado (11)

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
 
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 a 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
 
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 Groupbernice-chan
 
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
 
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 a 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
 
Lesson 2 - Drawing Objects
Lesson 2 - Drawing ObjectsLesson 2 - Drawing Objects
Lesson 2 - Drawing Objects
 
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 viewing
3 d viewing3 d viewing
3 d viewing
 
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
 
Computer graphics
Computer graphicsComputer graphics
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