15-462 Computer Graphics I
Assignment 1 - Height Fields
100 points


Height fields are commonplace in computer graphics, from scientific visualization to terrain in video games. In this assignment, you will implement a program that loads in heightfield data from an image supplied on the command line and allows the user to view it interactively by rotating/translating/scaling it. After completion of your program, you will use it to create a simple animation.


A height field is a function that takes as input a two dimensional point and returns a value representing the orthagonal distance to a surface.

z = f(x,y)

In the general case, this is a rather tricky rendering problem. We will simplify the problem by defining the function in a piece-wise linear fashion. With one dimension as input, this would be akin to "connecting the dots" while moving along an axis:

Piecewise linear approximation of a sine wave

With two dimensions as input, we approximate our surface with triangles in 3D space. See the following examples for some source images and rendering results.

The image data loaded from the JPEG will have three intensity values for each pixel, representing red, green and blue, respectively. You may convert from color to height in any manner that you like, but be sure that all grey values (all three components have the same value) convert monotonically. The easiest way to do this is to simply pick one channel and scale it linearly, ignoring the other two.

The image library used for this assignment actually supports JPEG images with one, three, or four bitplanes--in other words, a single pixel may have either one, three, or four bytes for its intensity values. The above description assumes three bytes per pixel, and you may assume this as well, as this is by far the most common JPEG type you'll run into. However, for students interested in implementing a solution which handles any number of bitplanes, the number of bytes per pixel is stored in Pic->bpp (see pic.h for details).


The goal of this assignment is to get you comfortable with working in GL, as well as get you familiar with some basic 3D programming. Our starter code is exceedingly bare, and only provides you with the basic functionality to load a JPEG image and a rudimentary implementation of the mouse control we would like you to have. You must write the code to open up a window and begin rendering, as well as setup the proper camera transformations. We recommend that you do so through GLUT, and in particular by following the information provided in your copy of OpenGL: A Primer. You are free to use any other library you choose in lieu of GLUT (fltk,gtk,etc etc), but we will likely be unable to provide any support.

Our starter code for C is available here. You should make sure you can log in to the graphics cluster and compile the starter code sometime soon. Starter code for O'Caml may also be available within a few days, and will be posted here if so.

You are also free to use any language you like, but we will only actively support C (with some support for O'Caml) for this assignment, and we will require that your code compile and run in the graphics cluster.


  • You should become familiar with GL's viewing transformations before you attempt to solve the rendering problem. Try with a cube or some other simple object first.
  • Don't try to do this at the last minute. This assignment is supposed to be fun and relatively easy, but time pressure has a way of ruining that notion.
  • Make sure you can log in.


Program Requirements:

  • Handle at least a 256x256 image for your height field at interactive frame rates (>15fps with a window size of at least 640x480).
  • Ability to render as either points, lines("wireframe"), or filled triangles, with keys for the user to switch between the three.
  • Your code must render as a perspective view, and it must utilize GL's depth buffer for hidden surface removal.
  • Use input from the mouse to spin the heightfield around using glRotate.
  • Use input from the mouse to move the heightfield around using glTranslate.
  • Use input from the mouse to change the dimensions of the heightfield using glScale.
  • Color the vertices using some smooth gradient.
  • Code reasonably commented and written in an understandable manner--we will read your code.
  • Program submitted along with documentation of features and controls (making a readme.txt is a good idea) - calling attention to any extras you implement is a wise thing to do!
  • Program submitted along with frames for the required animation (see below).


  • Experiment with material and lighting properties.
  • Allow the user to interactively deform the landscape.
  • Color the vertices based on color values taken from another image of equal size.
  • Texturemap the surface with an arbitrary image.

For the very brave:

  • Level of detail (mip mapping/trilinear) to allow heightfields of significantly higher resolution.
  • Non-rectilinear geometry (not just by wiggling the points side to side).

Animation Requirement:

After finishing your program, you are required to submit an animation, represented by a series of JPEG images which are screenshots from your program. Functionality to output a screenshot is included in the starter code, and assumes you are using a window size of 640x480--your JPEG images must be this size. Please name your JPEG frames 00.jpg, 01.jpg, and so on, where 00.jpg is the first frame of your animation, and please do not exceed 100 frames. Expect a framerate of 15 frames per second. It's probably a good idea to test your animation by using animate ("man animate" for information) in the graphics cluster. This program takes a sequence of images and displays them as an animation, at your desired framerate. The method of generating your frames is left up to you, and you may use any software you wish to generate the source images for your height fields. The GIMP is available on graphics cluster machines (type "gimp" at a terminal prompt). You may also use your animation to show off any extra features you choose to implement. For some initial ideas, see last semester's movie.


Please submit your code along with your makefile and any other files used (images, etc) to /afs/andrew/scs/cs/15-462/students/your_andrew_id/, in a sub-directory called asst1. Running "make" in this directory should compile your program successfully, and your program should function properly when run from this directory--if not, you've left out a necessary file. Within this directory, make a sub-directory called movie, and place the frames for your animation within, numbered as described above.

Please adhere exactly to the guidelines for directory and file names for your program and your images. We will be generating a class movie with your image files, and need to run a script on them to do this--for it to work, all names must be uniform.

[ Home | Schedule | Assignments | Software | Resources ]

Frank Pfenning