CPSC 324: Computer Graphics
First Lab
January 30, 2001

In this first lab, you'll take a brief look at each of the three graphics programs that we will be using in this course: POV-Ray, Gimp, and Blender. You'll also get a first look at programming with OpenGL.

Throughout the lab, you will find a number of Exercises. Although you will start some of them during the lab, these exercises are homework. They are due next Thursday, February 8. By that time, any parts of the exercises that are supposed to be on the Web should be there. Any parts of the exercises that are supposed to be turned in on paper should be turned in in class.

To begin the lab, sign onto your account on the math/cs network using X-Win32, and copy the folder /home/cs324/lab1 into your home directory, or a subdirectory of your home directory. You can copy the folder with the command:

cp  -r  /home/cs324/lab1  .


Remember that you are required to build a Web portfolio for this course. If you don't know anything about making Web pages, you should let me know as soon as possible. If you need a refresher on basic information, including how to add an image to a page, see Section 6.2 of my on-line Java textbook (http://math.hws.edu/javanotes/). I suggest that you make a subdirectory in the www directory in your account on math.hws.edu to hold your work for this course. The main page for your web portfolio can be a file called index.html. If the subdirectory is named graphics, for example, then the URL for the index page will be of one of the following forms:

http://math.hws.edu/~username/graphics/

or

http://math.hws.edu/user/username/graphics/

where username is your user name. (The form of the URL depends on how recently your account on math.hws.edu was created.)

Exercise 1: Start a web site for this course. You don't need to begin this during lab, but you might at least want to create the index file to make sure that you have the URL correct. Turn in the URL for the main page of your Web portfolio, in writing, as part of your homework next Thursday. A link to each student's Web portfolio will be posted on the web page for this course at http://math.hws.edu/eck/cs324/.


POV-Ray

The Persistence of Vision Ray-tracing program is used to create images using the advanced rendering technique called ray-tracing. It also has some support for radiosity rendering. We will not really use this program until the end of the term, but I would like you to at least try it out and see how it is used in case you want to experiment with it on your own. You will also use the images that it makes later in the lab.

In the lab1 folder that you copied into your account, you will find two POV-Ray input files, torus1.pov and skyvase.pov. These files contain scene descriptions written in POV-Ray's input language. The POV-Ray program is used to render the scenes that they describe. The torus1 file is a sample scene distributed with the Windows version of POV-Ray, and skyvase.pov is a scene that is used for POV-Ray benchmarking. (See http://www.haveland.com/povbench/.)

The command for running POV-Ray for Linux is either povray or x-povray. Use x-povray, unless you are on a text-only connection, because it shows a preview of the image while it is being rendered. To render the torus1.pov file, use the command:

x-povray  +Itorus1.pov

Note that the input file name is given after the command option "+I".

You will see a preview of the image as it is being rendered. After it is complete, the preview window will close and you will find a new file named torus1.png, which contains the image. The image is in a graphics format called PNG, which can be used directly by most newer web browsers.

You can add other command options to the x-povray command. Use "-D" if you don't want to see the preview, for example. See the povray man page for details. Most important, though, you can control the size of the image with the "H" and "W" command options. To render a 640-by-480 version of torus1.pov, for example, use

x-povray  +Itorus1.pov  +W640  +H480

No space is allowed between the "W" and "640" or between the "H" and "480".

You should make rendered images of both torus1.pov and skyvase.pov for use later in the lab.


The GIMP

The GIMP (the GNU Image-Processing program) is an advanced program for image manipulation. In this lab, we will avoid its advanced features, but you will get an idea for what it can do. Start the GIMP with the command "gimp". I suggest that you do this by hitting ALT-F2 and then entering gimp in the little box that pops up. The first time you run the GIMP, it wants to install some configuration files in your account. You should let it do this.

When the GIMP starts, you see its toolbox window, which contains some standard paint tools and a couple of menus. Use the Open command in the File menu to open the image sean.jpg in your lab1 directory. This is a picture of a former Hobart CS student, taken with a digital camera. It doesn't look very good.

After the image opens, you will find that right-clicking on the image brings up an extensive set of menus which contain much of the functionality of the GIMP. Go to the "Image" submenu, then "Color", then "Levels". This will open a dialog box. Click the "Auto" button in that dialog box. You should find that the image looks quite a bit better. This shows one way in which the GIMP can be used for enhancing photographs.

Now, open one of the rendered images from POV-Ray.

Right-click on the image and go to the "Filters" submenu. This sub-menu contains some commands that modify the image. Try out some of these on the image. Many of the operations will take some time to complete. There is a progress bar in the lower right corner of the window. You can undo an operation with CTRL-Z. Most of the operations will pop up a dialog box with settable parameters that affect the result. GIMPressionist (under Filters:Artistic) is particularly interesting. By the way, if you click on the dotted line at the top of any menu, the menu will be detached into a separate window that will stay open.

The entries under "Script-Fu:Decor" can also be used to modify the image. A Script-Fu is a script that applies a sequence of GIMP operations. Again, this can take some time to complete. Also, it might produce several "layers", which might confuse you when you try to apply other operations (since an operation only applies to one layer). To get rid of the layering, choose the "Flatten Image" command from the "Layers" menu. The "Old Photograph" Script-Fu has an interesting effect.

Exercise 2: Use GIMP to make several interesting images (at least three), by applying filters and/or script-fu's to torus1.png, skyvase.png, or sean.jpg. Save the images in JPEG form, using the "Save As" command in GIMP's file menu, and post the images on your Web page. Add a short description to each image, saying how it was created. (What filters were applied, for example.)

One of the things that won't work in the GIMP when you use it under X-Win32 is text. The fonts that GIMP wants to use are not available. However, you can do some interesting things with text...

Exercise 3: Come back outside of lab to create a logo for your web page. Work directly on one of the computers in the CS lab. Start up GIMP, and go to the "Xtns" menu at the top of the toolbox menu, then to the "Script-Fu" submenu, then to the "Logos" submenu. (You can open it as a separate window by clicking the dotted line at the top of the sub-menu.) Experiment with making logos, and select one for your Web page. You might need to "Flatten Image" before you can save the logo. Add the logo to the top of the main web page for your portfolio.


OpenGL

The file tri.c contains an OpenGL program that draws a triangle like the one we saw in class, but without the ability to rotate the triangle. To run the program, you must first compile it. You can use the command "mesacomp" to compile OpenGL programs. ("Mesa" is the name of the non-official OpenGL implementation that we are using.) If you say

mesacomp  tri.c

the compiled program will be placed in a file named "a.out", and you can run the program by typing a.out. The mesacomp command is actually defined as an alias for "g++ -lglut -lMesaGLU -lMesaGL -lX11 -lXmu -lXi -L/usr/X11R6/lib". This is just the g++ compiler command with references to the libraries that are required to use mesa, so you can add all the usual g++ command options. For example, if you want the compiled program to be named "triangle", you would use the "-o" option and say

mesacomp  -o  triangle  tri.c

Try compiling tri.c and then running the program. Edit tri.c to change what it draws. OpenGL doesn't include a command for drawing a circle, but here is a subroutine that will draw a many-sided polygon that approximates a circle (or, more properly speaking, a filled-in circle). You can try adding this to the program and using it to draw a circle:

   /* Give the OpenGL commands to draw a 60-sided regular polygon
    * that approximates a circle of the given radius, centered at (cx, cy).
    */
   void circle(float radius, float cx, float cy) {
      int degrees;
      float x,y;
      float deg2rad = 3.1415926/180.0;
      glBegin(GL_POLYGON);
        for (degrees = 0; degrees < 360; degrees += 6) {
           x = cx + radius * cos( degrees * deg2rad );
           y = cy + radius * sin( degrees * deg2rad );
           glVertex2f(x,y);
        }
      glEnd();
   }

Exercise 4: Write an OpenGL program that draws a simple two-dimensional scene (but significantly more complicated than a colored triangle!). You can base your program on tri.c, and just modify the display() function. Turn in your program in class next Thursday, February 8.

You are not required to post anything on your Web site for Exercise 4. However, if you want to post the picture that you draw, you can use the "ksnapshot" program. You can find this listed as "Snapshot" in the "Graphics" sub-menu of the "K" menu on your Linux desktop. (Or just hit ALT-F2 and type in the command "ksnapshot".) To capture the image of a single window, make sure that the option "Only grab the window that contains the cursor" is checked, and enter a non-zero delay. Click "Grab" and place the cursor over the window you want to grab. Click "Save" to save the captured image.


Blender

Blender is a 3D modeling and rendering program. We are not even going to try to use blender over the network, so close down X-Win32 and start up blender. You will find it on the PCCommon drive, in the cpsc324 directory. Just double-click the blender icon to start the program. (Note that you can also use blender directly on the CS lab machines. The 19-inch monitors are very nice for this. To use blender on one of the Linux machines, just type in the command "blender".)

For your first experience with Blender, you will work through "Getting Started", a free sample chapter from a new book on blender that has just been published. (It is available on-line as a pdf file, but its two-page layout makes it difficult to read on-line. I will attach a copy to the print-out of this lab sheet.)

Note that when this tutorial says "LMB", it means "left mouse button". Similarly, "GKEY" means the G key on the keyboard. If you are told to press MMB (middle mouse button), you will have to simulate it by pressing both mouse buttons at the same time, or possibly by holding down ALT and pressing the left mouse button.

The file "stage.blend" that you need for the tutorial is in the cpsc324 directory on PCCommon.

Exercise 5: The tutorial only has you add a sphere to the scene. Add several other objects to the stage. Try some different colors and textures. Save a rendered image of your scene in JPEG format and add it to your web portfolio. (To save an image in JPEG format, you must first select JPEG as the image format. To do this, go to the Display buttons (Hit F10). Find the JPEG button, and click it. Then use F3 (or the File menu) to save the image. Note that you will have to type in the file name and hit return twice in order to save the image.)


David Eck, January 2001