Exercise 1: Getting Started

This exercise will take you through first steps in compiling and runing a C program,
compiling a simple OpenGL program and basics of OpenGL/GLUT.

---

Setting up

Before you begin with the exercises:
(i) make a directory for the cgi course and exercise 1 using the following unix commands:
cd
mkdir cgi
cd cgi
mkdir ex1
cd ex1

(ii) copy the exercise source code to your directory
    cp /vol/www/ee/Teaching/Courses/CGI/exercise1/*  .

Now you're ready to get started

---

1. Hello World

This exercise covers the basics of compiling and running a  C program under Unix.
If you are already confident with C/Unix then please jump to exercise 2.

Start in directory cgi/ex1    (cd ~/cgi/ex1)

(i) Open the program "hello.c" in an editor of your choise (ie xemacs hello.c)
    - this program is a very basic C program containing only the main() function

(ii) Compile the program using the unix make command:
make -f make_hello

    - the file 'make_hello' is a make file which identifies the source file name to be compiled and
      the target object 'hello.o' and executable 'hello' filenames.

(iii) Run the program:
./hello

    - you should get a print out 'hello world'  from you program.

---

2. First OpenGL program

Now try compiling and running a first OpenGL program.
You may experience difficulties due to differences in Unix setup between users
- don't panic, please ask a demonstrator to help sort out the problems and get you started.

Start in directory cgi/ex1

(i) Open the program  "square.c"
    This is a simple OpenGL program using the GLUT utility toolkit to create and manage windows.
    The program consists of three functions, please familiarise yourself with the program layout
main() - initialise GLUT window manager
              - register a function 'display()' for drawing glutDisplayFunc(display)
              - call function to initialise OpenGL
              - loop while the program is executing glutMainLoop()
initgl() - initialise OpenGL state
    display() - callback function to draw a square

(ii) Compile and run the program
    make -f make_square
./square

    A window should now popup containing a red square - you've now run your 1st OpenGL program.

(iii)  Have a go!
    - Change the square to a pentagon by adding one more vertex
    - Change the colour of the square to green  (colours are specified as glColor3f(red,green,blue))
    - Change the background colour to blue (glClearColor(red,green,blue,alpha))

---

3. Simple Interaction

This exercise extends the previous program to implement a simple interactive animation.

Starting with the previous program "square.c"

(i) Add a new callback in the main() function to allow mouse interaction
    ...
glutDisplayFunc(display);
glutMouseFunc(mouse);       /* callback  function mouse */
    ....

(ii) Now add a callback function as follows  which will change the square colour on mouse click.
     If you add this function at the end of the program remember to pre-declare the function name
     at the start (along with initgl(), display() function declarations).

void mouse(int button, int state, int x, int y)
   {
       switch (button) {
          case GLUT_LEFT_BUTTON:
             if (state == GLUT_DOWN)
                     glColor3f(0.0,0.0,1.0);
             break;
           case GLUT_RIGHT_BUTTON:
               if (state == GLUT_DOWN)
                     glColor3f(0.0,1.0,0.0);
            break;
                default:
            break;
        }
glutPostRedisplay();       /* call display callback function */
    }

(iii) Compile and run the modified program

     Clicking the left mouse button should now change the square colour to red and clicking the
     right button to green.

The beginnings of an interactive computer graphics application.

---

4. First Animation

In this exercise we again modify the "square.c" program to animate the square.

(i) Open the program "square_anim.c"
    Look for the modifications that have been made, the most important ones are as follows
     - a static variable 'spin' has been added which is visible to all functions
     - a new function spinDisplay() has been added to increment the variable 'spin'
     - the mouse() function has been modified by adding a function to glutIdleFunc()
       which specifies a function to be called when the display is idle
    - the display() function has been modified to change the viewing matrix accoring to the angle 'spin'

(ii) Compile and run the program

Pressing the left mouse button starts the animation, right mouse button to stop.

(iii) You will have noticed that the display is flickers.
      The program use a single buffer to update and display the image.
      To avoid the flicker we use double buffering, whilst one buffer is displayed the other is updated,
      the buffers are then swapped.

      To use double buffering modify the following:
       - initialise the OpenGL display mode to double buffering by setting the display to GLUT_DOUBLE
         rather than GLUT_SINGLE
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);
       - swap the buffers at the end of the display() instead of flushing the buffer
glutSwapBuffers();

      Now compile and run the program.
make -f make_square_anim
         ./square_anim

      The update should now be much smoother (without flicker)
      - the speed of the animation will depend on the time taken for the program to update and display
        the square on the screen.

(iv) Now modify the program to:
      - reverse the direction of rotation
      - change the colour of the square as it rotates
      - rotate the square about its centre

---