CSE 457: Introduction to Computer Graphics

Project 0 help session

This page is here to help you become familiar with the SGI Indy workstations as quickly as possible. The following are quick tutorials for using subsets of OpenGL, libui, and CaseVision -- basically enough to get you through project 0 -- and, for those of you who have not created your own home page, there is a tutorial for creating a very basic one, as well.

Even driven programming tutorial

Lecture slides.

OpenGL tutorial

OpenGL - 2D/3D Graphics Library developed at Silicon Graphics Inc.

Basic features:

Other features:

Graphics Primitives
Graphics primitives (points, squares, lines) are one thing you'll use OpenGL for: mainly to draw zoom boxes and vectors. Here's a brief introduction (you'll find more in the man pages and reference manuals)

Example Code -- primitives: The following bits of code show you how draw single-pixel dots, a triangle outline (see OpenGL manual for other ways to do this), and a filled triangle (as a three-sided polygon). 


  uiSetCurrentWindow( drawWind, 0 ); // libui call
  glColor3f( red, green, blue );    

  // drawing a single-pixel dot to the 
  // window, at pixel coordinate (x,y)
  glBegin( GL_POINTS );
  glVertex2i( x, y );
  glEnd();

  // drawing an outlined triangle (many ways to 
  // do this) having vertices A, B, and C
  glBegin( GL_LINE_STRIP );
  glVertex2i( Ax, Ay );
  glVertex2i( Bx, By );
  glVertex2i( Cx, Cy );
  glVertex2i( Ax, Ay );
  glEnd();

  // drawing a filled triangle having 
  // vertices A, B, and C
  glBegin( GL_POLYGON );
  glVertex2i( Ax, Ay );
  glVertex2i( Bx, By );
  glVertex2i( Cx, Cy );
  glEnd();

  glFlush();   // don't forget this!

Drawing images and other data You could draw images one pixel at a time -- setting the color each time, telling OpenGL to explicitly draw each pixel at each coordinate -- but this would be very inefficient and doesn't always work anyway. That's why OpenGL provides the following routines (and others).

The main routines:

Other useful ones:

Example Code: raster routines 

  // this routine will read the data from one window,
  // and draw it on another

  // allocates a chunk of memory to store enough data for 3 channels (r,g,b)
  // of data for width*height pixels
  unsigned char data[DRAW_HEIGHT][DRAW_WIDTH][3]

  // read the data on one window
  uiSetCurrentWindow( drawWind, uiNormal );     // libui call
  glReadBuffer( GL_FRONT );
  glReadPixels( 0, 0, DRAW_WIDTH, DRAW_HEIGHT, GL_RGB, GL_UNSIGNED_BYTE,
                &data[0][0][0] );
  
  // now send it back out
  uiSetCurrentWindow( otherWind, uiNormal );    // libui call
  // set the right buffer and the right position, just in case
  glDrawBuffer( GL_FRONT );
  glRasterPos2i( 0, 0 );
  glDrawPixels( DRAW_WIDTH, DRAW_HEIGHT, GL_RGB, GL_UNSIGNED_BYTE,
                &data[0][0][0] );

Notice that this example uses data stored as three bytes representing RGB (24-bit) color. Since you'll be using indexed color for project 0, you'll want to see the documentation for glReadPixels and glDrawPixels for how to handle this.

Handling exposure events two schools:

libui tutorial

Libui is fully documented on the web (libui documentation), and you really don't need to know much about libui to handle the basics of project 0.

Some example procedures:

Example uses: 


  // following OpenGL calls will draw to 
  // normal (vs overlay plane) buffer of my_window
  uiSetCurrentWindow( my_window, uiNormal ); 

  // read the current slider value
  value = uiGetSliderValue( mySlider );

  // to add a button to the GUI that,
  // when pushed, evokes my_Callback
  uiAddButton( "my_button", my_Callback );

Look at the documentation and starting-point project 0 for more information on how to use these procedures.

CaseVision tutorial

CaseVision is a very handy graphical debugging tool that will help you greatly. Unfortunately (and quite ironically), it has a few bugs. These are namely in how it handles killing processes, so be sure to check for stray ones. Also, there are a few problems in debugging C++ code, but it should be fine for projects 0 through 2.

Mandelbrot hints

You'll be filling in three procedures, this is basically what they do:

For the bells and whistles, you'll want to check with the OpenGL reference manual (which is available on the Indys -- from the toolchest in the upper left corner, select Help / Online Books, and the libui documentation.

You can also find a truckload of information on fractals on the web (use your favorite search engine); here's a few, anyway:

Home page tutorial

  1. Take a picture of yourself

  2. Make a www sub-directory in your home directory on lynx, wolf, or grizzly, and move your .gif image into the new directory.

    You can reach your home directory (on wolf/lynx/grizzly) from the SGI's with: 

    /homes/iws/yourname

    You cannot, however, reach the SGI directories from wolf/lynx/grizzly.

  3. For starters look at one of the TA's or a friends home page (or click here for a dummy page), and save the HTML source for that page by choosing the File/Save As menu option and then selecting the HTML format. Load the file into a text editor and modify it to your liking, and save it as index.html in your www directory. There will be a line of HTML text like
    < img src="tas_name.gif">

    that you should change to
    < img src="your_name.gif">

  4. Access

  5. Browse the web to get ideas for your home page, and when you find one you like, select the File/View Source menu option to see the HTML source code will appear in the window. This is a great way to learn the features of HTML -- well, the way I learned.

  6. For an official HTML primer, click here

Send questions or comments to Fred Pighin (pighin@cs.washington.edu)