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, Room Gulick 206A.
   Lab: Thursday, 11:55–1:25, 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. Except at the very end, 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. Topics to be covered include:

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.

We will also use some of the Monday class meetings as lab periods devoted to using three graphics programs: Gimp, Inkscape, and Blender. I expect to devote seven class meetings to these programs. Gimp is a 2D program for creating and manipulating images, similar to Photoshop (except that it is free). Inkscape is another 2D program that uses "vector graphics" instead of "pixel graphics." Blender is a sophisticated 3D modeling and animation program. It is also free. The plan is to have two sessions with Gimp and one with Inkscape early in the semester, and four sessions with Blender as we cover 3D graphics. The point of this part of the course is to help you to develop your understanding of basic graphics concepts by using program similar to the ones that are used professionally.

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 September 28 to get started on it, and the project is tentatively due at the end of October. 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 simple scene graph API for 2D that I wrote, and three.js is a scene graph API for 3D 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, with documentation; 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, but will have to use aspects of Blender that we do not cover in class. 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, and during the last week of classes. (Since the class is fairly large, the final exam period won't accommodate all of the presentations.)

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 4 and Friday, November 17.

There is no final exam, but the scheduled final exam period will be used for student presentations of final projects. The scheduled period is Tuesday, December 12, 7:00–10:00 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, will be announced later.

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

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

Tentative Schedule

Here is a tentative weekly schedule of topics for the course. We will try to stick approximately to this schedule, but the actual schedule will be posted weekly on the course web page.

Dates Reading and Class Work Lab
Aug. 28; 30; Sept. 1 Chapter 1; Sections 2.1–2.3.
Introduction to the Course; 2D Graphics.
2D Transforms
Sept. 4, 6, 8 Section 2.6; Section A.3 in Appendix A.
JavaScript; the canvas graphics API.
HTML Canvas Graphics.
Sept. 11, 13, 15 Section 2.4.
Hierarchical Modeling & Scene Graphs.
Monday Lab: Gimp 1.
2D Hierarchical Modeling
Sept. 18, 20, 22 Sections 3.1, 3.2, 3.6, A.2.
OpenGL 1.1 Shapes and Transforms.
Monday Lab: Gimp 2.
Moving Into 3D
Sept. 25, 27, 29 Sections 3.3, 3.4, 3.5.
OpenGL 1.1 Projection and Viewing, etc.
Monday Lab: Inkscape.
Start Midterm Project
Oct. 2, 4, 6 Sections 4.1, 4.2.
OpenGL Light and Material.
TEST: Wednesday, October 4.
Light and Material
Oct. 11, 13 Sections 4.3, 4.4.
Textures; More on Scene Graphs.
Fall Break, Monday, October 9.
Oct. 16, 18, 20 Sections B.1, 5.1, 5.2.
Introduction to three.js.
Monday Lab: Blender 1, Basics.
Work on Midterm Projects
Oct. 23, 25, 27 Section 5.3.
Continuing with Three.js
Monday Lab: Blender 2, Modeling
Oct. 30; Nov. 1, 3 Sections 6.1, 6.2.
2D Graphics with WebGL.
Midterm project due: October 30.
Monday Lab: Blender 3, Animation.
More Three.js
Nov. 6, 8, 10 Sections 6.3, 7.1
GLSL; Intro to WebGL 3D.
Intro to WebGL and GLSL
Nov. 13, 15, 17 Section 7.2
WebGL Light and Material
TEST: Friday, November 17.
WebGL 3D and glmatrix.js
Nov. 20 Section 6.4.
WebGL Textures.
Thanksgiving Break, Nov. 22—24.
(no lab)
Nov. 27, 29; Dec. 1 Section 7.3, 7.4.
Procedural Textures; Framebuffers.
More WebGL.
Dec. 4, 6, 8 Chapter 8.
Graphics Beyond OpenGL.
Possible Monday Lab: Blender 4
Final Projects
Dec. 12 Final Presentations: Tuesday, December 12, 7:00–10:00 PM