In Spring 2023, CS 418 Interactive Computer Graphics is being offered in a way designed specifically to cater to our online MCS program. As such, both in-person and online students will be expected to consume most course material in an asynchronous digital form. An optional session will also be held each Monday for in-person students, with the goal of supporting all students in their chosen learning modality.

1 Course operation

The course consists of the following components:

Pre-recorded lecture material
Available on the course content site, these are mostly fairly dense videos; I regularly distilled 3 hours of class into 1 hour of video by removing the Q&A and other interactive content. Please make notes of questions as you watch them and post those questions on CampusWire. I may answer them there or record videos explaining the answers and post them as supplementary content.
Pre-written lecture notes

Available on the course content site, these have roughly the same content as the videos, but often differ in level of detail. Some video content (such as coding demonstrations) have no corresponding notes.

Please make notes of questions as you read them and post those questions on CampusWire. I may answer them there or write up longer explanations and post them as supplementary content.

Per-module retakable quizzes

Lecture material is split into modules, each with a quiz. These quizzes are intended primarily as a self-assessment of learning and may be retaken as often as desired.

I understand that some students find quizzes annoying, but experience has shown me they they do help students find and fix gaps in understanding.

These quizzes are administereed on Coursera. You can activate your Illinois Coursera account as described in and then visit to access quizzes.

Machine problems (MPs)

There are five primary MPs, plus a sixth one required for 4-credit students but not required for 3-credit students. There are also two low-weight warm-ups intended primarily to smooth the way for subsequent MPs.

Machine problems are submitted on a custom course submission site that provides some limited automated feedback (mostly of the form did it run on our server); they are graded primarily by hand.

I expect each MP to take the average student between 10 and 20 hours to complete.

The 4cr MP typically takes a bit longer than the others, so 4cr students may wish to begin it early by viewing the raytracing videos and notes earlier than the 3cr schedule recommends.

Final quiz

At the end of the term a proctored comprehensive quiz will be administered. It will be a timed closed-book assessment and will be comprised of questions taken from the per-module quizzes with some small edits.

Online MCS students will be supervised via ProctorU.

On-campus student supervision is still being worked out, but will likely be in-person on-paper at a time and place scheduled by the university.

Optional in-person meetings
Each Monday 10–10:50am the instructor will be in 1404 Seibel to answer questions, perform demonstrations, and give an overview of the week’s content. These sessions are optional but encouraged for on-campus students. If anything covered in them provides significant new coverage of content it will be subsequently recorded and/or written up and posted for all students.

2 Course content

Computer graphics studies how computers can create images. Interactive computer graphics creates images quickly enough that a new image can be created in response to every user action. In principle any image-creation algorithm could be interactive, given adequate hardware, but in practice it usually refers to a specific family of workflows involving the interaction of the CPU and GPU. That family of workflows will be our primary topic in this class.

This course teaches the following in enough detail to implement them yourself:

  • How 3D computer graphics works, including both rasterization and raytracing.
  • How to use WebGL2, a popular GPU API, to create interactive 3D graphics.
  • How to generate your own 3D geometry, render it, texture map it, move it, and move the camera around it, with all of the underlying math and algorithms.
  • How to basic graphical motion simulation and particle effects.

This course teaches various other topics at a lower level of detail, including:

  • Shadow maps
  • Deferred shading
  • Keyframe animation and tweening
  • Various fractals
  • Various texture mapping techniques
  • Physically-based rendering techniques
  • Inverse kinematics
  • Rigid-body, soft-body, and fluid dynamics

This course does not teach

  • OpenGL, Direct3D, Metal, Vulkan
    • WebGL2 is related to them and will help you understand them too.
  • Artistic content such as 3D modeling, animation, rigging, texture creation, light setups, etc.
  • Allegro, Banshee, C4, CryEngine, Godot, Intrinsic, OGRE, SDL, Serious, Source, Torque, Unity, Unreal, UX3D, Xenko, XNA, …
    • We discuss techniques used to build these tools, but not how to use them.
    • CS 415 uses one of theses.
    • The GameBuilders RSO often uses these tools.
  • Computer game design
  • Computer vision
  • 2D graphics
    • We’ll mention some topics in passing, but CS 445 is more relevant
  • Advanced raytracing, path tracing, importance sampling, and other movie-quality graphics content
    • CS 419 teaches this, but is offered infrequently and is not currently on the books for the next few semesters.

3 Grading

My goal in this class is that you learn. As it is an elective, I hope most of you are taking it for the same reason. But I do have a duty to assign grades, so here’s how we’ll do it.

Percentage Assessment
15% Module quizzes
25% Final quiz
60% MPs

Numbers are converted to letters linearly with the A−/B+ cut-off at 90% and the C−/D+ cutoff at 70%; more precisely

const letter_grade = (percentage_earned) => {
    if (percentage_earned <= 60) return 'F'
    if (percentage_earned >= 100) return 'A+'
    let letter = 'DCBA'[Math.floor(percentage_earned/10 - 6)]
    if (percentage_earned % 10 > 20/3) letter += '+'
    if (percentage_earned % 10 < 10/3) letter += '-'
    return letter

Because A+ and A have the same GPA, I may move that boundary up or down to achieve the general objective A+ means you were one of the best students in the class.

Each MP has two categories of points: required and optional. There are many more optional points than you need to get, but you do need to get some of them.

Let N be 250 if you are a 3cr student and 300 if you are a 4cr student. Then for full MP credit you need to earn N required points (50 per MP) and N optional points (distributed across the MPs however you wish). If you get more than N optional points, excess optional points will be awarded as extra credit at 5% of their usual value. More precisely,

const MP_percentage = (req_pts, opt_pts, N) => {
    let extra = 0
    if (opt_pts > N) {
        extra = (opt_pts - N) * 0.05
        opt_pts = N
    return (req_pts + opt_pts + extra)/(2*N) * 100;

4 Cheating

Module quizzes are open-book and retakable, but do not use live or interactive help on the module quizzes and do not share answers with anyone.

The final quiz is closed book, no help allowed, no calculator allowed.

The MPs require you to write all of your own code, with some exceptions called out explicitly in the MP descriptions. Write your own code also means design and understand it: simply writing what someone else tells you to write does not contribute to you learning and is cheating. Within this constraint you may use any source to assist you, but cite all such sources in comments in your code to avoid plagiarism. As an exception, you do not need to cite course content provided as part of this course this semester, nor do you need to cite interactions with this semester’s official CS 418 course staff.

5 Prerequisites

Listed prereqs in the course catalog are

CS 225 Data Structures

Needed primarily for the common vocabulary it provides as we discuss graphics-specific structures, and for the programming experience it provides.

We’ll have some assignments where you may use any programming language you want and some where you’ll use JavaScript and GLSL. I assume you don’t know JavaScript or GLSL already, so we’ll provide instruction as needed on those languages.

A linear algebra class

Matrices and vectors are all over computer graphics. We’ll use vectors to represent 3D points and matrices to transform them. We’ll use vectors to represent long lists of properties of a point. We’ll explain the details of these uses, but assume you have a working knowledge of matrices and vectors coming in.

Graphics also use large sparse matrices to represent physical constraints and iterative solvers (primarily variants of conjugate gradient) to create visual simulations of real-world dynamics. That is rarely achievable at interactive speeds, so we won’t talk about it in any detail in this class.

MATH 241 Calculus III

Euclidean space and the vectors used to represent it are important in graphics. Additionally, taking multivariable calculus usually helps students think in 3D a bit more than they had before, which is useful.

There is some calculus in graphics, but mostly as theoretic background for algorithms that do not themselves use the calculus. We’ll not need any integral-solving or related by-hand calculus computations in this course.

6 Course Staff

Name Luther Tychonievich
Office 2340 Siebel
Phone +1 217 333 8609
Email luthert@...
Include 418 or graphics in the subject line
Birkhoff Cheng, Sudharsan Krishnakumar Anitha, Sharon Lam, Soorya Shimgekar
By invitation only. I get daily roster change update digests and enter them into CampusWire when I do.
Office Hours
Location Zoom meeting 854 0421 4284 passcode 418

7 Textbook

Readings are hosted for free on There is no other textbook required.