1 / 27

2D Coordinate Systems and Drawing - PowerPoint PPT Presentation

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)

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

PowerPoint Slideshow about ' 2D Coordinate Systems and Drawing' - pilis

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

2D Coordinate Systems and Drawing

• Screen coordinate system

• World coordinate system

• World window

• Viewport

• Window to viewport mapping

• 2D regular Cartesian grid

• Origin (0, 0) at the lower left

(OpenGL convention)

• Pixels are defined at intersections

• Defined relatively to

• the display window

y

x

(0, 0)

(2, 2)

• Not easy to use in practice

• Window size can vary

• Not easy to use in practice

• Window size can vary

• People prefer to specify objects in their actual sizes

2D Drawing coordinate system.

World

Objects (in world coordinate system)

World Window

Screen Window

Screen

Define a world window coordinate system.

Define a world window coordinate system.

• 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

Viewport coordinate system.

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

An Example coordinate system.

(1, 1)

{

glViewport(50, 50, 300, 200);

glMatrixMode(GL_PROJECTION);

gluOrtho2D(-1, 1, -1, 1);

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)

(-1, -1)

(400, 300)

(350, 250)

(-0.5, -0.5)

(0.5, -0.5)

(50, 50)

(0, 0)

Remember to… coordinate system.

• Remember to specify the matrix type:

{

glViewport(50, 50, 300, 200);

glMatrixMode(GL_PROJECTION);

gluOrtho2D(-1, 1, -1, 1);

glVertex2f(-0.5, -0.5);

glVertex2f( 0.5, -0.5);

glVertex2f( 0.5, 0.5);

glVertex2f(-0.5, 0.5);

glEnd();

}

How to achieve this mapping? coordinate system.

glViewport(50, 50, 300, 200);

gluOrtho2D(-1, 1, -1, 1);

No need to do mapping by yourself, just call those two functions!

The problem coordinate system.

• 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

Basic Information coordinate system.

V_T – V_B

W_T – W_B

W_R - W_L

V_R - V_L

Keep the Same Ratio coordinate system.

sx - V_L

x - W_L

W_R - W_L

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

Keep the Same Ratio coordinate system.

V_T – V_B

W_T – W_B

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

Practical Questions coordinate system.

• How to initialize

• The world window

• The viewport

• How to transform

• Translation

• Zoom in, zoom out…

A simple way to initialize the world window coordinate system.

• Cover everything

Zoom In/Out coordinate system.

• Call gluOrtho2D() with new ranges

Distortion Example coordinate system.

(1, 1)

{

glViewport(50, 50, 300, 200);

glMatrixMode(GL_PROJECTION);

gluOrtho2D(-1, 1, -1, 1);

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)

(-1, -1)

(400, 300)

(350, 250)

(-0.5, -0.5)

(0.5, -0.5)

(50, 50)

(0, 0)

Aspect Ratio coordinate system.

r= width/height

(0.5, 0.5)

height

width

Distortion happens when aspect ratios are not consistent coordinate system.

(1, 1)

{

glViewport(50, 50, 300, 200);

glMatrixMode(GL_PROJECTION);

gluOrtho2D(-1, 1, -1, 1);

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)

(-1, -1)

(400, 300)

(350, 250)

(-0.5, -0.5)

(0.5, -0.5)

(50, 50)

(0, 0)

Two solutions coordinate system.

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

Where to define viewport? coordinate system.

• Two places

• Initialization: the same size as the whole window

• Every time the user resizes the window

• Call Viewport in your resize callback function

Example coordinate system.

world_height

(center_x, center_y)

world_width

world_height=world_width*view_port_height/view_port_width

Example coordinate system.

world_height

(center_x, center_y)

world_width

W_L=center_x-world_width/2

W_B=center_y+world_height/2

W_R=center_x+world_width/2

W_T=center_y+world_height/2