This course ended
on December 10, 2013

CPSC 424: Fundamentals Computer Graphics

   Department of Mathematics and Computer Science
   Hobart and William Smith Colleges

   Fall 2013.

   Instructor:  David J. Eck  (

   Course Handout:

   Monday, Wednesday, Friday, 3:00–3:55 PM, Room Napier 202.
   Lab:  Tuesday, 10:20–11:45, Room Gulick 208.
   Office Hours, Lansing 313 (or check the computer lab, Lansing 310):
         Monday, Wednesday, Friday:  1:30–2:50
         Tuesday:  12:30–1:50
         (I will usually also be available MWF 10:00–12:00.)

Some Links:

Lab 1, August 27
Transforms in Java 2D
Lab 2, September 3
Java 2D Hierarchical Modeling
Lab 3, September 10
HTML Canvas Graphics
Lab 4, September 17
Introducing OpenGL
Lab 5, September 24
Normal Vectors and Viewing
Lab 6, October 1
Light and Material
Lab 7, October 8
Lab 8, October 11 and 18
Blender Modeling
Lab 9, October 22
Blender Animation
Lab 10, October 29
Introduction to Three.js
Lab 11, November 5
Some Advanced Three.js
Lab 12, November 12
WebGL (Mostly GLSL)
Lab 13, November 19
More WebGL
Lab 14, November 5
Work on final projects
Lab 15, November 12
Final project presentations

First Week: August 26, 28, 30

We will cover Section 0 and Section 1 of the notes this week (at least).

In lab on Tuesday, we will jump right into some aspects of Java Graphics2D that you are probably unfamiliar with: geometric transformations. The material that you need to know for this lab is in Section 1. We will start covering this section in class on Monday, and you should read the section before coming to lab. We'll get back to Section 0, which is a more general introduction to graphics, later in the week.

Second Week: September 2, 4, and 6

The first part of the week will be about hierarchical modeling, where objects in a scene can contain sub-objects. We will also consider the idea of a scene graph, which is a data structure that encodes the contents of a scene. This material is covered in Section 3 of the notes, and it is the background for this week's lab.

For the rest of the week, we will cover JavaScript, the programming language that is used on Web pages. We will be using JavaScript for close to half of our graphics programming, but first we have to cover the basics of the language. Section 4 is an introduction to the language that I hope will be sufficient to our purposes. Next week, we will see how to do 2D graphics on the Web with JavaScript.

Third Week: September 9, 11, and 13

On Monday, we will discuss 2D graphics on the web using JavaScript and the HTML <canvas> element. This is covered in Section 5 of the notes. We are doing this both to use another 2D graphics API and to start using JavaScript. The lab on Tuesday is about canvas graphics.

Starting on Wednesday, we will finally turn to 3D graphics. We will use "old-fashioned OpenGL" to learn the basics of graphics in three dimensions. The material for this week is covered in Section 6. This section introduces the OpenGL API, without telling you how to actually use it in any program; that will have to wait until Monday and next week's lab.

Here is the rotation example from Wednesday's class, with a couple of added ellipses: canvas-rotate1.html

Fourth Week: September 16, 18, and 20

We will be continue working on OpenGL 1.0 for this week and the next. The reading for Monday is Section 7 of the notes, which covers JOGL and GLUT, including a short overview of programming in C. You will be using JOGL and/or GLUT in the lab on Tuesday. The reading for Wednesday and Friday is Section 8, which covers 3D transformations and viewing.

Fifth Week: September 23, 25, and 27

We will finish up Section 8 on Monday, with some discussion of vectors, matrices, and homogeneous coordinates. Although you don't need to know a lot of the math, there are some things that you should be aware of. We will spend the rest of the week on Section 9, which covers OpenGL 1.0 lighting and material properties. In the lab, you will do some work with viewing and with normal vectors. Normal vectors for surfaces are required for correct lighting calculations. And remember that the first test is coming up next Monday, September 30.

Sixth Week: September 30; October 2 and 4

There is a test on Monday, September 30. Here is the study guide.

The lab on Tuesday is about lighting and material. Be sure to study Section 9 before coming to the lab. The reading for the rest of the week is Section 10, which is about using image textures.

Seventh Week: October 7, 9, and 11

We finish with OpenGL 1.0 this week. On Monday, we will continue talking about Section 10: Textures, and we will finish that section on Monday or Wednesday. The lab on Tuesday is also on textures. Because of Fall Break, the texture lab will be due two weeks from Tuesday.

We will spend a little time on the short section, Section 11, which talks about some of the changes that were made to OpenGL after version 1.0 and why they were made.

We will then move onto a new topic: the free 3D modeling and animation program Blender. On Friday, the class will meet in Lansing 310 for the first part of two-part lab on Blender modeling. The second part will be Friday of next week. The next Tuesday lab, on October 22, will also be about Blender. All work from the Blender labs will be due on Tuesday, October 29.

You should read Section 12, which is an introduction to Blender, before the lab on Friday.

Eighth Week: October 16 and 18

There is no class on Monday, October 14, because of Spring Break.

On Wednesday, I will demonstrate some Blender modeling techniques. If there is any remaining time, I might start talking about Three.js. On Friday, class is in Lansing 310 for the second part of Lab 8.

There is no work due this week.

It's time to start work on the final project for the course. The project specification will be handed out in class on Wednesday.

Click here for the final project.

Ninth Week: October 21, 23, and 25

On Monday, I will demonstrate some Blender animation techniques, but will only spend part of the class on it. For the rest of the class, I will talk about Section 11, which covers shortcomings in OpenGL 1.0. (This section has been on the schedule for a while, but we haven't gotten to it yet.) The lab this week is on Blender animation. Lab 7, on textures, is due on Tuesday. The two Blender labs are not due until next week.

For Wednesday and Friday, we will move on to the next topic, Three.js. Three.js is a higher-level JavaScript library for 3D graphics. You should read Section 15. (We will start Three.js with this simple example.)

Remember that you should be meeting with me to discuss ideas for your term project!

Tenth Week: October 28 and 30; November 1

We will be working on Three.js for the whole week. On Monday, we will finish Section 15, and you will work on the material from that chapter in the lab on Tuesday. The material for the next test ends with that section. To see the three.js example that we covered in class on Monday, click here.

On Wednesday, we will start Section 16, which covers some of the more advanced aspects of Three.js. On Friday, I will answer any questions related to the upcoming test; after that, we will continue with Three.js.

Remember that the second test is coming up next Monday, November 4.

Eleventh Week: November 4, 6, and 8

There is a test on Monday, November 4.

Click here for the Test 2 study guide

The lab this week asks you to work with a few of the more advanced parts of three.js. I will have a few more things to say about three.js on Wednesday, but we will quickly move on to WebGL. You should start reading read Section 17 of the notes.

Twelfth Week: November 11, 13, and 15

We will continue with WebGL. We still have some work to do in Section 17, but we will move on to Section 18 before the end of the week. The lab this week is a tutorial on using uniform, attribute, and varying variables in WebGL.

Don't forget that you should be working on your final projects!

Thirteenth Week: November 18, 20, and 22

We are continuing with WebGL. This week, we will talk about using the glmatrix JavaScript library to implement matrix operations in JavaScript, and we will see how to use the matrices in GLSL. We will move on from there to the implementation of lighting and material in WebGL. And we will look more closely at using image textures. Along the way, we'll do more with the GLSL language.

The lab this week is about implementing a procedural texture in GLSL and drawing with gl.drawElements.

Here is a link to the example that I handed out in class on Monday:

Fourteenth Week: November 25

Because of Thanksgiving, there is no class on Wednesday or Friday. Tuesday's lab is for work on your final project. On Monday, we will be doing some random stuff about graphics.

Have a great Thanksgiving!

Fourteenth Week: December 2, 4, and 6

On Monday, we will review and wrap up the class. The rest of the week is devoted to presentations on final projects. Here is a rough schedule (put we will probably carry over some Blender projects to Wednesday or Friday):

Tuesday, Dec. 3 Wednesday, Dec. 4 Friday, Dec. 6
Candace: Blender Lighting
Jimmy: Blender Physics Engine
Jacob: Blender Game Mode
Owen: Blender Characters
David: Blender Characters(?)
Steve G: Blender and AfterEffects
Steve K: Blender Animation
Jake: Blender Animation
Erxin: GPGPU Computing
Kathryn: Graphics in Film
Maddison: 3D Printing
Jessie: Crydev
Tom: Crydev

The finished projects themselves are due no later than the final exam.

Final Exam: Tuesday, December 10

The final exam is at 7:00 PM on Tuesday, December 10, in our regular classroom.

Click here for the final exam study guide