2d coordinate systems and drawing
Download
1 / 27

2D Coordinate Systems and Drawing - PowerPoint PPT Presentation


  • 93 Views
  • Uploaded on

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)

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

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


An Image/Link below is provided (as is) to download presentation

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

Coordinate systems
Coordinate Systems

  • Screen coordinate system

  • World coordinate system

  • World window

  • Viewport

  • Window to viewport mapping


Screen coordinate system
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

y

Your Monitor Screen

x

(0, 0)

(2, 2)


Screen coordinate system1
Screen Coordinate System

  • Not easy to use in practice

    • Window size can vary


Screen coordinate system2
Screen Coordinate System

  • Not easy to use in practice

    • Window size can vary

    • People prefer to specify objects in their actual sizes



2d drawing
2D Drawing coordinate system.

World

Objects (in world coordinate system)

World Window

Screen Window

Screen


Define a world window
Define a world window coordinate system.


Define a world window1
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
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
An Example coordinate system.

(1, 1)

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)

(-1, -1)

(400, 300)

(350, 250)

(-0.5, -0.5)

(0.5, -0.5)

(50, 50)

(0, 0)


Remember to
Remember to… coordinate system.

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

}


How to achieve this mapping
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
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
Basic Information coordinate system.

V_T – V_B

W_T – W_B

W_R - W_L

V_R - V_L


Keep the same ratio
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 ratio1
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
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
A simple way to initialize the world window coordinate system.

  • Cover everything


Zoom in out
Zoom In/Out coordinate system.

  • Call gluOrtho2D() with new ranges


Distortion example
Distortion Example coordinate system.

(1, 1)

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)

(-1, -1)

(400, 300)

(350, 250)

(-0.5, -0.5)

(0.5, -0.5)

(50, 50)

(0, 0)


Aspect ratio
Aspect Ratio coordinate system.

r= width/height

(0.5, 0.5)

height

width


Distortion happens when aspect ratios are not consistent
Distortion happens when aspect ratios are not consistent coordinate system.

(1, 1)

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)

(-1, -1)

(400, 300)

(350, 250)

(-0.5, -0.5)

(0.5, -0.5)

(50, 50)

(0, 0)


Two solutions
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
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
Example coordinate system.

world_height

(center_x, center_y)

world_width

world_height=world_width*view_port_height/view_port_width


Example1
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


ad