2d coordinate systems and drawing
DESCRIPTION
2D Coordinate Systems and Drawing. Coordinate Systems. Screen coordinate system World coordinate system World window Viewport Window to viewport mapping . Screen Coordinate System. 2D regular Cartesian grid Origin (0, 0) at the lower left (OpenGL convention) - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/1.jpg)
2D Coordinate Systems and Drawing
![Page 2: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/2.jpg)
Coordinate Systems
• Screen coordinate system• World coordinate system• World window• Viewport• Window to viewport mapping
![Page 3: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/3.jpg)
Screen Coordinate System
• 2D regular Cartesian grid• Origin (0, 0) at the lower left
(OpenGL convention)
• Pixels are defined at intersections
• Defined relatively to the display window
Your Monitor Screeny
x(0, 0) (2, 2)
![Page 4: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/4.jpg)
Screen Coordinate System
• Not easy to use in practice– Window size can vary
![Page 5: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/5.jpg)
Screen Coordinate System
• Not easy to use in practice– Window size can vary– People prefer to specify objects in their actual sizes
![Page 6: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/6.jpg)
Objects should be specified independent of the screen coordinate system.
![Page 7: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/7.jpg)
2D Drawing
Screen
World
Objects (in world coordinate system)
World Window
Screen Window
![Page 8: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/8.jpg)
Define a world window
![Page 9: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/9.jpg)
Define a world window• A rectangular region in the world that is to be
displayed (in world coordinate system)
gluOrtho2D(W_L, W_R, W_B, W_T)
OpenGL function:2D orthogonal projection
![Page 10: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/10.jpg)
Viewport• A rectangular region in the screen for display
(in screen coordinate system)glViewport(V_L, V_B, V_R-V_L, V_T-V_B)
![Page 11: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/11.jpg)
An Example
void DrawQuad(){ glViewport(50, 50, 300, 200); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-1, 1, -1, 1); glBegin(GL_QUADS); glVertex2f(-0.5, -0.5); glVertex2f( 0.5, -0.5); glVertex2f( 0.5, 0.5); glVertex2f(-0.5, 0.5); glEnd();}
(-0.5, -0.5) (0.5, -0.5)
(-0.5, 0.5) (0.5, 0.5)
(-1, -1)
(1, 1)
(0, 0)
(400, 300)
(50, 50)
(350, 250)
![Page 12: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/12.jpg)
Remember to…• Remember to specify the matrix type:
void DrawQuad(){ glViewport(50, 50, 300, 200); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-1, 1, -1, 1); glBegin(GL_QUADS); glVertex2f(-0.5, -0.5); glVertex2f( 0.5, -0.5); glVertex2f( 0.5, 0.5); glVertex2f(-0.5, 0.5); glEnd();}
![Page 13: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/13.jpg)
How to achieve this mapping?
gluOrtho2D(-1, 1, -1, 1); glViewport(50, 50, 300, 200);
No need to do mapping by yourself, just call those two functions!
![Page 14: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/14.jpg)
The problem
• Input:– World window: W_L, W_R, W_B, W_T– Viewport: V_L, V_R, V_B, V_T– Some point (x, y) in the world coordinate system
• Output:– (sx, sy) on the screen
![Page 15: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/15.jpg)
Basic Information
W_R - W_L V_R - V_L
W_T
– W
_B
V_T
– V_
B
![Page 16: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/16.jpg)
Keep the Same Ratio
W_R - W_L V_R - V_L
x - W_Lsx - V_L
(x - W_L) / (W_R - W_L) = (sx - V_L) / (V_R - V_L)
sx = (x - W_L)(V_R - V_L) / (W_R - W_L) +V_L
![Page 17: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/17.jpg)
Keep the Same Ratio
y – W_B sy – V_B
(y – W_B) / (W_T – W_B) = (sy – V_B) / (V_T – V_B)
sy = (y – W_B)(V_T - V_B) / (W_T - W_B) +V_B
W_T
– W
_B
V_T
– V_
B
![Page 18: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/18.jpg)
Practical Questions
• How to initialize– The world window– The viewport
• How to transform– Translation– Zoom in, zoom out…
![Page 19: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/19.jpg)
A simple way to initialize the world window
• Cover everything
![Page 20: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/20.jpg)
• Call gluOrtho2D() with new ranges
Zoom In/Out
![Page 21: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/21.jpg)
Distortion Example
void DrawQuad(){ glViewport(50, 50, 300, 200); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-1, 1, -1, 1); glBegin(GL_QUADS); glVertex2f(-0.5, -0.5); glVertex2f( 0.5, -0.5); glVertex2f( 0.5, 0.5); glVertex2f(-0.5, 0.5); glEnd();}
(-0.5, -0.5) (0.5, -0.5)
(-0.5, 0.5) (0.5, 0.5)
(-1, -1)
(1, 1)
(0, 0)
(400, 300)
(50, 50)
(350, 250)
![Page 22: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/22.jpg)
Aspect Ratio
(0.5, 0.5)
width
heig
htr= width/height
![Page 23: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/23.jpg)
Distortion happens when aspect ratios are not consistent
void DrawQuad(){ glViewport(50, 50, 300, 200); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-1, 1, -1, 1); glBegin(GL_QUADS); glVertex2f(-0.5, -0.5); glVertex2f( 0.5, -0.5); glVertex2f( 0.5, 0.5); glVertex2f(-0.5, 0.5); glEnd();}
(-0.5, -0.5) (0.5, -0.5)
(-0.5, 0.5) (0.5, 0.5)
(-1, -1)
(1, 1)
(0, 0)
(400, 300)
(50, 50)
(350, 250)
![Page 24: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/24.jpg)
Two solutions
(-0.5, -0.5) (0.5, -0.5)
(-0.5, 0.5) (0.5, 0.5)
(-0.5, -0.5) (0.5, -0.5)
(-0.5, 0.5) (0.5, 0.5)
![Page 25: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/25.jpg)
Where to define viewport?
• Two places– Initialization: the same size as the whole window
– Every time the user resizes the window• Call Viewport in your resize callback function
![Page 26: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/26.jpg)
Example
(center_x, center_y)
world_width
world_height=world_width*view_port_height/view_port_width
wor
ld_h
eigh
t
![Page 27: 2D Coordinate Systems and Drawing](https://reader035.vdocuments.mx/reader035/viewer/2022062816/56816731550346895ddbdd0c/html5/thumbnails/27.jpg)
Example
(center_x, center_y)
world_width
wor
ld_h
eigh
t
W_L=center_x-world_width/2
W_R=center_x+world_width/2
W_B=center_y+world_height/2
W_T=center_y+world_height/2