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

Visible surface detection in computer graphic
Visible surface detection in computer graphicVisible surface detection in computer graphic
Visible surface detection in computer graphicanku2266
 
Computer Vision transformations
Computer Vision  transformationsComputer Vision  transformations
Computer Vision transformationsWael Badawy
 
Hidden surface removal
Hidden surface removalHidden surface removal
Hidden surface removalPunyajoy Saha
 
3D Graphics : Computer Graphics Fundamentals
3D Graphics : Computer Graphics Fundamentals3D Graphics : Computer Graphics Fundamentals
3D Graphics : Computer Graphics FundamentalsMuhammed Afsal Villan
 
Computer Graphics
Computer GraphicsComputer Graphics
Computer GraphicsAdri Jovin
 
Back face detection
Back face detectionBack face detection
Back face detectionPooja Dixit
 
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: Visible surface detection methods
Computer Graphics: Visible surface detection methodsComputer Graphics: Visible surface detection methods
Computer Graphics: Visible surface detection methodsJoseph Charles
 
Projection In Computer Graphics
Projection In Computer GraphicsProjection In Computer Graphics
Projection In Computer GraphicsSanu Philip
 
Two dimensional viewing
Two dimensional viewingTwo dimensional viewing
Two dimensional viewingMohd Arif
 
Computer Graphics - Lecture 02 transformation
Computer Graphics - Lecture 02 transformationComputer Graphics - Lecture 02 transformation
Computer Graphics - Lecture 02 transformation💻 Anton Gerdelan
 
hidden surface elimination using z buffer algorithm
hidden surface elimination using z buffer algorithmhidden surface elimination using z buffer algorithm
hidden surface elimination using z buffer algorithmrajivagarwal23dei
 
Computer Graphics - Lecture 03 - Virtual Cameras and the Transformation Pipeline
Computer Graphics - Lecture 03 - Virtual Cameras and the Transformation PipelineComputer Graphics - Lecture 03 - Virtual Cameras and the Transformation Pipeline
Computer Graphics - Lecture 03 - Virtual Cameras and the Transformation Pipeline💻 Anton Gerdelan
 
3D Transformation
3D Transformation3D Transformation
3D TransformationSwatiHans10
 
Hidden surface removal
Hidden surface removalHidden surface removal
Hidden surface removalAnkit Garg
 
2D transformation (Computer Graphics)
2D transformation (Computer Graphics)2D transformation (Computer Graphics)
2D transformation (Computer Graphics)Timbal Mayank
 

What's hot (20)

Spline representations
Spline representationsSpline representations
Spline representations
 
Visible surface detection in computer graphic
Visible surface detection in computer graphicVisible surface detection in computer graphic
Visible surface detection in computer graphic
 
Computer Vision transformations
Computer Vision  transformationsComputer Vision  transformations
Computer Vision transformations
 
Hidden surface removal
Hidden surface removalHidden surface removal
Hidden surface removal
 
3D Graphics : Computer Graphics Fundamentals
3D Graphics : Computer Graphics Fundamentals3D Graphics : Computer Graphics Fundamentals
3D Graphics : Computer Graphics Fundamentals
 
Computer Graphics
Computer GraphicsComputer Graphics
Computer Graphics
 
Back face detection
Back face detectionBack face detection
Back face detection
 
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
 
Depth Buffer Method
Depth Buffer MethodDepth Buffer Method
Depth Buffer Method
 
Computer Graphics: Visible surface detection methods
Computer Graphics: Visible surface detection methodsComputer Graphics: Visible surface detection methods
Computer Graphics: Visible surface detection methods
 
Chapter 1
Chapter 1Chapter 1
Chapter 1
 
3D Display
3D Display3D Display
3D Display
 
Projection In Computer Graphics
Projection In Computer GraphicsProjection In Computer Graphics
Projection In Computer Graphics
 
Two dimensional viewing
Two dimensional viewingTwo dimensional viewing
Two dimensional viewing
 
Computer Graphics - Lecture 02 transformation
Computer Graphics - Lecture 02 transformationComputer Graphics - Lecture 02 transformation
Computer Graphics - Lecture 02 transformation
 
hidden surface elimination using z buffer algorithm
hidden surface elimination using z buffer algorithmhidden surface elimination using z buffer algorithm
hidden surface elimination using z buffer algorithm
 
Computer Graphics - Lecture 03 - Virtual Cameras and the Transformation Pipeline
Computer Graphics - Lecture 03 - Virtual Cameras and the Transformation PipelineComputer Graphics - Lecture 03 - Virtual Cameras and the Transformation Pipeline
Computer Graphics - Lecture 03 - Virtual Cameras and the Transformation Pipeline
 
3D Transformation
3D Transformation3D Transformation
3D Transformation
 
Hidden surface removal
Hidden surface removalHidden surface removal
Hidden surface removal
 
2D transformation (Computer Graphics)
2D transformation (Computer Graphics)2D transformation (Computer Graphics)
2D transformation (Computer Graphics)
 

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