This course ended
December 19, 2015

CPSC 424: Introduction to Computer Graphics

      Department of Mathematics and Computer Science
      Hobart and William Smith Colleges

      Fall, 2015.

      Instructor:  David J. Eck  (

      Monday, Wednesday, Friday, 9:05–10:00 AM.  Room Gulick 206A.
      Lab: Thursday, 10:20–11:45.  Room Rosenberg 009.

      Course Handout:
Programming Labs
Lab 1, September 3
2D Transforms
Lab 2, September 10
HTML Canvas Graphics
Lab 3, September 17
Hierarchical Modeling
Lab4, September 24:
Into 3D with OpenGL
Lab5, October 1:
Start Midterm Project
Lab6, October 8:
Light and Material
Lab7, October 15:
Textures in JOGL
Lab 8, October 22:
Work on Midterm Projects
Lab9, October 29:
Lab 10, November 5:
More Three.js
Lab 11, November 12:
Intro to WebGL and GLSL
Lab 12, November 19:
WebGL 3D and glmatrix.js
Lab 13, December 3: The Game of Life in WebGL
Application Labs
September 14: Gimp 1 September 21: Gimp 2 September 28: Inkscape
October 19: Blender 1 October 26: Blender 2 November 2: Blender 3


First Week: August 30; September 1 and 3

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 and to ask (and answer) questions about 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 7, 9, and 11

This week, we start in on JavaScript, and we cover HTML canvas graphics. The reading for Monday is Section A.3 in Appendix A, which is a brief overview of the JavaScript language and how it is used on Web pages. For Wednesday, you should read Section 2.6, which covers canvas graphics.

On Friday, we will look briefly at SVG. The reading is Section 2.7, except for the last part about animation. (I decided not to talk about the details of Java Graphics2D, since we won't use them in the rest of the course. (Of course, we won't use SVG either, but it's more interesting to look at something new.))

Note: Next Monday, September 14, the class will meet in Rosenberg 009 to work with Gimp.

Third Week: September 14, 16, and 18

On Monday, September 14, the class meets in Rosenberg 009 for our first Gimp lab. We will also be in Rosenberg 009 for the next two Mondays, September 21 and 28.

The reading for the week is Section 2.4, on hierarchical graphics. The lab on Thursday will also cover hierarchical graphics in 2D. After this week, we will move on to 3D graphics. It is possible that we might start talking about 3D on Friday, if there is time.

Fourth Week: September 21, 23, and 25

We will have our second Gimp lab on Monday in Rosenberg 009.

We turned from 2D to 3D graphics last Friday. This week, we start in on OpenGL 1.1, which serves as our introduction to working in three dimensions. You will have a choice of writing your OpenGL programs in Java or in C. But in any case, you will need to know a little about C to follow the discussion of the API. Section A.2 in Appendix A is a short introduction to the C programming language.

The reading for the week is Chapter 3, Section 3.1, Section 3.2, and Section 3.6. You should read 3.1 before class on Wednesday and 3.2 before class on Friday. Section 3.6 discusses how to write OpenGL programs in C using GLUT and in Java using JOGL. You should be familiar with that section before lab on Thursday.

Fifth Week: September 28 and 30; October 2

On Monday, September 28, we will once again meet in Rosenberg 009. The Monday lab is a short introduction to Inkskcape, a 2D graphics program for "drawing" rather than "painting." Inkscape saves images in SVG format. The next Monday lab will be on October 19.

The goal for the week is to finish Chapter 3. You should read any parts of Chapter 3 that you have not already read.

The Thursday lab this week will be a little different, since you will use the lab period to start on your midterm project. The project is to design and implement a scene graph API for OpenGL 1.1. You are encouraged (though not required) to work on the project with a partner. I will not collect any work from this lab. The project itself is due on October 30.

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

Sixth Week: October 5, 7, and 9

The test is on Wednesday of this week. A study guide is available.

The reading for the week is Section 4.1 and Section 4.2. These sections cover the basic framework for light and material, and the OpenGL API that is used for light and material properties. Similar frameworks are used in many 3D graphics system. An important new concept is the idea of normal vectors, which are essential to lighting calculations. (We will have to do some general work on vectors; the material is in Section 3.5, which we didn't have time to cover last week.)

The lab on Thursday is about light and material in OpenGL. Remember that you should also be working on the midterm project. Now that we have encountered light and material, you can think about how you will support them in your API.

Seventh Week: October 14 and 16

This is no class on Monday, October 12, because of Fall break.

The reading for the week is to finish Chapter 4 in the textbook. Section 4.3 covers image textures. You should read it before class on Wednesday, if possible—and you should definitely read it before the lab on Thursday. Section 4.4 covers things that might be useful as you work on the scene graph API for the midterm project: the attribute stack and using lights and cameras in a scene graph.

Next Monday, the class meets in Rosenberg 009 for the first application lab on the 3D modeling and animation program, Blender. It is important that you read Section B.1 before the lab on Monday. That section has information that you will need in order to do the lab.

Eighth Week: October 19, 21, and 23

On Monday, October 19, the class meets in Rosenberg 009 for the first of three labs on blender.

Also on Monday, I will hand out a final project info sheet, including guidelines for the project and a long list of project ideas.

On Wednesday, I will finish with Chapter 4 and give a brief discussion of ray tracing and how it differs from OpenGL rendering. We will then move on to the next major topic of the course, three.js. You should start reading Chapter 5. Note that from this point on, programming will be in JavaScript. If you have not already carefully read Section A.3, you should do so now.

For the Thursday lab this week, you can work on your midterm project.

Ninth Week: October 26, 28, and 30

Monday's class is our second Blender lab, concentrating on modeling. We meet on Monday in Rosenberg 009.

On Wednesday and Friday, we will be working on Three.js. You should have read Section 5.1 and Section 5.2 before lab on Thursday. We will probably devote some time on Friday to a demonstration of Blender animation.

Tenth Week: November 2, 4, and 6

The final Blender lab is on Monday in Rosenberg 009. The lab on Thursday will again be on Three.js. But in lecture, we will get started on WebGL. The reading for the week is Section 6.1 and Section 6.2.

Eleventh Week: November 9, 11, and 13

We will continue with WebGL this week. The first reading for the week is Section 6.3, which covers GLSL. After that section, we will skip to Chapter 7 to get started on 3D graphics in WebGL. (We will return to Chapter 6 to cover image textures after that.) You should begin reading Section 7.1 and Section 7.2.

At the end of class on Monday, we looked at the example webgl-500-lines.html.

There is a test coming up on Friday of next week. On the syllabus, the test was scheduled for Wednesday, November 18, but we agreed in class to move it to Friday, November 20.

Twelfth Week: November 16, 18, and 20

There is a test this Friday, November 20. A study guide is available and was handed out in class on Monday.

Aside from the test, we will be continuing with Section 7.1 and Section 7.2. We will look at how the library gl-matrix.js can be used to implement the vector and matrix operations that are needed on the JavaScript side for 3D rendering in WebGL. And we will look at how to implement the lighting equation in a GLSL shader program.

Thirteenth Week: November 23

Monday is the only class day this week. Happy Thanksgiving!

On Monday, we will talk about image textures in WebGL, Section 6.4.

Fourteenth Week: November 30; December 2 and 4

We will continue to talk about textures, moving on to cubemap textures and bumpmaps by Wednesday. After that, we will cover Framebuffers, which will finish the material from the textbook. The reading is Chapter 7, Section 7.3 and Section 7.4.

Fifteenth Week and End-of-Term: December 7, 9, 11, and 18

We have finished the material from the textbook. We will spend Monday and Wednesday looking briefly at some topics that were not covered in the book (and are not covered in final projects). On Friday, we will do some review.

Presentations of final projects will take place during our regular lab period on Thursday, December 10, and during the scheduled final exam period on Friday, December 18. The exam period runs from 1:30 to 4:30 on the 18th. You should be present for all presentations, not just your own.

Office Hours for Exam Week:

        Monday, December 14:    11:00 AM – 3:00 PM
        Tuesday, December 15:   11:00 AM – 3:00 PM
        Thursday, December 17:  11:00 AM – 3:00 PM
        Friday, December 18:    11:00 AM – 1:15 PM