CSE581 Lab1

CSE581 Lab1 - Drawing with mouse interaction and orthographic viewing

NOTE: more notes will be added to this page in the next few days

Due to popular demand, you can download my Lab 1 executable here

OBJECTIVE:
This lab is to introduce you to OpenGL programming, including:

setting up the synthetic camera and simple graphics elements in three-space
setting up 3D orthogonal projection
using a simple graphical object data structure to hold primitives and refresh the screen.
using mouse interaction to define and place primitives
using middle and right buttons to select attributes

PRELIIMINARIES:

My example code is in 'C'. You can use C++ or C to program your labs.
Submit source code that compiles and runs on the PCs in CL112D using the environment described in my notes on setting up glut in Visual Studio programmed in C/C++.
To submit a lab that uses anything other environment, you should get prior approval from the grader - it is up to him what other environments to handle, if any.
If there are special instructions to run your lab (there shouldn't be for this lab, but there might be for subsequent ones), include a README.txt with the files you submit.
Use the header from Lab 0, changing the header to say 'Lab 1' and being sure to edit in your name and email address

SPECIFICATIONS:

Set up an OpenGL display window of 500x500. Use a resize callback function that will issue an appropriate glViewport command.
Use pop-up menus with the middle and right mouse buttons. When one of several options is selected, Label the currently selected values using all capital letters non-selected primitives using all lowercase letters.
Use the middle mouse button to select graphic and background colors. The primitives are listed below with initial values.
- Graphic colors
  - YELLOW
  - cyan
  - magenta
  - black
- Background colors
  - RED
  - green
  - blue
  - white
Use the right mouse button to select an attribute in a submenu. These should be self-explanatory. Where numbers are needed, choose reasonable values. Re-label a currently selected attribute using all capital letters and non-selected attributes only have a capital first letter. The submenus and associated items are below. Initialize selections as below (the ones in all captial letters).
- clear data
- fill (toggles with 'nofill')
- Line thickness
  - THIN
  - Medium
  - Thick
- Graphic type
  - LINE
  - rectangle
  - circle
Use the left mouse button to define primitives in the window based on the current primitive type and according to current attributes selected. Each primitive is defined by 2 points (x, y coordinates): the line by its two endpoints, a rectangle (axis-aligned) by diagonally opposed points, a circle by two points on opposite sides of the circle..
Make the depth of all graphical primitives color dependent:
- yellow elements: z = 10
- cyan elements: z = 20
- magenta elements: z = 30
- black elements: z = 40
Place a camera far enough on the positive z-axis so that the black elements are in front (and closest) to the camera. Use orthogonal projection.
Create the OpenGL to screen mapping so that primitives drawn on the screen match the points selected on the screen to define them.
Allow the user to quit the program by typing 'q'

EXTRA CREDIT:

(5 pts) Add an arrow primitive; creat it from 3 points.
(5 pts) Redefine the camera so that the red elements are closest to the camera. Determine the mapping so that drawn primitives still match the points on the screen used to define them.
(5 pts) Use rubberbanding as you move the mouse to select the second primitive point. You can either press down on the left mouse button and rubber band until released - or click down then up and rubber band until clicked down again.
(5 pts) In your resize callback routine, use a viewport command that will produce no distortion in the graphics.

NOTES:

In your main routine:
- enable the OpenGl depth test (GLEnable)
- set the OpenGL MODELVIEW matrix and specify LookAt command (GLMatrixMode, glLoadIdentity,gluLookAt)
- set the OpenGL PROJECTION matrix to reflect the projection transformation ((GLMatrixMode, glLoadIdentity,glOrtho)
- register callback functions for resizing the window, keyboard imput, and mouse events
- set up the menus
Data structure
- You need to make a graphical data structure to hold the data that is interactively created. For example, the data could consist of: type, 2 points, color, fill type, thickness, depth. See the sample C structure below: For example, using C code to illustrate:
```
typedef struct primtives_struct {
  int       type;        // type of primitive
  float     r,g,b;       // color
  float     pnts[2][2];  // two points to define primitive geometry (x,y)
  float     depth;       // z-value for the points
  float     linewidth;   // line width
  ...
} primitives_td;

...

  primitives_td     primitives[20];

...
```
- You can assume there will not be more than 20 graphical primitives drawn.
- The main routine can initialize the attributes of the first entry with default values and set the 'current' entry to be the first entry.
- The user can change the attributes of the current entry by selecting menu items. The new attribute value is set in the current entry of the data structure.
- Every time the user selects the second of 2 points on the screen, your program should initialize the next entry in the structure array according to how the current attributes are set and then set the current entry to be the next entry.
Display
- The display() routine will traverse the structure array and draw each primitive (from the first entry up to the current entry minus one) to the screen.
- If the display window is resized, the graphics elements should stretch and compress as the display window does; Your resize function should record the new height and width and issue a viewport command so that the viewport is the entire display window.
- As a suggestion, use the space 0<x<1, 0<y<1 where you define the primitives. Use the appropriate Ortho command to view this space; map mouse input into the 0:1 space
Interaction
- To create the required menus, you will use the following commands:
  - int glutCreateMenu(void (*func)(int value));
  - void glutAddMenuEntry(char *name, int value);
  - void glutAddSubMenu(char *name, int menu);
  - void glutAttachMenu(int button);
- The routine to handle keyboard input only has to test if the key is the 'q' key and, if it is, exit the program.
- The routine to handle mouse movement should:
  - test if left button down
  - map the corrinates of the mouse to the 0:1 range. If the first point of the current element is not set, set it to the mapped x,y values and mark it as set. If the first point of the current element is set, set the second point to the mapped x,y values, initialize the next entry and advance the 'current element' indicator.
- The routine to process middle button events should switch on the option to set variables and update the menu appropriately
- The routine to process right button events should switch on the option toset variables and update the menu appropriately
- here's a tutorial on modifying a menu item. Note that it identifies a problem with modifying a menu item in Microsoft Windows. (thanks to Bryan Kunk for this pointer)
- You can determine what value a keystroke returns to your program by setting up the following keyboard callback routine and then hitting a few keys:
```
void processNormalKeys(unsigned char key, int x, int y) {
   printf("%d\n",key);
}
```
Program development
- I strongly suggest that you incrementally develop your program. Get something working, add a feature to it, make sure it works, add the next feature to it, make sure it works, etc. Graphics programs can be tough to debug. Try to make it easy on yourself. For example,
  - Step 1: set up just the basic viewing commands in the main program and have the display routine draw a rectangle. You can also code the reshape routine in this step.
  - Step 2: add code to the main routine to create some entries in your data structure and code the display routine to display graphic elements from the data structure
  - Step 3: add the mouse routine to process left button clicks. Every second click adds a filled, yellow, rectangle to the data structure.
  - Step 4: add the middle and right button interaction to be able to change the graphic element attributes and background color.
- You might add a 'Debug' item for the middle mouse button menu - this is not required, just a suggestion. When Debug is selected, toggle the debug flag (debug = 1-debug). When it's toggled on, you print out values to help you debug your program
```
if (debug == 1) printf(....
```
- For some labs, it might be useful to look at OpenGL's transformation matrices. For example, the following code snippet will print out the ModelView matrix.
```
  GLdouble matrix[16];
...
  glGetDoublev(GL_MODELVIEW_MATRIX,matrix);
  printf("model view matrix\n");
  for (i=0; i<4; i++) {
    for (j=0; j<4; j++) {
      printf( %f",matrix[j*4+i]);
    }
    printf("\n");
  }
```