2d coordinate systems and drawing
This presentation is the property of its rightful owner.
Sponsored Links
1 / 27

2D Coordinate Systems and Drawing PowerPoint PPT Presentation


  • 47 Views
  • Uploaded on
  • Presentation posted in: General

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)

Download Presentation

2D Coordinate Systems and Drawing

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


2d coordinate systems and drawing

2D Coordinate Systems and Drawing


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


Objects should be specified independent of the screen coordinate system

Objects should be specified independent of the screen coordinate system.


2d drawing

2D Drawing

World

Objects (in world coordinate system)

World Window

Screen Window

Screen


Define a world window

Define a world window


Define a world window1

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


Viewport

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)


An example

An Example

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

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

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

  • 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

V_T – V_B

W_T – W_B

W_R - W_L

V_R - V_L


Keep the same ratio

Keep the Same Ratio

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

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

  • 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

  • Cover everything


Zoom in out

Zoom In/Out

  • Call gluOrtho2D() with new ranges


Distortion example

Distortion Example

(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

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

(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

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

  • 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

world_height

(center_x, center_y)

world_width

world_height=world_width*view_port_height/view_port_width


Example1

Example

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


  • Login