John David N. Dionisio, PhD

CMSI 371

Computer Graphics

Spring 2017

Note

This page is maintained as an archival record of the course shown above, and as such, some links on this page may no longer be valid nor accessible. They are kept here as a record of the resources that were available at the time of the course offering.

• Bazaar: Where you’ll find our sample code—I tend to update this live throughout the semester, so if you fork or clone it, make sure to pull from it periodically
• More graphics sample code from the JavaScript textbook
• Piazza: Where we can discuss anything related to the class
• myLMU|Connect a.k.a. Blackboard: Where you can access class screengrab video links (Section 01, Section 02)
• LMU Computer Science “Hacking” Guidelines: Where you can get some guidance on how to present and structure your code
• How to Ask Questions the Smart Way: Follow these tips to improve the quality and efficiency of the help that you get

Assignments

• Assignment 0116 GitHub, Piazza, and YouTube account setup: 40 points
• Assignment 0201 Parameterized sprite library: 100 points
  • You may find the canvas-template sample helpful for this one.

Setup Assignments 0201 & 0222

• Assignment 0222 Animated, tweened scene implementation: 100 points
  • Robert Penner’s web site is a major source of background and reference material for this assignment.
  • Starter code is based on the animation-sprite sample.
• Assignment 0313 Pixel-level primitives and filters: 100 points
  • Starter code is based on the primitives, nanoshop, and nanoshop-neighborhood samples.

Setup Assignment 0313

• Assignment 0407a Static scene based on polygon mesh library: 100 points
  • Your code may follow the pattern established by the vector sample code.
  • For additional reference, visit the Jasmine home page.
• Assignment 0407b Matrix library with test suite: 100 points

Setup Assignments 0407 & 0502

• Assignment 0424 (extra credit) The Science Behind Pixar exhibit

Setup Assignment 0424

• Clipping & hidden surface removal algorithms: 60 points —attend the 0425 class
• Assignment 0502a Lights, camera…: 100 points
• Assignment 0502b Action! (animated, interactive 3D scene): 100 points

Handouts/Sample Code

• Small examples for structuring drawing code
  • Separating data from drawing code
  • Placing drawing code in functions
• Graphics = Light = Color = Memory
• Robert Penner’s web site
  • Naive animation example
  • Sprite/tweened animation example
• Sample implementations of selected 2D graphics primitives
• Hello GL!
  • Anatomy of a modern OpenGL program
  • WebGL starter modules and an accompanying demo
  • Introduction to GLSL
  • WebGL demo showing a little more functionality
• 3D Object Modeling
• The Math of Space
  • Sample JavaScript vector library with accompanying QUnit test suite
  • The QUnit home page
• Vectors in Action: Backface Culling
• Transforms: More Than Meets the Eye
• Projection
  • WebGL demo showing (non-library) transformation matrices
• Look At
  • Example of shadows by projection
• Modeling Light
  • Diffuse lighting example
• Specular lighting example
• Texture mapping example
• Blending example with two textures
• Interaction & Dynamic Behavior Strategies
• Clipping, Hidden Surface Removal

Related External Links

These links take you to web sites beyond this server. The sites are in no particular order or bias, just as they came to mind.

• canvas element resources
  • The Mozilla Developer Network’s Canvas tutorial—quite possibly all you’ll need outside of class
  • The Mozilla Developer Network’s Canvas reference—in case you need even more
  • The official canvas element specification from the W3C
• Robert Penner’s web site contains excellent resources for understanding and implementing keyframe animation, tweening, and easing
• The OpenGL home page
  • What’s New in OpenGL
  • Getting Started with Coding OpenGL
  • OpenGL Shading Language (GLSL)
  • The WebGL home page—Bringing 3D to web browsers without requiring plugins
• The Graphics Gems Repository: The place for seminal, foundational graphics algorithms and code
• Chrome Experiments: Lots of inspiration here
• Learning WebGL is a great resource for, well, learning WebGL, with lots of sample code
• Wikipedia: A good starting point for virtually any concept lookup
• The pavement art of Julian Beever—his “3D illusion” drawings bear out the mathematics of 3D projection
• An American Mathematical Society article by David Austin, on some of the mathematics behind Pixar’s animation: Moving Remy in Harmony: Pixar’s Use of Harmonic Functions