## CPSC 424: *Introduction to Computer Graphics*

Department of Mathematics and Computer Science Hobart and William Smith Colleges Fall, 2017. Instructor: David J. Eck (eck@hws.edu) Monday, Wednesday, Friday, 12:20–1:15 PM. Room Gulick 2000 (formerly room number 206A). (Except for several Mondays in Rosenberg 009.) Lab: Thursday, 11:55–1:20. Room Rosenberg 009. Office hours in Lansing 313 (but also check the computer lab, Lansing 310): MWF, 11:15–12:10 WF, 2:00–3:00 (I am also often available at other times.) Course Handout: http://math.hws.edu/eck/courses/cpsc424_f17.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 28 and 30; September 1

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.
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 4, 6, and 8

This week will be about the API for 2D graphics on the Web. This is a JavaScript API for drawing on a "canvas" element on a web page. This means that we will first have to talk about JavaScript and web pages more generally. A brief overview of this background material is in Appendix A, Section 3. The 2D API for canvas graphics is covered in Chapter 2, Section 6.

(Here's the very simple first web page that we will look at in class.)

### Third Week: September 11, 13, and 15

On Monday, September 11, the class will meet in the computer lab, Rosenberg 009, for a session with the Gimp image editing program.

The reading for the week is Section 2.4,
which covers *hierarchical graphics* and *scene graphs*. We have already started talking
about hierarchical graphics last Friday. We will discuss scene graphs this Wednesday in class.

On Friday, we should be able to discuss three-dimensional coordinate systems and 3D graphics. It would be a good idea to start reading ahead in Chapter 3.

Here is the little "growing trees" scene graph example from Wednesday's class, written in JavaScript: GrowingTrees.html

### Fourth Week: September 18, 20, and 22

Monday's class will be in Rosenberg 009, for another session with Gimp.

You should read Sections 3.1, 3.2, 3.6, and A.2.

We started our discussion of 3D graphics on Friday. The material covered there is in
Section 3.1 and
Section 3.2: some basic parts of the
OpenGL 1.1 API for color and drawing primitives, plus general ideas about 3D coordinates and transformations.
On Wednesday, we will need to cover everything else that you need to know for Thursday's lab.
That includes how to do transformations in OpenGL 1.1 and, in particular, how to implement
hierarchical modeling with *glPushMatrix* and *glPopMatrix*. We will also have to talk
about using GLUT to draw things like spheres and cones; this is covered in
Section 3.6.

The OpenGL API works most naturally with C, so it's useful to know at least a little bit out C if you want to understand the API. Fortunately, the API is relatively easy C. Appendix A, Section 2 is a short introduction to C. It would be useful to know something about pointers and arrays in C (but not the really hard stuff).

### Fifth Week: September 25, 27, and 29

You should finish reading Chapter 3, especially Section 3.3 and Section 3.4. It is important to be familiar with all of the various transformations that are applied in 3D graphics; these are covered in Section 3.3. That section also includes the idea of a "camera", which can make projection and viewing easier. Section 3.4 covers indexed face sets, which you have already encountered in Lab 4 without knowing the name. It also shows how glDrawArrays and glDrawElements are used for drawing, as a better alternative to glBegin/glEnd.

Section 3.5
is a short introduction to the linear algebra, the essential mathematics for
computer graphics. You won't need to know this material in detail, but it
is essential to be familiar with certain concepts: *vectors* and the
idea that vectors have length and direction; the *length* of a vector
and the idea of a *unit vector*; the *dot product* of two vectors and
how it is related to the angle between the two vectors; and maybe the idea of
*homogeneous coordinates* and why 4-by-4 matrices are used in computer
graphics.

In this week's lab, you will start the midterm project, which is to design a scene graph API for OpenGL 1.1. I encourage people to work with a partner on this project. It would be a good idea to find a partner before coming to lab.

There is a test coming up next week, on Wednesday, October 4.

### Sixth Week: October 2, 4, and 6

There is a test on Wednesday. A study guide was handed out last Friday in class.

On Friday, we began a discussion of light and material in OpenGL, which is covered in Chapter 4 in the textbook. We will continue with that this week. The reading for the week is Section 4.1 and Section 4.2. Section l;4.1 covered general ideas about lighting and the lighting calculations that are done in OpenGL 1.1, including the role of normal vectors. Section 4.2 covers the OpenGL 1.1 API for lights and materials. We should get a start on Section 4.3, image textures, by Friday.

The only work due this week is the work for the Inkscape lab, which should be turned in by Friday afternoon.

### Seventh Week: October 11 and 13

There is no class on Monday this week because of Fall break.

On Wednesday, we will finish up OpenGL 1.1 lighting, and we will cover image textures and how they are used in JOGL (Section 4.3, omitting material on using textures in C). By Friday, we will move on to Section 4.4 for a brief discussion of how cameras and lights can be included in scene graphs. That section also covers the attribute stack, which can be used for saving and restoring sets of attributes such as lighting and material. The attribute stack can be useful when traversing a scene graph.

You should read Section 4.3 before lab on Thursday.

Next Monday, October 16, we will return to Rosenberg 009 for our first Blender Lab. Before Monday, you should read Section A.1, the first section of the appendix about Blender. The material in the appendix will not be repeated in the Blender handouts.

You should be thinking about your final project. Remember that you need to select with me and select a project topic by November 2.

### Eighth Week: October 16, 18, and 20

After the first Blender lab on Monday, we started Chapter 5, which is a short introduction to three.js, a scene graph API for 3D graphics on the web. The reading was Section 5.1. Note that three.js has continued to develop in the two years since the textbook was written, and there are a few things in the book that will not work with the current version. Nevertheless, we will be working with the current version, release 87, in lab. The lab worksheets will be written to work with that version.

### Ninth Week: October 23, 25, and 27

The second Blender lab, which is about more advanced modeling in Blender, will be on Monday in Rosenberg 009. On Wednesday and Friday, we will continue with three.js. The reading is Section 5.2 and Section 5.3.

### Tenth Week: October 30; November 1 and 3

After the The third Blender lab on Monday, we will finish up with Three.js on Wednesday (even though we have not covered everything in Chapter 5. After that we move on to WebGL. You should finish reading Chapter 5, and you can read the first section of Chapter 6.

Remember that final project proposals are due in Friday.

### Eleventh Week: November 6, 8, and 10

We started WebGL last Friday, and we will be continuing it for most of the rest of the semester. The reading for the week is Chapter 6, Sections 6.1 to 6.3. We will likely skip 6.4 and 6.5 for now, and move on to 3D graphics by Friday. We will return to Section 6.4, which covers textures, later. We might or might not cover 6.5 in class, but it would still be a good idea to read it.

Here is a link to the WebGL-colored-disks example that I handed out in class on Monday.

### Twelfth Week: November 13, 15, and 17

There is a test this week, on Friday, November 17. A study guide will be handed out in class on Monday.

Aside from reviewing for the test, we will be moving on to Chapter 7,
Section 7.1
and Section 7.2,
which cover the implementation of basic 3D graphics in WebGL, including transformations and light and material.
To help with transformations, we use *gl-matrix.js*, a JavaScript library
for vector and matrix math in dimensions 2, 3, and 4.

### Thirteenth Week: November 20

Because of Thanksgiving, the only class this week is on Monday.

We will continue with WebGL on Monday. You should read Section 6.4, which covers image textures.

**Have a great Thanksgiving!**