CS 324E is a course on computer graphics intended for non-major students. The course uses Processing, a Java-based language, as a starting point to explore various topics in computer graphics, including, but not limited to:
- image manipulation
- transformation hierarchies
- motion and sprite-based animation
- shading and lighting
- simulation of various systems, such as
- particle systems
- flocking
- cellular automata
In addition, the class has an emphasis on using inheritance-based object-oriented programming to simplify the behavior of code, and students learn to program in the event-driven asynchronous global state-machine style which is common to graphics applications, but is relatively alien in the rest of the CS curriculum.
This course is primarily managed on Canvas. However, since I believe in making course materials available, I am making the class materials and assignments available here. Since some of these are HTML that is recovered from Canvas, the formatting may be slightly wrong.
Class Slides #
For reasons that are unclear to me, the slides for class 14 simply do not work correctly as a PDF (perhaps an export problem from reveal.js) so I have linked their source in the online editor that I use. The rest of these slides are presented as PDFs.
- Class 1: Introduction and Shapes
- Class 2: Attributes, Modes, and Color
- Class 3: Images
- Class 4: Interactivity
- Class 5: Object Oriented Programming
- Class 6: Composition and Inheritance
- Class 7: Scene Hierarchies
- Class 8 became part of class 10 due to scheduling issues.
- Class 9: Transformations
- Class 10: Shapes and Interpolation
- Class 11: 3D Shapes
- Class 12: Lighting
- Class 13: Materials and Textures
- Class 14: Simulation and Particle Systems
- Class 15: Physical Simulation
- Class 16: Cellular Automata
- Class 17: GUIs
- Class 18: Collisions
- Class 18 (Defunct): Timers and Animation
- Class 19: Data Storage Formats
- Class 20: Graphics Hardware
- Class 21: Intro to Shaders
- Bonus Class 1: Procedural Generation
- Bonus Class 2: Raytracing
Class Programs #
These are programs that were either written in-class as a demonstration, or meant as examples for students who were interested in certain topics.
A program which demonstrates applying a kernel to a specific pixel of an image, but correctly (the version in the lecture was originally flawed).
A program which demonstrates the power of transformations, by moving various objects within other objects’ coordinate systems.
A GPT-written program which visualizes the control points of a Bezier curve, making it easier to understand how the control points work.
A program which somewhat-physically-correctly handles collisions using impulse-based forces. Explicit Euler integration makes it somewhat unstable.
A snippet which was used for the CA Hands-On activity. This made it much easier to visualize a grid of cells without having to resort to pixel-sized cells.
A demonstration of how materials and lighting interact in Processing.
A Processing program which draws a bunch of boxes in 3D. Was used to demonstrate that Processing can be fairly efficient in drawing lots of 3D geometry, even when you’d think it shouldn’t be.
Also demonstrates the use of an edge-based key detection system which allows the program to register multiple keypresses simultaneously.
A simple program demonstrating a box on a spring in 2D.
Demonstrating texturing a quad, box, and sphere.
Shows how to display various 3D geometry in Processing.