INT32GP Graphics Programming: Tutorial #04
Star and Elephant

In tutorial #03 you worked out the coordinates of vertices representing a star and an elephant. In this tutorial you will develop programs to display outlines of these objects. You will also fill the star with colour using GL_TRIANGLE_FAN or your own algorithm.

The Star
Start with the example program, star1. This renders the outline of a star. However, only a small portion of the star is visible.

1. The program uses the OpenGL default coordinate system. The middle of the window is the point (0.0,0.0), the bottom left-hand corner is (-1.0,-1.0) and the top right-hand corner is (1.0,1.0). This does not suit the coordinates of the vertices of the star as seen below.

   typedef GLdouble vertexType [2];
   int starSize=10;
   vertexType star[]={
      {0.8,0.1},{1.95,1.1},{3.2,0.4},
      {2.6,1.9},{3.5,2.9},{2.2,2.7},
      {1.6,3.8},{1.3,2.6},{0.1,2.3},
      {1.1,1.6}
   };

2. To better suit these vertices, set up a coordinate system where the bottom left-hand corner of the window is the point (0.0,0.0) and the top right-hand corner is (4.0,4.0).
   • First define the following variables globally at the top of the program.

     /*
     ** coordinate system management
     */
     GLdouble xLeft=0.0;
     GLdouble xRight=4.0;
     GLdouble yBottom=0.0;
     GLdouble yTop=4.0;

   • Add the following code to the bottom of the function void initialiseGL(). Compile and run the program again. The star should now be centred in the window.

        glMatrixMode(GL_PROJECTION);
        glLoadIdentity();
        gluOrtho2D(xLeft,xRight,yBottom,yTop);

3. Change the values for the coordinate system so that xRight=5.0 and yTop=20.0. What happens to the star? Try different values of your own.
4. In the array, star, change the coordinates of the vertices to those that you worked out in the tutorial.
5. Work out a corresponding coordinate system and change the values of xLeft, xRight, yBottom and yTop to suit it.
6. While the program is running resize the window. Notice that the star is pushed out of shape. One way to retain the proportion of the star is to change the viewport in the window so that it is always a square.
   • First register a reshape callback with GLUT. Add the following code to the bottom of the function void setUpGLUT(int argc,char ** argv). This function will be called whenever the window is displayed or redisplayed.

        glutReshapeFunc(reshape);

   • Insert the following code into the program (above the function setUpGLUT). Every time the window is resized, GLUT passes the new width and height to the function. The code changes the dimensions of the viewport so that the sides are always the same and equal to the shorter side of the window (so the whole star is always visible).

     void reshape(int w,int h){
        if(w < h)
           h = w;
        else
           w = h;
        glMatrixMode(GL_MODELVIEW);
        glLoadIdentity();
        glViewport(0,0,w,h);
     
     }

   • Change the code so that the viewport is a square with sides equal to the longer side of the window. Now the star should retain its correct proportions but the whole star will not always be visible.

1. Replace the star array with an elephant array containing the coordinates for the vertices that outline the elephant (worked out for tutorial #03).
2. Make corresponding changes to the code in void renderView() so that the outline of the elephant will be displayed.
3. Work out an appropriate coordinate system so that the elephant will be centred in the window and change the values of xLeft, xRight, yBottom and yTop to suit.
4. Define arrays for the vertices that represent the outline of the foot, ear, tail and eye.
5. Add code to render these features. Use GL_POINTS for the eye.

   glBegin(GL_TRIANGLE_FAN);
      glVertex2d(2.0,2.0);
      for(i=0;i<starSize;i++)
         glVertex2dv(star[i]);
      glVertex2dv(star[0]);
   glEnd();

Fran Soddell      last updated 05 August 2002 F.Soddell@bendigo.latrobe.edu.au