Project 3:
Color Ramps, Lights, and Materials
CS 445: Computer Graphics, Fall 2006

Reading

• Chp 5: Color and Blending
• Chp 6: Lights

Goals

• Use color ramps to represent scientific data.
• Understand how to use and create lights, materials, and shading.

Part 1: Color Ramps

In this part of the lab, you will examine precipitation data (alternatively, you may do temperatures) and present it in a way that could help someone, e.g. a meteorologist, understand and interpret the data.

The following may be found on the \\home\classes server (in gorr\cs445):

• RainData.java - class for reading in the precipitation data.
• RainPoint.java - data structure used by RainData to store a single data point.
• precip.clim.txt - the ascii file containing the precipitation data
• README.prcp.clim.html - information about what is stored in precip.clim.txt
• air_temp.clim.txt - - the ascii file containing the temperature data (this may be used instead of the precipitation data)
• README.temp.clim.html - information about air_temp.clim.txt

Create a top level folder in your netbeans project folder called "data". Place precip.clim.txt into that folder. RainData.java assumes that this is the path for the data file. If you place it somewhere else, you will need to make the appropriate change in RainData.java.

Begin by getting your code just to read in the data. Once that is done, please be sure to consider the following before you continue:

• Decide what you want to display, e.g. the annual precipitation, the rain in just one month, more, other? Note, there is a lot of data (over 19,000 data points) - start by just displaying a subset of the 19,000 points. Once you get the feel of what is going on, you can display more.
• You should use color ramps to identify the amount of precipitation. Recall that each discipline has its own interpretation of colors. You will need to look up the appropriate colors for representing rainfall and use them in your color ramp. For example, you can go look at a weather map.
• How should the locations (latitude, longitude) be displayed? For a small region, it might be appropriate to just think of latitude and longitude as (x,y) coordinates. However, if they are spread over a large part of the globe, you may want to map them to the surface of a sphere. Get a feel for the data; Identify where some the measurements were taken (e.g. google earth is a great way to do this - just enter the latitude and longitide (make sure the order is correct).
• Where should the camera be placed to best highlight the data. Should it be animated or controlled interactively?
• Should the user be given options for how to display the data (e.g through buttons, sliders, etc)

Due Dates:

• Be prepared to demo a substantial portion of your program to the class on Monday Oct 16. For example, by this time, you should have read in the data and plotted some of it using a color ramp. The final code will be due Monday Oct 23. Note we have an exam on Oct 18 and Midsemester day is on Oct 20.
• Zip together the final version of your code and email it to gorr no later than class time on Monday Oct 23. Include "CS445 Project 3, Part 1" in the subject line.

Part 2: Lighting and Shading the Teapot

Note, this part will not be turned in. It is intended to give you practice using lights and materials. Begin with SimpleOpenGL code with animation and a teapot, and try the following:

• Add a light

  gl.glEnable(gl.GL_COLOR_MATERIAL);  // uses glColor to set the color      
  gl.glEnable(GL.GL_LIGHT0);  
  gl.glEnable(GL.GL_LIGHTING);
  

• Set the location of the light using

  float[] lightPosition = {10.0f, 0.0f, 2.0f, 1.0f};
  gl.glLightfv(GL.GL_LIGHT0, GL.GL_POSITION, lightPosition,0);
  

• Get the light to orbit around the teapot.
• Get the light to stay still and have the teapot rotate.
• Set light parameters such as

  float[] lightAmbient = {0.4f, 0.4f, 0.4f, 1.0f};
  float[] lightDiffuse = {0.8f, 0.8f, 0.8f, 1.0f};
  float[] lightSpecular = {1.0f, 1.0f, 1.0f, 1.0f};
  gl.glLightfv(GL.GL_LIGHT0, GL.GL_AMBIENT, lightAmbient,0);
  gl.glLightfv(GL.GL_LIGHT0, GL.GL_DIFFUSE, lightDiffuse,0);
  gl.glLightfv(GL.GL_LIGHT0, GL.GL_SPECULAR, lightSpecular,0);
  

  Think about the meaning of ambient, diffuse, and specular; vary these parameters to see how the affect the image. Use these parameters to change the color of the light as well. Recall, if an RGB component of light is zero, then it zeros out that component of the surface color.
• Look at how varying the shading model affects the image:

  gl.glShadeModel(GL.GL_FLAT);
  

  vs

  gl.glShadeModel(GL.GL_SMOOTH);
  

• Comment out the line

  gl.glEnable(gl.GL_COLOR_MATERIAL)

  and instead create a material using

  gl.glMaterialfv(GL.GL_FRONT_AND_BACK, GL.GL_AMBIENT, amb,0);
  gl.glMaterialfv(GL.GL_FRONT_AND_BACK, GL.GL_DIFFUSE, diff,0);
  gl.glMaterialfv(GL.GL_FRONT_AND_BACK, GL.GL_SPECULAR, spec,0);
  gl.glMaterialf(GL.GL_FRONT_AND_BACK, GL.GL_SHININESS, shine);
  

  where amb, diff, and spec are arrays of length 4 and shine is a single float. Experiment with different values. Can you create materials that represent surfaces such as plastic or brass or whatever. Note, without real reflection (e.g. ray tracing), it is hard to create objects that really look shiny.

  All objects created after the above material properties are set, will have this material. If you want to use a second material, then you need to reset the parameters. In such a case, it helps to create your own Material class that stores values for a particular type of surface. Include a method that resets all of the above parameters (amb, diff, etc). This will make it easy to switch between materials.

  You can do the same with lights, i.e. create your own Light class that stores the parameters of a particular light. This helps to keep your code clean so that it is easy to read, modify, and reuse in a later program.

Part 3: Lights, Shading, and Normals

Begin with either the algebraic surface or the DEM that you created several weeks ago. If you don't have something you want to use, then begin with the code (steiner.java) on \\home\classes in gorr\cs445. Have the object rotate so we can see all sides of it.

Then do the following:

• Add a light and material. When you run the program, the surface will probably look black because you have not set the normals. The normals can be calculated by looking up the implicit form of the equation f(x,y,z), and computing its gradient. The normals are set as follows

  gl.glNormal3dv(norm,0);
  gl.glVertex3dv(point,0);
  

  where normal and point are each arrays of doubles (length 3). In your code, be sure to include the line

  gl.glEnable(GL.GL_NORMALIZE);
  

  to the init method in order to make sure the normals are normalized by opengl.
• Experiment with the lighting and materials so that the shape of the object is easy to see.

Due Date:

• Demo your program to the class on Monday Oct 30.
• Zip together the your project and email it to gorr no later than class time on Monday Oct 30. Include "CS445 Project 3, Part 3" in the subject line.