This course ended on
December 12, 2017

CPSC 424: Introduction to Computer Graphics

      Department of Mathematics and Computer Science
      Hobart and William Smith Colleges

      Fall, 2017.

      Instructor:  David J. Eck  (

      Monday, Wednesday, Friday, 12:20–1:15 PM.  
         Room Gulick 2000 (formerly room number 206A).
           (Except for several Mondays in Rosenberg 009.)
      Lab: Thursday, 11:55–1:20.  Room Rosenberg 009.

      Course Handout:
Programming Labs
Lab 1, August 31
2D Transforms
Lab 2, September 7
HTML Canvas Graphics
Lab 3, September 14
Hierarchical Modeling
Lab 4, September 21
Into 3D
Lab 5, September 28
Start Midterm Project
Lab 6, October 5
Light and Material
Lab 7, October 12
Texture Images
Lab 8, October 19
Work on Midterm Projects
Lab 9, October 26
Intro to three.js
Lab 10, November 3
More Three.js
Lab 11, November 10
Lab 12, November 17
WebGL 3D / gl-matrix
Lab 13, November 30:
Procedural textures in WebGL  or  WebGL Game of Life
Application Labs
September 11: Gimp 1 September 18: Gimp 2 September 25: Inkscape
October 16: Blender 1 October 23: Blender 2 October 30: Blender 3
December 4: Blender 4


First Week: August 28 and 30; September 1

Welcome to the course!

The reading for the week is Chapter 1 and the first three sections of Chapter 2. Chapter 1 is a short overview of computer graphics. You should not expect to understand everything in it, but it will give you an idea of what will be covered in the course. Chapter 2 covers two-dimensional graphics, using several graphics systems.

You should read Section 3 before class on Wednesday. Be prepared to discuss it. The lab on Thursday will be based on Section 3. You should read Section 1 and Section 2 before class on Friday.

When you read the book, you should pay some attention to the interactive demos, which are meant to help the reader understant the concepts better. You can find them in the web-site version of the book. There are links to the demos in the linked PDF version.

Second Week: September 4, 6, and 8

This week will be about the API for 2D graphics on the Web. This is a JavaScript API for drawing on a "canvas" element on a web page. This means that we will first have to talk about JavaScript and web pages more generally. A brief overview of this background material is in Appendix A, Section 3. The 2D API for canvas graphics is covered in Chapter 2, Section 6.

(Here's the very simple first web page that we will look at in class.)

Third Week: September 11, 13, and 15

On Monday, September 11, the class will meet in the computer lab, Rosenberg 009, for a session with the Gimp image editing program.

The reading for the week is Section 2.4, which covers hierarchical graphics and scene graphs. We have already started talking about hierarchical graphics last Friday. We will discuss scene graphs this Wednesday in class.

On Friday, we should be able to discuss three-dimensional coordinate systems and 3D graphics. It would be a good idea to start reading ahead in Chapter 3.

Here is the little "growing trees" scene graph example from Wednesday's class, written in JavaScript: GrowingTrees.html

Fourth Week: September 18, 20, and 22

Monday's class will be in Rosenberg 009, for another session with Gimp.

You should read Sections 3.1, 3.2, 3.6, and A.2.

We started our discussion of 3D graphics on Friday. The material covered there is in Section 3.1 and Section 3.2: some basic parts of the OpenGL 1.1 API for color and drawing primitives, plus general ideas about 3D coordinates and transformations. On Wednesday, we will need to cover everything else that you need to know for Thursday's lab. That includes how to do transformations in OpenGL 1.1 and, in particular, how to implement hierarchical modeling with glPushMatrix and glPopMatrix. We will also have to talk about using GLUT to draw things like spheres and cones; this is covered in Section 3.6.

The OpenGL API works most naturally with C, so it's useful to know at least a little bit out C if you want to understand the API. Fortunately, the API is relatively easy C. Appendix A, Section 2 is a short introduction to C. It would be useful to know something about pointers and arrays in C (but not the really hard stuff).

Fifth Week: September 25, 27, and 29

You should finish reading Chapter 3, especially Section 3.3 and Section 3.4. It is important to be familiar with all of the various transformations that are applied in 3D graphics; these are covered in Section 3.3. That section also includes the idea of a "camera", which can make projection and viewing easier. Section 3.4 covers indexed face sets, which you have already encountered in Lab 4 without knowing the name. It also shows how glDrawArrays and glDrawElements are used for drawing, as a better alternative to glBegin/glEnd.

Section 3.5 is a short introduction to the linear algebra, the essential mathematics for computer graphics. You won't need to know this material in detail, but it is essential to be familiar with certain concepts: vectors and the idea that vectors have length and direction; the length of a vector and the idea of a unit vector; the dot product of two vectors and how it is related to the angle between the two vectors; and maybe the idea of homogeneous coordinates and why 4-by-4 matrices are used in computer graphics.

In this week's lab, you will start the midterm project, which is to design a scene graph API for OpenGL 1.1. I encourage people to work with a partner on this project. It would be a good idea to find a partner before coming to lab.

There is a test coming up next week, on Wednesday, October 4.

Sixth Week: October 2, 4, and 6

There is a test on Wednesday. A study guide was handed out last Friday in class.

On Friday, we began a discussion of light and material in OpenGL, which is covered in Chapter 4 in the textbook. We will continue with that this week. The reading for the week is Section 4.1 and Section 4.2. Section l;4.1 covered general ideas about lighting and the lighting calculations that are done in OpenGL 1.1, including the role of normal vectors. Section 4.2 covers the OpenGL 1.1 API for lights and materials. We should get a start on Section 4.3, image textures, by Friday.

The only work due this week is the work for the Inkscape lab, which should be turned in by Friday afternoon.

Seventh Week: October 11 and 13

There is no class on Monday this week because of Fall break.

On Wednesday, we will finish up OpenGL 1.1 lighting, and we will cover image textures and how they are used in JOGL (Section 4.3, omitting material on using textures in C). By Friday, we will move on to Section 4.4 for a brief discussion of how cameras and lights can be included in scene graphs. That section also covers the attribute stack, which can be used for saving and restoring sets of attributes such as lighting and material. The attribute stack can be useful when traversing a scene graph.

You should read Section 4.3 before lab on Thursday.

Next Monday, October 16, we will return to Rosenberg 009 for our first Blender Lab. Before Monday, you should read Section A.1, the first section of the appendix about Blender. The material in the appendix will not be repeated in the Blender handouts.

You should be thinking about your final project. Remember that you need to select with me and select a project topic by November 2.

Eighth Week: October 16, 18, and 20

After the first Blender lab on Monday, we started Chapter 5, which is a short introduction to three.js, a scene graph API for 3D graphics on the web. The reading was Section 5.1. Note that three.js has continued to develop in the two years since the textbook was written, and there are a few things in the book that will not work with the current version. Nevertheless, we will be working with the current version, release 87, in lab. The lab worksheets will be written to work with that version.

Ninth Week: October 23, 25, and 27

The second Blender lab, which is about more advanced modeling in Blender, will be on Monday in Rosenberg 009. On Wednesday and Friday, we will continue with three.js. The reading is Section 5.2 and Section 5.3.

Tenth Week: October 30; November 1 and 3

After the The third Blender lab on Monday, we will finish up with Three.js on Wednesday (even though we have not covered everything in Chapter 5. After that we move on to WebGL. You should finish reading Chapter 5, and you can read the first section of Chapter 6.

Remember that final project proposals are due in Friday.

Eleventh Week: November 6, 8, and 10

We started WebGL last Friday, and we will be continuing it for most of the rest of the semester. The reading for the week is Chapter 6, Sections 6.1 to 6.3. We will likely skip 6.4 and 6.5 for now, and move on to 3D graphics by Friday. We will return to Section 6.4, which covers textures, later. We might or might not cover 6.5 in class, but it would still be a good idea to read it.

Here is a link to the WebGL-colored-disks example that I handed out in class on Monday.

Twelfth Week: November 13, 15, and 17

There is a test this week, on Friday, November 17. A study guide will be handed out in class on Monday.

Aside from reviewing for the test, we will be moving on to Chapter 7, Section 7.1 and Section 7.2, which cover the implementation of basic 3D graphics in WebGL, including transformations and light and material. To help with transformations, we use gl-matrix.js, a JavaScript library for vector and matrix math in dimensions 2, 3, and 4.

Thirteenth Week: November 20

Because of Thanksgiving, the only class this week is on Monday.

We will continue with WebGL on Monday. You should read Section 6.4, which covers image textures.

Have a great Thanksgiving!

Fourteenth Week: November 27 and 29; December 1

As we approach the end of the semester, we will be looking at some more advanced graphics, without going into a lot of detail. We start with a few of the more advanced parts of WebGL (More advanced aspects of textures in Section 7.3, and Framebuffers in Section 7.4). Then we will move on to Chapter 8 for a brief look at ray tracing and path tracing.

Next Monday, December 4, we will be be Rosenberg 009 for one final Blender lab, about the Cycles renderer. Cycles is an alternative rendering engine for Blender that uses path tracing.

Here is a link to the completed WebGL Game of Life program that we looked at in class on Wednesday. Also, my solution to Lab 13 (procedural textures) is available.

Fifteenth Week and End of the Semester: December 4, 6, 8, and 12

On Monday, we will meet in Rosenberg 009 for a final Blender lab. On Wednesday, after a few more words about path tracing, we will look briefly at some of the advanced techniques that are used for efficient rendering in video games. Final project presentations will be on Thursday in lab and during the scheduled final exam period (Tuesday, December 12, at 7:00 PM). We might also have one or two presentations during class on Friday. Aside from that, we will spend Friday looking back at the course.

Here is a link to Adrian Courrèges' "GTA V Graphics Study" that we looked at in class on Wednesday.

My end-of-semester office hours are as follows:

          Saturday, December 9, 10:30 to 1:00
          Monday, December 11,  11:00 to 4:00
          Tuesday, December 12, 11:00 to 4:00