# Course Outline: Videos and Slides

This page provides an outline of the class topics discussed, with links to the videos and the slides for the lectures (when available). You can click the timestamp to watch a specific topic.

The videos are also available on the MediaSpace Channel.

Lecture videos should appear here a few days after they are recorded.

There is a similar Outline of Spring 2020 if you want to see what happened last year, or see the material presented a different way.

## Week 1 (1/25 - 1/29)

#### [Tue 1/26] Course Overview

[Videos
Lecture1
]
[Slides
Lecture1
]

- Blackboard Collaborate Ultra [02:05]
- Why & What is Computer Graphics? [12:38]
- Course Goals & Outline [28:30]
- How 559 Works (Staff, Getting Help, Workbooks, Exams ...) [46:15]

#### [Bonus] Git, GitHub Classroom, & Chrome Debugger

[Videos
Git-Part-A
,
Git-Part-B
,
Debugger
]
[Slides
Git-Part-A
,
Git-Part-B
]

- What it looks like to do a Workbook [link]
- How Git & GitHub Classroom works [link]
- Chrome Debugger Quick Start [link]

#### [Thu 1/28] Pre Graphics & Web Programming

[Videos
Lecture2
]
[Slides
Lecture2
]

- Web programming overview & learning JavaScript [09:34]
- Web basics (HTML, DOM trees, scripts) [21:27]
- Event driven programming [33:04]
- Animation loops [40:13]
- Loving vs. hating JavaScript [48:16]
- JavaScript & object-oriented programming [55:08]

#### [Bonus] Closures

[Videos
Closures
]
[Slides
Closures
]

## Week 2 (2/1 - 2/5)

#### [Tue 2/2] Graphics 101 & Web Browser Graphics

[Videos
Lecture3
]
[Slides
Lecture3-1
,
Lecture3-2
]

- How we see (light, depth, & distance, 2D vs. 3D) [03:13]
- Representing images: types of displays & buffers [16:33]
- Display synchronization (buffering) [39:08]
- Graphics in the web browser & different APIs [47:30]
- Intro to the Canvas API [01:00:00]

#### [Thur 2/4] Canvas & Coordinate Systems

[Videos
Lecture4
]
[Slides
Lecture4
]

- Canvas properties recap & when/where/what do I draw? [03:45]
- How save & restore works [12:30]
- Paths & Filling rules (convex, non-convex, disconnected...) [17:28]
- Winding rules (non-zero vs even-odd) [33:07]
- Canvas coordinates, handling events, interpreting coordinates... [41:02]
- Coordinate systems demo (moving objects vs. coordinates) [01:01:31]
- Instancing & keys ideas of transformations [01:12:27]

## Week 3 (2/8 - 2/12)

#### [Tue 2/9] Transformations in 2D

[Videos
Lecture5
]
[Slides
Lecture5
]

- JavaScript tip: Type hints & dynamic typing [02:55]
- Intro to transformations: moving triangles w/ translations! [10:47]
- Instancing & composition of transformations w/ demo [19:31]
- Scale transformations w/ demo [29:39]
- Combining scale & translate w/ demo [35:40]
- Center of scaling demo [47:08]
- Rotations & handedness (curling fingers) w/ demo [55:56]
- Rotating around a point (rotate + translate) w/ demo [01:05:51]
- Hierarchy of objects & articulated chains [01:10:25]

#### [Thur 2/11] More Transformations in 2D

[Videos
Lecture6
]
[Slides
Lecture6
]

- JavaScript tips: 'class-based' objects [02:15]
- Recap: Handedness (curling fingers) in 2D [05:54]
- Recap: Transformation basics & composed transformations [10:46]
- The shear/skew transformation [18:51]
- Articulated chains (pieces rotating relative to each other) w/ demos [22:25]
- Hierarchical modeling (instancing, trees, DAGs, graphs) [35:36]
- SVG: a retained mode API compared to the immediate mode Canvas API [48:06]
- Summary of transformations, hierarchy, & APIs [01:07:27]

## Week 4 (2/15 - 2/19)

#### [Tue 2/16] Transformation Math

[Videos
Lecture7
]
[Slides
Lecture7
]

- JavaScript tip: functions are objects! [03:33]
- Transformations on points, what is a coordinate system, & math you need to know for the class [10:29]
- Vectors (& points) properties & operations [20:26]
- Matrix properties & operations [29:06]
- Linear transformations (rotate, scale, skew, etc.) [38:27]
- Affine transformations (linear transformation + translation) [47:51]
- Homogeneous coordinates & encoding transformations in matrices [50:19]
- Transformation matrix examples [58:07]
- Transformation implementation in APIs [01:12:30]

#### [Thur 2/18] More Transformation Math

[Videos
Lecture8
]
[Slides
Lecture8
]

- JavaScript tip: the 'this' keyword [02:39]
- Composition of transformations (order matters!) [06:18]
- Affine transformations as a linear equation [17:44]
- Transformation commands [19:12]
- Rotation transformation math, & what you can do with rotations [24:56]
- Linear interpolation [41:03]
- Oriented 'particles': a use for rotations! [44:05]
- More on affine transformations [52:02]
- Transformation implementation in APIs & lots of examples [54:39]
- Summary of transformation math [01:04:53]

## Week 5 (2/22 - 2/26)

#### [Tue 2/23] Curves

[Videos
Lecture9
]
[Slides
Lecture9
]

- JavaScript tip: ES6 modules [01:48]
- Shapes, curves, areas, regions, & surfaces [04:47]
- Types of curve representations (implicit, parametric, procedural, & subdivision) [11:15]
- Parametric forms, free parameters & shape parameters [24:09]
- Continuity: defining smoothness [28:36]
- Speed matters? C vs. G continuity [43:29]
- Piecewise polynomials & parameterizations [50:24]
- Line (1st degree), quadratic (2nd degree) & cubic (3rd degree) segments [01:00:09]
- The Hermite form, hermite equations, & hermite curves [01:09:04]

#### [Bonus] Continuity Questions

[Videos
ContinuityQuestions
]
[Slides
]

#### [Thur 2/25] Curve Interpolation

[Videos
Lecture10-Interpolation
]
[Slides
Lecture10
]

- Interpolation, tangents & derivatives [00:20]
- Recap: Hermite form, designing with hermite curves, & sketching [06:43]
- Cardinal splines, Catmull-Rom splines, the tension parameter, & sketching [13:21]
- Locality of control (why not use polynomial pieces of higher degrees?), & demo [19:34]
- Summary of interpolation [25:53]

#### [Thur 2/25] Bézier Curves!

[Videos
Lecture10-BézierCurves
]
[Slides
Lecture10
]

- Approximating curves & points influencing curves [00:37]
- Bézier curves introduction [05:03]
- Quadratic Bézier curves (3 points) [09:19]
- Why you should love Bézier curves [11:41]
- Math for Bézier curves (basic functions) [13:37]
- Variation diminishing / the wiggle theorem / crossing property [16:49]
- Cubic Bézier curves (4 points) [18:14]
- Bézier blending functions [21:47]
- Bézier curves in the Canvas API [23:47]

#### [Thur 2/25] Geometric Intuitions for Bézier Curves

[Videos
Lecture10-GeometricIntuitions
]
[Slides
Lecture10
]

- DeCastlejau Construction [00:28]
- The blending tree, geometric intuitions, & DeCastlejau subdivision [06:00]
- Summary: curves part 1 & 2 [08:53]

## Week 6 (3/1 - 3/5)

#### [Tue 3/2] Even More Curves!

[Videos
Lecture11
]
[Slides
Lecture11
]

- JavaScript tip: casting & type checks [01:47]
- Quick curve review [09:47]
- Arc length parameterization of a piecewise curve [13:02]
- Bézier curves - why so important?? (variance diminishing, symmetric, & more) [26:00]
- Why NOT Bézier curves for everything? (interpolation, affine vs. projective invariance, & more) w/ demos [34:42]
- B-splines introduction [47:06]
- Thinking in terms of basis functions [53:08]
- Simple B-splines & when to use B-splines?? [01:06:36]
- Train demo (B-Splines vs arc-length parameterization) [01:11:13]
- Curves summary [01:14:11]

#### [Thur 3/4] Intro to 3D Graphics

[Videos
Lecture12
]
[Slides
Lecture12
]

- Depth & distance/sensing 2D vs. inferring 3D [01:23]
- 3D Displays & 3D cues from one image [11:03]
- 3D Graphics & some 3D math (coordinate systems, right hand rule, & more) [23:27]
- Triangles & curves vs. surfaces. vs volumes [30:27]
- Normals & tangents [40:47]
- Drawing in 3D: thinking in terms of a world [45:18]
- The THREE.js graphics API & graphics abstractions [51:29]
- Summary of steps required to draw a triangle & cube with 3D graphics (vertex shader, fragment shader, etc.) [01:00:14]

## Week 7 (3/8 - 3/12)

#### [Tue 3/9] 3D & THREE.js

[Videos
Lecture13
]
[Slides
Lecture13
]

- THREE.js & graphics abstractions / how to import THREE.js into your code [00:03:21]
- JavaScript tip: modules & explicit type checks [00:10:45]
- Hello Cube overview (steps required to draw a cube) [00:19:48]
- Renderer: show to the screen [00:20:48]
- World/Scene: where to draw [00:26:11]
- Geometry: make the cube [00:28:33]
- Material: need the 'stuff' object is made out of [00:31:24]
- Mesh: make it an object (& disambiguation of Mesh vs. Geometry outside of THREE.js) [00:36:37]
- Add object to the world / hierarchy & transformations in THREE.js [00:39:32]
- Camera: project the world onto the screen/ viewing transformation [00:49:33]
- Draw: put things on the screen & animation loops [00:53:39]
- Lighting & different types of materials [00:58:52]
- Barycentric interpolation for triangles & the importance of normals [01:07:44]

#### [Thur 3/11] More 3D & THREE.js

[Videos
Lecture14
]
[Slides
Lecture14
]

- Cube example (lighting, camera, solid appearance, animation, & rotation) [00:02:00]
- Loading objects (deferred loading) [00:07:06]
- JavaScript tip: asynchronous programming & callbacks [00:09:46]
- Material, lighting (types of lights), & shading intuitions [00:22:49]
- Animation loop & animation in THREE.js [00:37:38]
- Transformations in THREE.js [00:44:48]
- How do objects work in THREE.js? (position, orientation, scale, etc.) & state vs. transformation [00:51:16]
- Rotations in 3D... tricky! [00:58:13]
- Viewing transformation (camera.lookat & types of projections) [01:02:18]

## Week 8 (3/15 - 3/19)

#### [Tue 3/16] Transformations in 3D [Viewing & Rotations]

[Videos
Lecture15
]
[Slides
Lecture15
]

- JavaScript tip: methods & the 'this' keyword [00:02:43]
- Projection from 3D to 2D & types of projections [00:08:10]
- Perspective assumptions & perspective math [00:23:45]
- Clipping & the frustum [00:35:50]
- The viewing transformation (place camera + projection 3D to 2D) [00:39:44]
- Special rotations for cameras & other objects: lookat & lookfrom [00:44:06]
- Order of transformations in THREE.js (T, R, & S) [00:51:07]
- Hierarchy in THREE.js (any object can have children) [00:56:30]
- More about rotations in THREE.js (rotation vs. orientation) [01:03:47]

#### [Thur 3/18] Rotations in 3D

[Videos
Lecture16
]
[Slides
Lecture16
]

- JavaScript tip: subclasses & inheritance [00:00:45]
- Properties of rotations [00:08:20]
- Rotations about axes (axes in the world vs. local axes) [00:21:04]
- Euler angles (rotations around 3 fixed axes) with demo [00:26:54]
- Composing rotations & getting 'stuck' (gimbal lock) with demo [00:38:37]
- Axis Angle (single rotation about some axis) with demo [00:50:01]
- Rotation vectors & matrices [00:55:18]
- Unit quaternions (great way to represent rotations) [00:59:41]
- THREE.js & rotations (quaternions used internally for everything) [01:05:14]

## Week 9 (3/22 - 3/26)

#### [Pre-recorded] Lecture 17B: Meshes, Color, & Normals

[Videos
Lecture17B
]
[Slides
Lecture17B
]

- Meshes: collections of triangles [00:12]
- Criteria for good meshes & properties of meshes, vertices [03:11]
- Vertex splitting [05:53]
- Mesh operations, representation, & data structures [08:13]
- Meshes in THREE.js [16:24]
- Combining material, face, & vertex colors & examples in THREE.js [20:09]
- Interpolating colors & other vertex properties (barycentric interpolation) including face colors [29:13]
- Mesh summary [37:13]
- Overview of normals & their use (backface culling, lighting...) [37:53]

#### [Pre-recorded] Lecture 17C: Lighting

[Videos
Lecture17C
]
[Slides
Lecture17C
]

- Lighting: the simple local model [02:49]
- Local vs. global lighting [09:06]
- Emission, ambient, diffuse, & specular components of lighting models [14:50]
- Diffuse / Lambertian materials [17:46]
- Specular lighting [28:54]
- The Phong model [31:53]
- Metalness & roughness properties [45:52]
- How often do we compute the color? [46:53]

#### [Pre-recorded] Lecture 18A: JavaScript Subclasses & Lighting Review

[Videos
Lecture18A
]
[Slides
Lecture18A
]

- JavaScript tip: all about subclasses [1:41]
- Lighting review (local vs. global / diffuse vs. specular / where do we put colors? / & more) [6:32]

#### [Pre-recorded] Lecture 18B: Texture Basics

[Videos
Lecture18B
]
[Slides
Lecture18B
]

- Intro to textures: how to get more than 3 colors on a triangle? [00:05]
- Steps of texture mapping (most commonly use UV coordinates) [02:57]
- Texture mapping demo [08:44]
- UV coordinates & texture wrapping (clamping, mirroring, repeating) [10:23]
- Texture use/re-use & beyond basic textures [16:31]

#### [Pre-recorded] Lecture 18C: Texture Mapping in THREE.js

[Videos
Lecture18C
]
[Slides
Lecture18C
]

- Basic texture mapping in THREE.js [01:17]
- Basic texture mapping in THREE.js [01:17]
- Using UV coordinates for geometry [03:32]
- How textures work in THREE.js [06:36]
- Some caveats for textures in THREE.js (lighting, material, Y direction) [11:31]

#### [Pre-recorded] Lecture 18D: How Texture Mapping Works

[Videos
Lecture18D
]
[Slides
Lecture18D
]

- UV mapping with barycentric coordinates [00:13]
- The problems that can happen with UV mapping [01:53]
- Texture lookups: magnification (nearest-neighbor vs. bilinear interpolation) [03:40]
- Texture lookups: minification & filtering (summed area tables vs. mipmaps) [08:50]
- Summed area tables (key idea: pre-computation) [14:40]
- Mipmaps & anisotropy (key idea: approximating value of pixel) [18:18]
- Mipmaps summary [28:24]
- Texture mapping summary [30:05]

#### [Pre-recorded] Lecture 18E: Texture Review

[Videos
Lecture18E
]
[Slides
Lecture18E
]

- Why & how to use basic textures? [00:17]
- Getting & using UV values with THREE.js [5:14]
- Putting all the steps together in THREE.js [10:13]
- What does the hardware do for texture mapping? [11:45]
- Filtering fast using mipmaps [14:00]

## Week 10 (3/29 - 4/2)

#### [Tue 3/30] Lecture 19: Drawing in 3D

[Videos
Lecture19
]
[Slides
Lecture19
]

- Triangles: the primitive / Meshes: collection of triangles [03:38]
- Meshes: efficient storage / where does data live (vertices, faces, meshes, or texture?) [08:50]
- From vertices to triangles / shading: what color does triangle appear? [16:48]
- Lighting: local vs. global / standard (phong) lighting model [18:19]
- Exam practice: diffuse vs specular lighting [30:15]
- Colors per triangle (1, 3, or lots more) [34:50]
- Recap: texture coordinates & basic mapping process [39:01]
- Filtering (mipmaps + trilinear interpolation) [45:39]
- Exam practice: what UV values make a picture? [47:58]
- Recap: The process of drawing in 3D [52:06]
- Clipping vs. visibility vs. culling [55:24]
- Visibility: the painter's algorithm [01:01:30]
- Visibility: the Z-buffer algorithm [01:07:36]

#### [Thur 4/1] Lecture 20: Drawing Fast

[Videos
Lecture20
]
[Slides
Lecture20
]

- Recap: the painter's algorithm [05:30]
- Recap: the Z-buffer algorithm [09:30]
- Common drawing challenges: z-fighting, aliasing, overdraw efficiency, & semi-transparent objects [16:11]
- Z-buffer summary [29:41]
- The steps of the 3D graphics pipeline & intro to graphics hardware [33:17]
- Parallelization / graphics hardware history & how the modern pipeline came to be [43:41]
- Modern graphics pipeline overview [55:30]
- A triangle's journey through the pipeline: application programs, graphics drivers, & command buffers [58:04]
- A triangle's journey: buffering vertices, vertex processing, vertex shading [01:06:41]

## Week 11 (4/5 - 4/9)

#### [Tue 4/6] Lecture 21: Graphics Pipeline & Shaders

[Videos
Lecture21
]
[Slides
Lecture21
]

- Why is shader programming hard? [02:50]
- A triangle's journey through the pipeline: vertex cache, assembly, & triangle processing [05:19]
- A triangle's journey: rasterization to turn triangles into pixels [07:19]
- A triangle's journey: pixel processing & pixel tests (Z-buffer, color blending, & more) [11:26]
- A triangle's journey: the frame buffer (put pixels on screen) [15:13]
- Summary of a triangle's journey through the pipeline [16:51]
- The idea of an 'object', constant state (uniform), per vertex information, & what can a graphics program specify? [20:44]
- The vertex processing unit & fragment processing unit [25:34]
- Intro to shaders, shading languages, & some history [32:51]
- GLSL: the shading language for OpenGL [41:45]
- GLSL example 1: basic vertex shader & fragment shader [47:04]
- GLSL example 2: using varying variables [55:54]
- Shaders: getting data from JavaScript & how to use shaders in THREE.js [01:05:19]

#### [Thur 4/8] Lecture 22: More Shaders

[Videos
Lecture22
]
[Slides
Lecture22
]

- Recap of the graphics pipeline [03:17]
- Recap of vertex shaders & fragment shaders [07:39]
- Moving data around in shaders (uniforms, attributes, & varying variables) & using shaders in programs [21:10]
- Making your own shaders [30:37]
- Shader uniforms [37:00]
- Shader attributes [42:07]
- Using shaders to implement lighting [44:56]
- Overview of phong lighting & what a material is defined by [48:44]
- How diffuse & ambient color are calculated [51:16]
- The vertex shader & transformation of normals [53:52]
- How does THREE.js calculate lighting? / directional light & point light / how to use THREE.js lights in shaders [57:39]
- Using textures in shaders / filtering for textures [01:02:22]

## Week 12 (4/12 - 4/16)

#### [Tue 4/13] Lecture 23: Even More Shaders

[Videos
Lecture23
]
[Slides
Lecture23
]

- Shader techniques & tricks (like using built-ins, not conditionals or expressions) with examples [00:02:23]
- Overview of anti-aliasing in shaders [00:13:20]
- Anti-aliasing: step, smoothstep, & fwidth [00:19:00]
- Noise: how to create 'randomness' in shaders with examples
- Perlin noise / how do you use noise in shaders? [00:40:23]
- Displacement mapping: changing shape using vertex shaders [00:46:10]
- Using 'fake' normals to fake lighting in shaders [00:55:53]
- Toy example: wavy surface (it's not really wavy!) [01:04:07]
- Normal mapping in shaders [01:08:40]
- Bump mapping in shaders [01:11:17]

#### [Thur 4/15] Lecture 24: More Interactive Rendering Tricks

[Videos
Lecture24
]
[Slides
Lecture24
]

- Texture tricks: using procedural textures [00:01:50]
- Overview of displacement, normal, & bump maps [00:06:27]
- Using a skybox to be the background of a scene [00:18:46]
- Environment mapping using sphere maps & cube maps [00:31:46]
- Dynamic environment maps (for fancy lighting!) [00:43:49]
- Example of making a woodgrain texture / layered textures [00:49:54]
- Light maps (pre-computed lighting in a texture) & ambient occlusion shading [00:57:08]
- Shadow maps (create the illusion of shadows) [01:01:40]

## Week 13 (4/19 - 4/23)

#### [Tue 4/20] Lecture 25: Even More Interactive Rendering Tricks

[Videos
Lecture25
]
[Slides
Lecture25
]

- Summary of advanced texture hacks [00:01:57]
- More about shadow maps [00:03:30]
- Complex lighting [00:23:49]
- Deferred shading/rendering & extensions [00:37:48]
- Animation by transformation/deformation [00:49:50]
- Shape interpolation (morphing) [00:52:55]
- Non-linear deformations [01:00:50]
- Coordinate-based deformations (cages) [01:10:15]

## Week 14 (4/26 - 4/30)

#### [Tue 4/27] Lecture 26: Shape in 3D

[Videos
Lecture26
]
[Slides
Lecture26
]

- Harmonic coordinates / skeletons / rigid pieces [00:04:10]
- Skinning concepts [00:08:18]
- Blend matrices & blend artifacts [00:16:18]
- Curves vs. surfaces. vs. solids [00:22:12]
- Solid modeling / surface modeling / surface of revolution [00:26:08]
- Generalized cylinders: tubes, cones, & sweeps [00:30:42]
- Curves in 3D / free form surfaces [00:37:17]
- Tensor product surface patches / ways to do subdivision [00:46:27]
- Dividing triangles (butterfly, uniform meshes, loop scheme) [00:54:41]
- Catmull-Clark algorithm for subdivision [01:06:04]

#### [Thur 4/28] Lecture 27: Rasterization & Aliasing

[Videos
Lecture27
]
[Slides
Lecture27
]

- Rasterization (figure out which pixel a primitive 'covers') [00:01:01]
- Pixels are not a little square! They are point samples [00:05:04]
- Triangles / point coverage / scanline & midpoint algorithms [00:07:13]
- Barycentric coordinates & hardware rasterization [00:14:43]
- Aliasing & anti-aliasing: overview [00:25:40]
- Aliasing & anti-aliasing: texture sampling, lines, jaggies, crawlies [00:36:10]
- Aliasing & Anti-aliasing: blur, partial fill, & triangles [00:50:03]
- Aliasing & Anti-aliasing: super-resolution [00:59:06]
- The End ... thanks!! [01:04:33]