## CPSC 424: *Introduction to Computer Graphics*

Department of Mathematics and Computer Science Hobart and William Smith Colleges Fall, 2015. Instructor: David J. Eck (eck@hws.edu) Monday, Wednesday, Friday, 9:05–10:00 AM. Room Gulick 206A. Lab: Thursday, 10:20–11:45. Room Rosenberg 009. Course Handout: http://math.hws.edu/eck/courses/cpsc424_f15.html

### Links

- Textbook for the course: http://math.hws.edu/graphicsbook
- Java APIs: Java 8 JOGL
- OpenGL 1.1: Reference Manual Programming Guide GLUT
- Three.js: Web Site API Stemkowski's Examples
- WebGL: Reference Card (PDF) WebGL Spec OpenGL ES 2.0 Spec (PDF) GLSL Spec (PDF)
- Programming Environments: JDK Download Eclipse Komodo Edit
- Graphics Programs: Gimp Inkscape Blender

### 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.