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 2000 (formerly 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 programs 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, if necessary. (Since the class is fairly large, the final exam period might not 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.

Statements from the Center for Teaching and Learning

At Hobart and William Smith Colleges, we encourage you to learn collaboratively and to seek the resources that will enable you to succeed. The Center for Teaching and Learning (CTL) is one of those resources: CTL programs and staff help you engage with your learning, accomplish the tasks before you, enhance your thinking and skills, and empower you to do your best. Resources at CTL are many: Teaching Fellows provide content support in 12 departments, Study Mentors help you manage your time and responsibilities, Writing Fellows help you think well on paper, Q Fellows support you in courses that require math, and professional staff help you assess academic needs.

Disability Accommodations: If you are a student with a disability for which you may need accommodations, you should self-identify, provide appropriate documentation of your disability, and register for services with Disability Services at the Center for Teaching and Learning (CTL). 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: http://www.hws.edu/academics/ctl/disability_services.aspx. Please direct questions about this process or Disability Services at HWS to Christen Davis, Coordinator of Disability Services, at ctl@hws.edu or x 3351.

No Technology During Lecture

I ask that you refrain from using any technology (beyond pen/pencil and paper) in lecture, unless you have a verified need to take notes on computer. This includes laptops, tablets, and cell phones.

There is substantial research showing that taking notes on paper can improve retention of the material, compared to note-taking on computer. My real advice is to take notes in outline form, noting down important ideas and examples, and to make a more formal copy of the notes after class, filling in any missing details. There is also research showing that the multitasking that you are likely to engage in if you have a computer open in front of you is detrimental to learning.

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