Coordinate SystemCoordinate System

glOrthoglOrtho??

glOrtho(0.0, 500.0, 0.0, 500.0, -1.0,1.0);glOrtho(0.0, 500.0, 0.0, 500.0, -1.0,1.0);– Set the viewing volumeSet the viewing volume– Anything outside this volume will be clippedAnything outside this volume will be clipped

Window Size Window Size

glutInitWindowSize(320,240);glutInitWindowSize(320,240);– Set the display windowSet the display window– Can be any valuesCan be any values

However, distortion can occur due to However, distortion can occur due to different aspect ratio (w/h)different aspect ratio (w/h)

Different window sizeDifferent window size

320, 240320, 240 240, 320240, 320

Coordinate systemCoordinate system

the basic coordinate system of the screen window: the basic coordinate system of the screen window: coordinates that are essentially in pixels, extending from coordinates that are essentially in pixels, extending from 0 to some value 0 to some value screenWidth screenWidth -1 in x, and from 0 to some -1 in x, and from 0 to some value value screenHeight screenHeight -1 in y.-1 in y.

Clearly we want to make a separation between the Clearly we want to make a separation between the values we use in a program to values we use in a program to describe describe the geometrical the geometrical objects and the size and position of the objects and the size and position of the pictures pictures of them of them on the display.on the display.

World window and viewportWorld window and viewport

world coordinateworld coordinates: It is the usual Cartesian s: It is the usual Cartesian xxy-y-coordinate system used in mathematics, based on coordinate system used in mathematics, based on whatever units are convenient.whatever units are convenient.

We define a rectangular We define a rectangular world window world window in these world in these world coordinates. The world window specifies which part of coordinates. The world window specifies which part of the “world” should be drawn. The understanding is that the “world” should be drawn. The understanding is that whatever lies inside the window should be drawn; whatever lies inside the window should be drawn; whatever lies outside should be clipped away and not whatever lies outside should be clipped away and not drawn.drawn.

viewportviewport is a rectangular in the screen window on the is a rectangular in the screen window on the screen.screen.

Viewport TransformationViewport TransformationMyWindow

x

y

h

w

void glViewport(Glint x, GLint y, GLsizei w, Glsizei h);

Default viewport corresponds to entire window drawable area.

ClippingWindow

Doing it in OpenGL.Doing it in OpenGL.

For 2D drawing the world window is set by For 2D drawing the world window is set by the function the function gluOrtho2gluOrtho2D(), and the viewport D(), and the viewport is set by the function is set by the function glViewporglViewport().t().

void gluOrtho2D(GLdouble left, GLdouble right, GLdouble bottom, Gldouble top);

void glViewport(GLint x, GLint y, GLint width, GLint height);

By default the viewport is the entire screen window: if W and H are the width and height of the screen window, respectively, the default viewport has lower left corner at (0, 0) and upper right corner at (W, H).

Example: Drawing a houseExample: Drawing a houseAssume the screen Window size is 200x200

glOrtho(0.0, 10.0, 0.0, 15.0, -1.0, 1.0); //world window

Five vertices0 010 010 105 150 10

glViewport(0,0,100,100)

Not specifying viewport

A distortA distorteded house house

glViewport(0,0, 200,100) glViewport(0,0, 200,100)

Remember window size Remember window size is 200x200is 200x200

Distorted with respect to Distorted with respect to the original picture that the original picture that were shown in the full were shown in the full viewing window (check viewing window (check the aspect ratio)the aspect ratio)

Proportionality forces the mappings to Proportionality forces the mappings to have a have a linear linear form:form:

sx sx = = A A * * x x + + C C

sy sy = = B B * * y y + D+ D

for some constants A, B, for some constants A, B, C C and D. The and D. The constants constants A A and and B B scale the scale the x x and and y y coordinates, and coordinates, and C C and and D D shift (or shift (or translate) translate) them.them.

Window to ViewPort Window to ViewPort TransformationTransformation

Because OpenGL uses matrices to set up all its Because OpenGL uses matrices to set up all its transformations, transformations, gluOrtho2gluOrtho2D() must be preceded D() must be preceded by two functions by two functions glMatrixMode(GL_PROJECTION) glMatrixMode(GL_PROJECTION) and and glLoadIdentitglLoadIdentity().y().

//Setwindow routine l, r, b, t//Setwindow routine l, r, b, tVoid setWindow(float, l, float r, float b, float t){Void setWindow(float, l, float r, float b, float t){

glMatrixMode(GL_PROJECTION);glMatrixMode(GL_PROJECTION);glLoadIdentity();glLoadIdentity();gluOrtho2D(l, r, b, t); // sets the window gluOrtho2D(l, r, b, t); // sets the window

}}

Tiling the screen window with Tiling the screen window with the dinosaur motif.the dinosaur motif.

Tiling the display with copies of Tiling the display with copies of the dinosaur.the dinosaur.

// set a fixed window (0, 640.0, 0, 480.0)// set a fixed window (0, 640.0, 0, 480.0)for(int i = 0; i < 5; i++) // for each columnfor(int i = 0; i < 5; i++) // for each column for(int j = 0; j < 5; j++) // for each rowfor(int j = 0; j < 5; j++) // for each row {{

glViewport(i * 64, j * 44, 64, 44); // set the next viewportglViewport(i * 64, j * 44, 64, 44); // set the next viewportdrawPolylineFile(drawPolylineFile(“d“dino.dat”); // draw it againino.dat”); // draw it again

}}

for(int i = 0; i < 5; i++) // for each columnfor(int i = 0; i < 5; i++) // for each column for(int j = 0; j < 5; j++) // for each rowfor(int j = 0; j < 5; j++) // for each row {{

if((i+j)%2) ==0)if((i+j)%2) ==0) ////set a fixed window (0, 640.0, 0, 480.0) using the set window routineset a fixed window (0, 640.0, 0, 480.0) using the set window routineelseelse

// set a fixed window (0, 640.0, 480.0, 0) //upside-down window// set a fixed window (0, 640.0, 480.0, 0) //upside-down windowglViewport(i * 64, j * 44, 64, 44); // set the next viewportglViewport(i * 64, j * 44, 64, 44); // set the next viewportdrawPolylineFile(drawPolylineFile(“d“dino.dat”); // draw it againino.dat”); // draw it again

}}

Drawing Dot with MouseDrawing Dot with Mouse

void myMouse(int button, int state, int x, int y)void myMouse(int button, int state, int x, int y)

{{ if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN)if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN)

drawDot(x, screenHeight -y);drawDot(x, screenHeight -y);

else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN)else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN)

exit(-1);exit(-1);

}}

drawDot rountine?drawDot rountine?

Void drawDot(GLint x Glint y){Void drawDot(GLint x Glint y){

glBegin(GL_POINTS):glBegin(GL_POINTS):

glVertex2i(x,y);glVertex2i(x,y);

glEnd;glEnd;

}}

Specifying a rectangle with Specifying a rectangle with the mouse.the mouse.

void myMouse(int button, int state, int x, int y){void myMouse(int button, int state, int x, int y){

static GLintPoint corner[2]; // a struct with GLint x and GLint ystatic GLintPoint corner[2]; // a struct with GLint x and GLint y

static int numCorners = 0; // initial value is 0static int numCorners = 0; // initial value is 0

if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN){if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN){

corner[numCorners].x = x;corner[numCorners].x = x;

corner[numCorners].y = screenHeight - y; // flip y coordinatecorner[numCorners].y = screenHeight - y; // flip y coordinate

numCorners++; // have another pointnumCorners++; // have another point

if(numCorners == 2){if(numCorners == 2){

glRecti(corner[0].x, corner[0].y, corner[1].x, corner[1].y); //write this glRecti(corner[0].x, corner[0].y, corner[1].x, corner[1].y); //write this //procedure yourself//procedure yourself

numCorners = 0; // back to 0 corners}}numCorners = 0; // back to 0 corners}}

else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN)else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN)

glClear(GL_COLOR_BUFFER_BIT); // clear the windowglClear(GL_COLOR_BUFFER_BIT); // clear the window

glFlush();glFlush();

}}

A polyline drawer based on A polyline drawer based on mouse clicks.mouse clicks.

void myMouse(int button, int state, int x, int y){void myMouse(int button, int state, int x, int y){

#define NUM 20#define NUM 20

static GLintPoint List[NUM];static GLintPoint List[NUM];

static int last = -1; // last index used so farstatic int last = -1; // last index used so far

// test for mouse button as well as for a full array// test for mouse button as well as for a full array

if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN && last < NUM -1){if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN && last < NUM -1){

List[++last].x = x; // add new point to listList[++last].x = x; // add new point to list

List[ last].y = screenHeight - y; // window height is 480List[ last].y = screenHeight - y; // window height is 480

glClear(GL_COLOR_BUFFER_BIT); // clear the screenglClear(GL_COLOR_BUFFER_BIT); // clear the screen

glBegin(GL_LINE_STRIP); // redraw the polylineglBegin(GL_LINE_STRIP); // redraw the polyline

for(int i = 0; i <= last; i++)for(int i = 0; i <= last; i++)

glVertex2i(List[i].x, List[i].y);glVertex2i(List[i].x, List[i].y);

glEnd();glEnd();

glFlush();glFlush();}}

else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN)else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN)

last = -1; // reset the list to emptylast = -1; // reset the list to empty

}}

Freehand drawing with a fat Freehand drawing with a fat brush.brush.

void myMovedMouse(int mouseX, int mouseY)void myMovedMouse(int mouseX, int mouseY)

{{

GLint x = mouseX; //grab the mouse positionGLint x = mouseX; //grab the mouse position

GLint y = screenHeight -mouseY; // flip it as usualGLint y = screenHeight -mouseY; // flip it as usual

GLint brushSize = 20;GLint brushSize = 20;

glRecti(x,y, x + brushSize, y + brushSize);glRecti(x,y, x + brushSize, y + brushSize);

glFlush();glFlush();

}}

An example of the keyboard An example of the keyboard callback functioncallback function

void myKeyboard(unsigned char theKey, int mouseX, int mouseY)void myKeyboard(unsigned char theKey, int mouseX, int mouseY)

{{GLint x = mouseX;GLint x = mouseX;

GLint y = screenHeight - mouseY; // flip the y value as alwaysGLint y = screenHeight - mouseY; // flip the y value as always

switch(theKey)switch(theKey)

{{

case case ‘‘p’:p’: drawDot(x, y); // draw a dot at the mouse positiondrawDot(x, y); // draw a dot at the mouse position

break;break;

case case ‘‘E’: exit(-1); //terminate the programE’: exit(-1); //terminate the program

default: break; // do nothingdefault: break; // do nothing

}}}}