INT32GP Graphics Programming: Tutorial #06
Managing World Coordinates and Viewports, N-gons

B1.11 3:00pm Tue 13 Aug 02
B1.11 12midday Wed 14 Aug 02
Start with the star or elephant program you coded in tutorial #04. If you do not have your own program you may wish to start with star2.c.
Upside Down and Back to Front
Turn the image upside down when a user presses 'u' or back to front when a user presses 'b'. Note: This exercise is more visually effective if you manipulate the elephant rather than the star.
  1. Add a keyboard callback to the bottom of void setUpGLUT(int argc,char ** argv) .
    glutKeyboardFunc(keyboard);
  2. Write the keyboard function and a function to reverse the coordinates(or copy and paste the code below).
    void reverse(int coordinate){
       /*
       ** Reverse the coordinates of the world window
       ** so that the image turns back to front or
       ** upside down. Note: x and y are enumerated
       ** data types declared globally.
       ** IN: value indicating whether to reverse the
       **     x or y coordinates.
       */
       GLdouble temp;
       if(coordinate==y){
          temp=yTop;
          yTop=yBottom;
          yBottom=temp;
       }
       else{
          temp=xLeft;
          xLeft=xRight;
          xRight=temp;
       }
    }
    void keyboard(unsigned char key,int xMouse,int yMouse){
       switch(key){
          case 27: exit(0);
          case 'u':reverse(y); break;
          case 'b':reverse(x); break;
       }
       glutPostRedisplay();
    }
  3. Locate the following code in void reshape(int w,int h) and move it to the top of void display().
       /* Tell OpenGL to clear out whatever is in
       ** the PROJECTION matrix and (re)set
       ** the abstract world coordinates.
       */
       glMatrixMode(GL_PROJECTION);
       glLoadIdentity();
       gluOrtho2D(xLeft,xRight,yBottom,yTop);
       /*
       ** It is a good programming habit to return the
       ** matrix mode to the default MODELVIEW matrix.
       */
       glMatrixMode(GL_MODELVIEW);
       glLoadIdentity();

Interactively Moving the World Window
Move the x-coordinates of the world window left when a user presses the the right arrow key.
Note: We will use a callback to glutSpecialFunc(void (*func)(int key,int xMouse,int yMouse) to detect keyboard input from special keys, such as the GLUT_KEY_RIGHT. For a complete list of the special keys that GLUT can detect, consult the GLUT API.
  1. Add a keyboard callback to the bottom of void setUpGLUT(int argc,char ** argv) .
    glutSpecialFunc(specialKeys);
  2. Write the code for the specialKeys callback (or copy and paste the code below).
    void specialKeys(int key,int xMouse,int yMouse){
       switch(key){
          case GLUT_KEY_RIGHT: xLeft-=0.1; xRight-=0.1; break;
       }
       glutPostRedisplay();
    }
  3. Observe how moving the x-coordinates left appears to cause the image to move right.
  4. Add your own code to move the x-coordinates right (image left) in response to input from GLUT_KEY_LEFT.
  5. Add similar code of your own to move the image up and down in response to GLUT_KEY_UP and GLUT_KEY_DOWN.
Many Viewports
Set up 3 viewports of equal size in one GLUT window. Render the image using a different colour for each viewport.
  1. Replace void renderView() with three functions, one for each view. Use the code below if you like.
    void bottomView(){
       glViewport(xOrigin,yOrigin,width,height/3);
       glColor3dv(colour[red]);
       render(star,starSize,GL_LINE_LOOP);
    }
    void middleView(){
       glViewport(xOrigin,height/3,width,height/3);
       glColor3dv(colour[cyan]);
       render(star,starSize,GL_LINE_LOOP);
    }
    void topView(){
       glViewport(xOrigin,height/3*2,width,height/3);
       glColor3dv(colour[green]);
       render(star,starSize,GL_LINE_LOOP);
    }
  2. Call each of these functions from void display(), after clearing the GL_COLOR_BUFFER_BIT and before glFlush();.
  3. When you turn the the images upside down, do they respond as expected to the up and down arrow keys?
N-gons
Replace the image in the middle viewport with that of a filled equilateral triangle. Replace the image in the top viewport with an outline of a circle.
  1. Set up vertex arrays for the triangle and circle using the algorithm and code discussed in tutorial #05.
  2. Edit the void middleView()and void topView() functions, making appropriate changes to render the triangle and circle (as discussed in tutorial #05).
Advanced
  1. Create images using arcs of a circle based on the algorithm you developed for tutorial #05.
Fran Soddell email:F.Soddell@bendigo.latrobe.edu.au
last updated 08 August 2002