Project 0 - The Cow
ECS175: Computer Graphics
Due 7pm Fri April 7

Updates in GREEN below.

Your first assignment is to compile and run an OpenGL program that reads and displays an image, and then get it to read and display an image of you. Then you can draw onto the image using OpenGL. And finally, take a picture of the image that we can put on a Web page so we can get to know you.

The main purpose of this assignment is to encourage you to figure out how to use OpenGL and the GLUT on your computer at home, so it will be easy to do future assignments. We can't of course check to see if you've done this, but we really recommend it. Also we want to be sure you can read in images both on the machines in the lab and at home.

Some additional goals are to let you fool around with xv in the lab, and other image processing tools, and to let you play with OpenGL before we get down to the serious business of understanding how it works.

Since this assignment is about getting your system working and playing around, we will grade it pass/no pass.

Step 1: Compile and run the program.

The files below contain an OpenGL program that reads a picture of a cow in .bmp format, and displays it on the screen. It runs on the Linux machines in Kemper 67.


You should check that you can compile and run the program in Kemper 67, and then that you can compile and run it at home. If you have Windows or OSX, you should have OpenGL installed already. This program uses the GLUT library to connect OpenGL to the OS (bring up windows, handle keystrokes, etc). You may need to install the GLUT. See the GLUT links on the main course Web page. Also NeHe tutorials 1-4 might be helpful (again, see the class Web page). If you find other useful Web resources, write to the class newsgroup about them (ucd.class.ecs175 on

Warning - if you cut and paste the Makefile from the Web page into a file, it replaces tabs with spaces, which causes it not to work (awful, I know). Be sure to save the Web page to a file instead.

You might have to change two lines of the program, in readBMP.c. Some machines ("big endian") store computer words with the most-significat byte first, while other ("little endian") store the least-signifiacnt byte first. Since after we read the image we store it an array of words, it makes a big difference which byte of memory we put a byte from the file into. If your machine at home is little-endian, you'll need to comment out the lines that store a word in big-endian format and uncomment the lines that store a word in little-endian. You have to do this in TWO PLACES.

Step 2: Read in an image of yourself.

Replace the cow with a picture of yourself. We want to make a photo gallery of the class so we can get to know each other, so we'd really like a picture in which we can see your face, but do what you can.

It's likely that a digital photograph of you will not be in .bmp format, but in some other format like .jpeg or .tiff (.jpg or .tif). You might have an image manipulation program that converts it on your computer. One good one for Windows is Irfanview. Or, you can convert it in the lab using xv. If your picture is bigger than 320x240 pixels, shrink or crop it down to 320x240 (again using an image manipulation program).

Now make sure you can read and display the image of you using the OpenGL program.

Step3 - Get creative

Take a look at the beginning of Chapter 2 (pages 29-48) in the OpenGL Programming guide for the basics of drawing polygons and lines. Then try putting some OpenGL drawing commands in the "display" function of showBMP.c. What to draw? Up to you. A hat on your head with a big flower? One easy idea is to draw a picture frame around your photo.

The window in this program has x from 0-n and y from 0-m, where (n,m) is the size of the image in pixels. So you should draw objects within this range of (x,y) coordinates.

Question to think about: What would happen if you put additional drawing commands *before* the glDrawPixels command, instead of after?

If you want to try color animation, like the demo in class, take a look at the example at the end of Chapter 1 in the OpenGL Programming Guide, for an example of an OpenGL program with animation.

Step 4: Make a .bmp file of your output image.

For our Web page, we need you to make a little .bmp version of your final picture. On the machines in the lab, start xv, and with the `grab window' option, off the `Grab' button, get the image in your OpenGL window into xv. If it's not already 320x240, shrink it down to that size. Finally, save the image, as a .bmp file. Name it after your username, for instance mine would be "amenta.bmp".