1. Coordinate System

2. glOrtho?
glOrtho(0.0, 500.0, 0.0, 500.0, -1.0,1.0);
Set the viewing volume
Anything outside this volume will be clipped

3. Window Size glutInitWindowSize(320,240);
Set the display window
Can be any values
However, distortion can occur due to different aspect ratio (w/h)

4. Different window size
320, , 320

5. Coordinate system
the basic coordinate system of the screen window: coordinates that are essentially in pixels, extending from 0 to some value screenWidth -1 in x, and from 0 to some value screenHeight -1 in y.
Clearly we want to make a separation between the values we use in a program to describe the geometrical objects and the size and position of the pictures of them on the display.

6. World window and viewport
world coordinates: It is the usual Cartesian xy-coordinate system used in mathematics, based on whatever units are convenient.
We define a rectangular world window in these world coordinates. The world window specifies which part of the “world” should be drawn. The understanding is that whatever lies inside the window should be drawn; whatever lies outside should be clipped away and not drawn.
viewport is a rectangular in the screen window on the screen.

7. Viewport Transformation
MyWindow w
Clipping
Window h x y
void glViewport(Glint x, GLint y, GLsizei w, Glsizei h);
Default viewport corresponds to entire window drawable area.

8. Doing it in OpenGL.
For 2D drawing the world window is set by the function gluOrtho2D(), and the viewport is set by the function glViewport().
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).

9. Example: Drawing a house
Assume the screen Window size is 200x200
glOrtho(0.0, 10.0, 0.0, 15.0, -1.0, 1.0); //world window
Five vertices
0 0
10 0
10 10
5 15
0 10
glViewport(0,0,100,100)
Not specifying viewport

10. A distorted house glViewport(0,0, 200,100)
Remember window size is 200x200
Distorted with respect to the original picture that were shown in the full viewing window (check the aspect ratio)

11. Proportionality forces the mappings to have a linear form:
sx = A * x + C
sy = B * y + D
for some constants A, B, C and D. The constants A and B scale the x and y coordinates, and C and D shift (or translate) them.

14. Window to ViewPort Transformation

15. Because OpenGL uses matrices to set up all its transformations, gluOrtho2D() must be preceded by two functions glMatrixMode(GL_PROJECTION) and glLoadIdentity().
//Setwindow routine l, r, b, t
Void setWindow(float, l, float r, float b, float t){
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(l, r, b, t); // sets the window }

16. Tiling the screen window with the dinosaur motif.

17. Tiling the display with copies of the dinosaur.
// set a fixed window (0, 640.0, 0, 480.0)
for(int i = 0; i < 5; i++) // for each column
for(int j = 0; j < 5; j++) // for each row {
glViewport(i * 64, j * 44, 64, 44); // set the next viewport
drawPolylineFile(“dino.dat”); // draw it again }
if((i+j)%2) ==0)
//set a fixed window (0, 640.0, 0, 480.0) using the set window routine
else
// set a fixed window (0, 640.0, , 0) //upside-down window

18. Drawing Dot with Mouse
void myMouse(int button, int state, int x, int y) {
if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN)
drawDot(x, screenHeight -y);
else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN)
exit(-1); }
drawDot rountine?
Void drawDot(GLint x Glint y){
glBegin(GL_POINTS):
glVertex2i(x,y);
glEnd;

19. Specifying a rectangle with the mouse.
void myMouse(int button, int state, int x, int y){
static GLintPoint corner[2]; // a struct with GLint x and GLint y
static int numCorners = 0; // initial value is 0
if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN){
corner[numCorners].x = x;
corner[numCorners].y = screenHeight - y; // flip y coordinate
numCorners++; // have another point
if(numCorners == 2){
glRecti(corner[0].x, corner[0].y, corner[1].x, corner[1].y); //write this //procedure yourself
numCorners = 0; // back to 0 corners}}
else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN)
glClear(GL_COLOR_BUFFER_BIT); // clear the window
glFlush(); }

20. A polyline drawer based on mouse clicks.
void myMouse(int button, int state, int x, int y){
#define NUM 20
static GLintPoint List[NUM];
static int last = -1; // last index used so far
// test for mouse button as well as for a full array
if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN && last < NUM -1){
List[++last].x = x; // add new point to list
List[ last].y = screenHeight - y; // window height is 480
glClear(GL_COLOR_BUFFER_BIT); // clear the screen
glBegin(GL_LINE_STRIP); // redraw the polyline
for(int i = 0; i <= last; i++)
glVertex2i(List[i].x, List[i].y);
glEnd();
glFlush();}
else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN)
last = -1; // reset the list to empty }

21. Freehand drawing with a fat brush.
void myMovedMouse(int mouseX, int mouseY) {
GLint x = mouseX; //grab the mouse position
GLint y = screenHeight -mouseY; // flip it as usual
GLint brushSize = 20;
glRecti(x,y, x + brushSize, y + brushSize);
glFlush(); }

22. An example of the keyboard callback function
void myKeyboard(unsigned char theKey, int mouseX, int mouseY) {
GLint x = mouseX;
GLint y = screenHeight - mouseY; // flip the y value as always
switch(theKey)
case ‘p’: drawDot(x, y); // draw a dot at the mouse position
break;
case ‘E’: exit(-1); //terminate the program
default: break; // do nothing }}