1. Computer Graphics CSCE 441
Dr. Scott Schaefer

2. Staff Instructor Dr. Scott Schaefer HRBB 527B
Office Hours: MW 10:00am – 11:00am
(or by appointment) TA
Lei He
ETB 2016 (knock on door)
Office Hours: R 10:00am – noon
F 1pm-3pm

3. Websites Course Page Piazza Discussion Board
Piazza Discussion Board

4. Why did you take this class?

5. Games

6. Movies

7. Visualization

8. Industrial Design

9. What will you learn in this class?
2D Graphics
Drawing lines, polygons
Fractals
3D Graphics
Transformations
Lighting
Ray Tracing
Solid Modeling
Splines/Subdivision

10. What you’re expected to know
Programming Experience
Assignments in C/C++
Simple Mathematics
Graphics is mathematics made visible

11. How much math? General geometry/linear algebra Matrices
Multiplication, inversion, determinant
Vectors
Dot product, cross product, linear independence

12. First Homework Assignment!
Linear Algebra Test
Complete before January 27, 2014
Take as many times as you like
Must get at least 90% correct
Grade = ActualGrade * (exam 90% ? 1 : 0 )

13. Other Assignments Simple Painting Program Polygon Drawing
Fractals and Iterated Affine Transformations
3D Rasterization and Hidden Surfaces
Ray Tracing

14. More on Assignments Turn in code via CSNET
(get an account if you don’t already have one)
Due by 11:59pm on day specified
Code, solution file, proj file and Win32 executable
Make your code readable (comment)
You may discuss concepts, but coding is individual (no “team coding” or web)

15. Grading
60% Assignments
15% Midterm
25% Final

16. Late Policy Penalty = m: number of minutes late percentage penalty
100 80 60
percentage penalty 40 20 1 2 3 4
days late

17. Textbooks

18. Suggested Reading

19. Introduction to OpenGL
What is OpenGL?
Computer-graphics API (application programming interface)
Developed by SGI in 1992
Efficient, streaming interface
250+ function calls for drawing 2D and 3D graphics
Hardware independent
Operating system independent
Direct3D alternative API from Microsoft

20. Introduction to OpenGL
What OpenGL is NOT
No commands for windowing
No commands for obtaining user input
No commands for anything except drawing on the screen

21. A Smidgen of OpenGL Code
# include <whateverYouNeed.h>
Main() {
IntializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f ( 1.0, 1.0, 1.0);
glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0);
glBegin (GL_POLYGON);
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
UpdateTheWindowAndCheckForEvents(); }
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.

22. A Smidgen of OpenGL Code
Sets the color for clearing the screen
# include <whateverYouNeed.h>
Main() {
IntializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f ( 1.0, 1.0, 1.0);
glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0);
glBegin (GL_POLYGON);
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
UpdateTheWindowAndCheckForEvents(); }
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.

23. A Smidgen of OpenGL Code
# include <whateverYouNeed.h>
Main() {
IntializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f ( 1.0, 1.0, 1.0);
glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0);
glBegin (GL_POLYGON);
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
UpdateTheWindowAndCheckForEvents(); }
Clears the screen
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.

24. A Smidgen of OpenGL Code
# include <whateverYouNeed.h>
Main() {
IntializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f ( 1.0, 1.0, 1.0);
glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0);
glBegin (GL_POLYGON);
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
UpdateTheWindowAndCheckForEvents(); }
Sets the current drawing color to white
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.

25. A Smidgen of OpenGL Code
# include <whateverYouNeed.h>
Main() {
IntializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f ( 1.0, 1.0, 1.0);
glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0);
glBegin (GL_POLYGON);
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
UpdateTheWindowAndCheckForEvents(); }
Sets the window coordinates to (0,0,-1) – (1,1,1)
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.

26. A Smidgen of OpenGL Code
# include <whateverYouNeed.h>
Main() {
IntializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f ( 1.0, 1.0, 1.0);
glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0);
glBegin (GL_POLYGON);
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
UpdateTheWindowAndCheckForEvents(); }
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.
Starts drawing a polygon

27. A Smidgen of OpenGL Code
# include <whateverYouNeed.h>
Main() {
IntializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f ( 1.0, 1.0, 1.0);
glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0);
glBegin (GL_POLYGON);
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
UpdateTheWindowAndCheckForEvents(); }
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.
Specifies the vertices of the polygon

28. A Smidgen of OpenGL Code
# include <whateverYouNeed.h>
Main() {
IntializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f ( 1.0, 1.0, 1.0);
glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0);
glBegin (GL_POLYGON);
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
UpdateTheWindowAndCheckForEvents(); }
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.
Ends the polygon

29. A Smidgen of OpenGL Code
# include <whateverYouNeed.h>
Main() {
IntializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f ( 1.0, 1.0, 1.0);
glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0);
glBegin (GL_POLYGON);
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
UpdateTheWindowAndCheckForEvents(); }
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.
Flushes all commands to ensure polygon is drawn

30. OpenGL Command Formats
glVertex3fv( v )
Prefix
Initial capital letters
Number of
components
Data Type
Vector
b - byte
ub - unsigned byte
s - short
us - unsigned short
i - int
ui - unsigned int
f - float
d - double
omit “v” for
scalar form
glVertex2f( x, y )
2 - (x,y)
3 - (x,y,z)
4 - (x,y,z,w)

31. OpenGL Geometric Primitives
All geometric primitives are specified by vertices
GL_LINE_STRIP
GL_LINE_LOOP
GL_POLYGON
GL_LINES
GL_POINTS
GL_TRIANGLE_STRIP
GL_QUAD_STRIP
GL_TRIANGLES
GL_QUADS
GL_TRIANGLE_FAN

32. OpenGL Drawing Functions
glBegin (GL_POINTS);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glVertex2iv (p6);
glEnd(); P6 P5 P1 P4 P2 P3

33. OpenGL Drawing Functions
glBegin (GL_LINES);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glVertex2iv (p6);
glEnd(); P6 P5 P1 P4 P2 P3

34. OpenGL Drawing Functions
glBegin (GL_LINE_STRIP);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glVertex2iv (p6);
glEnd(); P6 P5 P1 P4 P2 P3

35. OpenGL Drawing Functions
glBegin (GL_LINE_LOOP);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glVertex2iv (p6);
glEnd(); P6 P5 P1 P4 P2 P3

36. OpenGL Drawing Functions
glBegin (GL_POLYGON);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glVertex2iv (p6);
glEnd(); P6 P5 P1 P4 P2 P3

37. OpenGL Drawing Functions
glBegin (GL_TRIANGLES);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p6);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glEnd(); P6 P5 P1 P4 P2 P3

38. OpenGL Drawing Functions
glBegin (GL_TRIANGLES_STRIP);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p6);
glVertex2iv (p3);
glVertex2iv (p5);
glVertex2iv (p4);
glEnd(); P6 P5 P1 P4 P2 P3

39. OpenGL Drawing Functions
glBegin (GL_TRIANGLES_FAN);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glVertex2iv (p6);
glEnd(); P6 P5 P1 P4 P2 P3

40. OpenGL Drawing Functions
glBegin (GL_QUADS);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glVertex2iv (p6);
glVertex2iv (p7);
glVertex2iv (p8);
glEnd(); P8 P1 P4 P5 P2 P6 P3 P7

41. OpenGL Drawing Functions
glBegin (GL_QUADS_STRIP);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p4);
glVertex2iv (p3);
glVertex2iv (p5);
glVertex2iv (p6);
glVertex2iv (p8);
glVertex2iv (p7);
glEnd(); P8 P1 P4 P5 P2 P6 P3 P7

42. OpenGL-Related Libraries
GLU (OpenGL Utility Library)
- Part of OpenGL
- Provides higher-level drawing routines such as
Spheres, NURBS, tessellators, quadric shapes, etc…

43. OpenGL-Related Libraries
GLU (OpenGL Utility Library)
- Part of OpenGL
- Provides higher-level drawing routines such as
Spheres, NURBS, tessellators, quadric shapes, etc…
GLUT (OpenGL Utility Toolkit)
- perform system-level I/O with the host operating system
- cross platform
- portable windowing API
- not officially part of OpenGL

44. GLUT: OpenGL Utility Toolkit
Application Structure
Configure and open window
Initialize OpenGL state
Register input callback functions
render
resize
input: keyboard, mouse, etc.
Enter event processing loop

45. Sample Program void main( int argc, char* argv[]) {
glutInit (&argc, argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB );
glutInitWindowSize (250, 250);
glutInitWindowPosition (100, 100);
glutCreateWindow ( "HELLO");
init();
glutDisplayFunc ( display );
glutMainLoop(); }
/* OpenGL Initialization */
/* callback function */

46. GLUT Callback Functions
Routine to call when something happens
window resized, user input, window needs drawing, etc…
“Register” callbacks with GLUT
glutDisplayFunc( display );
glutIdleFunc( idle );
glutKeyboardFunc( keyboard );
glutMouseFunc( mouse );

47. Assignment 1 – Simple OpenGL/GLUT Application
Build a simple OpenGL/GLUT application
Designed to get you started using OpenGL and callbacks for interaction
Full description available on course webpage