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 AM, Room Rosenberg 009

About This Course

Computer graphics is simply the art and science of producing and manipulating images on a computer. It is one of the most visible and exciting aspects of computer science.

Computer graphics is a very large and growing field, and this course can only survey some of the important ideas. The course concentrates on three-dimensional graphics, where images are produced by constructing a virtual 3D world that is then projected onto a 2D image. However, we will begin the course with several weeks of 2D graphics, concentrating on features that carry over to 3D. The course covers real-time graphics, where images must be generated very quickly. Real-time graphics is used in video games and other interactive programs. At the very end of the course, we will briefly look at what has to be added to real-time graphics to get very high quality computer graphics, such as that used in movies.

The textbook for this course is a free, on-line book that can be accessed at http://math.hws.edu/graphicsbook. I will expect you to read the book. Reading assignments must be completed before the class where they are discussed. The textbook is new this semester, but it is based largely on the format of the computer graphics course that I taught in 2013. Topics covered incude:

The course will use several programming languages. It assumes that you know Java, and that you can learn the others as needed. We will cover enough of the other languages to, hopefully, get you through the programs that you need to write for the course. Much of the programming will be in JavaScript, the programming language that is used on Web pages. For OpenGL, you will need to learn a little C to understand the API, but you can write the programs in Java. (You can also use C, or even JavaScript, if you prefer.) You will also need to learn GLSL, a language based on C that is used to write shaders for WebGL.

Computer Labs

This course has a required lab component that meets every Thursday. The Thursday period is used for programming labs. You will generally have several programming exercises to work on. You are not expected to complete them during the lab period. Completing lab exercises is part of the homework for the course.

Programming exercises will for the most part be individual assignments, and the work that you turn in for them must be your own. There will be an option to work with a partner for some of the exercises. Lab exercises will ordinarily be due at the beginning of lab the following week.

I would also like to use some of the Monday class meetings as lab periods devoted to using two graphics programs, Gimp and Blender. I have not made a definite decision about how may classes to devote to these programs. Gimp is a 2D program for creating and manipulating images, similar to Photoshop (except that it is free). I would like to have one or two sessions with Gimp early in the semester. Blender is a sophisticated 3D modeling and animation program. It is also free. I would like to have several sessions with Blender as we cover 3D graphics. The exercises for the Gimp and Blender labs will involve creating images and animations.

Midterm Project

There will be one larger programming project over several weeks in the middle of the semester. We will use the programming lab on October 1 to get started on it, and the project is tentatively due on October 30. You will work on the midterm project in parallel with other assignments for the course. The assignment is to develop a scene graph library for use with OpenGL 1.1.

A scene graph is a data structure that contains information about the objects that will appear in an image. The image is created by traversing the scene graph and drawing the objects that it contains. Scene graphs are central to object-oriented computer graphics. We will cover a scene graph API for 2D, and three.js is a scene graph API for web graphics. The assignment will ask you to think about the various ways to organize a scene graph, pick one, and write a library and API to implement your design. You will also need to document the API and write some sample programs that use it.

You will have the option of working with a partner on the midterm project.

Final Project

The course requires a final project, which is due at the end of the semester. The project includes one of: an eight-to-twelve page research paper on some topic in computer graphics; a significant graphics programming project; or an exploration of some graphics technology along with a shorter explanatory paper or web page. Some projects of the third type might use Blender. Team projects, with teams of two or three people, are possible, depending on the topic.

In addition to the project itself, you are required to do a ten-to-fifteen minute presentation on your work. Presentations will take place during the scheduled final exam period, in place of a final exam. (Since the class is large, we will probably need to move some presentations to the last Thursday lab period.)

You will select a topic for your project by November 1. I would like to avoid having two people do the same topic, so you will need to consult with me and get approval for your project before November 1.

More information on the final project, including some suggestions for possible topics, will be available later in the semester.


There will be two in-class tests, which will be given in class on Wednesday, October 7 and Wednesday, November 18.

There is no final exam, but the scheduled final exam period will be used for student presentations of final projects. The scheduled period is Friday, December 18, 1:30–4:30 PM.


Your numerical grade for the course will be computed as follows:

        First Test:        20%
        Second Test:       20%
        Midterm Project:   10%
        Final Project:     15%
        Other Assignments: 35%

I reserve the right to adjust your grade for the course downwards if you miss more than a couple of classes without a good excuse. I reserve the right to reduce your grade on a lab if you missed the lab without a good excuse, with higher penalties the more labs you miss. In my grading scale, an A corresponds to 90–100%, B to 80–89%, C to 65–79%, D to 50–64%, and F to 0–49%. Grades near the endpoints of a range get a plus or minus.

Statement from the CTL

Disability Accommodations: If you are a student with a disability for which you may need accommodations, you should self-identify and register for services with the Coordinator of Disability Services at the Center for Teaching and Learning (CTL), and provide documentation of your disability. Disability related accommodations and services generally will not be provided until the registration and documentation process is complete. The guidelines for documenting disabilities can be found at the following website:


Please direct questions about this process or Disability Services at HWS to Administrative Coordinator, Jamie Slusser, (slusser@hws.edu, 781-3351) or Coordinator of Disability Services, David Silver at silver@hws.edu.

Office Hours, E-mail, and Web

My office is room 313 in Lansing Hall. My office phone extension is 3398. You are welcome to stop by my office anytime you can find me there. My regular office hours, when I am almost certain to be in my office, are:

       Monday,     11:15–12:10 
       Wednesday,  11:15–12:10
       Thursday,   1:00–3:00
       Friday,     10:10–11:05

However, I will generally be in my office Wednesday and Friday from 10:10 to 12:10, and Monday, Wednesday, and Friday from 1:30 to 3:00 or later. And I will often be on campus on Tuesday.

My e-mail address is eck@hws.edu.

There is a short Web page for this course at http://math.hws.edu/eck/cs424/index_f15.html. I will post weekly readings and assignments on that page.

Tentative Schedule

Here is a tentative weekly schedule of topics for the course:

Dates Reading and Class Work Lab
Aug. 31; Sept. 2, 4 Chapter 1; Sections 2.1–2.3.
Introduction to the Course; 2D Graphics.
2D Transforms
Sept. 7, 10, 11 Section 2.6; Section A.3 in Appendix A.
JavaScript; the canvas graphics API.
HTML Canvas Graphics.
Sept. 14, 16, 18 Sections 2.4, 2.5, 2.7.
More 2D Graphics; Hierarchical Modeling.
Possible Monday Lab: Gimp 1.
2D Hierarchical Modeling
Sept. 21, 23, 25 Sections 3.1, 3.2; Section A.2.
OpenGL 1.1 Shapes and Transforms.
Possible Monday Lab: Gimp 2.
Moving Into 3D
Sept. 28; 30; Oct. 2 Sections 3.3–3.6.
OpenGL 1.1 Projection and Viewing, etc.
Possible Monday Lab: Blender 1.
Start Midterm Project
Oct. 5, 7, 9 Sections 4.1, 4.2.
OpenGL Light and Material.
TEST: Wednesday, October 7.
Light and Material
Oct. 14, 16 Sections 4.3, 4.4.
Textures; More on Scene Graphs.
Fall Break, Monday, October 12.
Oct. 19, 21, 23 Sections 5.1, 5.2.
Introduction to three.js.
Possible Monday Lab: Blender 2.
Basics of Three.js
Oct. 26, 28, 30 Sections 5.3, 6.1.
Finishing Three.js; Introducing WebGL
Possible Monday Lab: Blender 3.
Midterm project due: October 30.
Advanced Three.js
Nov. 2, 4, 6 Sections 6.2, 6.3.
GLSL; 2D Graphics with WebGL.
Possible Monday Lab: Blender 4.
First steps with WebGL
Nov. 9, 11, 13 Sections 6.5, 7.1
Transforms in WebGL; glMatrix.
Transforms and Modeling
Nov. 16, 18, 20 Section 7.2
WebGL Lighting.
TEST: Wednesday, November 18.
WebGL Lighting.
Nov. 23 Continuing Section 7.2.
More on Light and Material.
Thanksgiving Break, Nov. 25—27.
(no lab)
Nov. 30; Dec. 2, 4 Section 6.4, 7.3, 7.4.
WebGL Textures; Framebuffers.
Textures in WebGL.
Dec. 7, 9, 11 Wrapping up the course.
Graphics Beyond OpenGL.
Final Projects
Dec. 18 Final Presentations: Tuesday, December 18, 1:30–4:30 PM