Introduction to Computer Graphics

Introduction to Computer Graphics


In this course students will be introduced to the basics of computer graphics, including how to define objects with vertices and meshes, how to write basic shaders, lighting and shading, projections, transformations in 3D, and texture mapping. Assignments will be done using Javascript and WebGL, and will build on each other.


TuTh 11:40am-1:15pm

Webcast from W20 class:
You need to click on 'archived classes' to find it.
U: cse-160-1-w20 P: cse160

Recordings from S20 class and F20 class:
Stored in Google Drive (needs login) Spring20

Stored in Google Drive Fall20


Labs will be Zoom calls for the TA to introduce the programming assignments and give opportunity for students to ask questions before they start coding.  All labs will be recorded, so you can watch it later if you missed it. 

Mo 10:00am-12:00pm

For Q&A/Individual Help


  • I need a permission code
    • I dont get these until week 2 or 3 of the qtr. Before the add deadline, but not in the first week. Just come to class.
  • I am on the waitlist. I wish I was on the waitlist.
    • CSE160L is required to CSE160, so CSE160L serves as the waitlist. It has always cleared. Come to class, do the first assignment, and then by week 3 we have space to get everyone in who wants it. In fact due to the online nature this term, I am 100% sure we can get everyone in, unlike a physical classroom.
  • I hate my other class and want to add this one after the qtr started.
    • Sure, we would love to have you. All lectures and assignments are available online. But scroll down and check the late/missing work policies. In particular you probably missed one quiz already and you have at least one programming assignment due by the add deadline if you want to pass. 
  • DRC
    • Yes. Send your official form to me with CC to TA Lucas. If your accommodations are limited to exam time we will set it up for all quizzes happening more than 48 hours in the future. If your accommodations are more complex then chat with me in office hours.


CMPS101, MATH21 or AMS10. Concurrent enrollment in CMPS160L lab section is required.

This course is a 7-unit course with the lab. It involves significant programming, in 3 different languages: HTML 5%, javascript 80%, GLSL 15%. If you haven't had at least 4 courses already that involved programming, the instructors suggest you get some more experience before taking this course. That is, if you are fresh out of CMPS101, I suggest waiting (but I dont require it).


  • Professor: James Davis (
  • TA: Lucas Ferreira (
  • TA: Fahim Hasan Khan (
  • Tutors: Kevin Pinney, Matic Likar (

Office Hours


WebGL programming guide: interactive 3D graphics programming with WebGL
Kouichi Matsuda and Rodger Lea

The assignments follow the flow of this book closely, and I assume you are reading the chapters. You'll want a copy. 

Youtube Channel

This was new in Spring20 and students reported that it was useful, so we are keeping it. There will be playlists for different topics. e.g. Assignment1 playlist has videos to walk you through the "lab" assignment.


Raw lecture recordings (unedited, needs a login) Spr20

Raw Lectures Fall20



Due: Due: Lab 0, HW1, Quiz 1 (Linear Algebra)


  • Matsuda Ch 2, Ch03 (67-91)

Due: Lab 1 - Paint Program

  • Lecture 6 (Oct 20):  NO ZOOM
    Watch the Youtube for Asg2.
  • Lecture 7 (Oct 22):  Colors. 
    Actual  F20  Finish  Object  Modeling.  See  Cool  Lab1 examples.  Start  Color  Lecture.


  • Shirley Ch 6 p135-158 - Transformation Matrices.
  • Matsuda  Ch 3(91-113), Ch4(115-123) Transforming

Due: HW 2, Quiz 2 (ObjectModeling, Transforms)

  • Lecture 8 (Oct 27): Held in reserve since always need another slot by this point in the quarter (e.g. strike, power out, etc).
    Actual F20: Finish Color lecture. Use remaining time to introduce some more advanced modern research.
  • Lecture 9 (Oct 29): Texture Mapping.


  • Matsuda  Ch 4 (pg 124-136) Animation

Due Lab 2 - Blocky Animal

  • Lecture 10 (Nov 3): Live: Blocky Animal Contest! Online:Watch the Youtube for Asg3
    Actual F20: Finish Texture Lecture
  • Lecture 11 (Nov 5): Projection.


  • Shirley - Ch 3.3 p54-56 - RGB Color
  • Matsuda - Ch 5   

Due HW 3, Quiz 3 (Color, Texture)


  • Matsuda Ch7 (About cameras and keyboard events
  • (optional: pg 276-289 about drawElements())

Due: Lab 3 - Blocky World

  • Lecture 14 (Nov 17): Live: Blocky World Contest
    (If we have time after then a few more examples of lighting, or a research video)
    Online: Watch YouTube A4.
  • Lecture 15 (Nov 19): Displays.


  • Shirley - Ch 9 p191-200 (Shading), Ch 7 p 159-174 (Viewing)
  • Matsuda Ch8

Due: HW 4, Quiz 4 (Viewing, Projection, Lighting)


  • (Chp 6 and Appendix B are GLSL reference)

Due: Lab 4 - Lighting

Reading: (None)

Due: Quiz 5 (Cumulative)

  • Lecture 19 (Dec 8): Optional: Tell the professor how to improve class. Not optional: Take Q5. Do final lab.
  • Lecture 20 (Dec 10): Reserved for lab 5 contest.
Due:  Lab assignment 5 - Three.js


Your grade for CMPS-160 is broken down as follows:

  • Exams (Quizzes): 40%
  • Programming assignments: 45%
  • Participation/Attendance: 5%
  • Written HW: 10%

Your grade for CMPS-160L is simply your grade for CMPS160. There is no curving, and no rounding up. The grade breakdown is as follows:

A+ = 100-97.00%
A = 96.99-93%
A- = 92.99-90%
B+ = 89.99-87% 
B = 86.99-83% 
B- = 82.99-80%
C+ = 79.99-77%
C = 76.99-70%  
D = 69.99-60%  
F = 59.99-0%

Programming Assignments

There will be 5 programming assignments in Javascript and WebGL due on Mondays at 11:59pm:

  • Assignment 0: Vector Library - Ch1, Ch2 9-16
  • Assignment 1: Paint Program - Ch2, Ch3 67-91
  • Assignment 2: Block 3D Animal - Ch3 91-113, Ch4
  • Assignment 3: Virtual World - Ch5, Ch 7
  • Assignment 4: Lighting and GLSL Shaders - Ch6, Ch8
  • Assignment 5: Exploring a High-Level Graphics Library

- Submissions

Assignments will be submitted on Canvas as zipped project folders containing all of the necessary HTML/Javascript/Shader code. 

- Late Policy

Late submissions of assignments will be penalized 20% off per week and will be accepted no more than 2 weeks late.  No assignments will be accepted after the Friday before finals week.

No work will be counted as late until the add/drop deadline, at which point all late penalties instantly become effective from the original assignment due date. 

In my experience the two week limit does not hurt anyone. Students more than 2 weeks behind eventually fail anyway. This just makes it obvious to you earlier. 

- Missing Work

This is a programming class. You must turn in all Programming Assignments with a grade of at least 4/10 (before late penalty) in order to receive a passing grade. However I know stuff happens - I will allow any student to bypass this policy one time (for one programming assignment) by submitting a paragraph explaining how your life really exploded and you couldn't do it.

This does not apply to written HW or quizzes. You shouldnt miss those either of course, but they are not mandatory for passing.


Attendance in the Zoom class is "required" There will be Google Polls referenced in class lectures. These will be used for participation points. 

If you know you will need to watch recordings later, drop me an email to let me know thats your plan at the start of the quarter. I am happy to accommodate people located in alternate time zones, or who have to work at the scheduled class time, or whatever.

Written HW

You'll need to do some sample problems related to the quizzes and coding assignments. And you'll need to answer some questions on what is in the readings you were supposed to do. These are graded on a participation basis. They are meant to make you look at the readings and sample problems. Actually testing your knowledge is in the quizzes and code assignments. 


There will be five quizzes, to test your understanding of the material. Prior to the quiz/exam, sample problems similar to the ones that will appear on the quiz/exam will be distributed. The quizzes themselves are multiple choice and administered in Canvas. 

The first quiz comes almost immediately, and is a review of your knowledge of basic linear algebra.

  1. Linear Algebra Quiz - Reading: Shirley - Fundamentals of Computer Graphics - Ch 2.4-2.4.4, Ch 5.2-5.2.2

Make-Up Policy: If you miss an exam/quiz without informing us beforehand, you can make it up within the following week (no later), however, your grade on the make-up is cut in half. That is, if you get an 80/100 on the make-up, your actual score will be 40. If you know you will need to miss a quiz you need to get in touch at least 48 hours in advance to make arrangements. This should be very rare with online quizzes.


There will be assignment contests in this class. The winners of these contest are immortalized in the Hall of Fame! You will brag to your children of your talent! Ok. Seriously. Its just a lot of fun. Participation is optional.


Some past versions of this class had a group project. We aren't doing that this qtr. However the programming assignments have been adjusted to allow for additional effort and creativity.

Course Summary:

Date Details Due