CMSI 371
Computer Graphics
Spring 2012
- 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.
- Syllabus
- How to use
git
overssh
git
sample code repositories:- Graphics sample code from the JavaScript textbook
- Multicourse sample code bazaar
Assignments
- Assignment 0126: 1b, 1c, 4a,
4b, 4c, 4d, 4e, 4f
- You may find the
canvas-template
sample helpful for this one.
- You may find the
- Assignment 0209: 1c, 2a, 4a,
4b, 4c, 4d, 4e, 4f
- As stated in the assignment, your code should be based on the sprite animation example with keyframes and eased tweening.
- Assignment 0306: 1a, 2b, 3a,
3b, 4a, 4b, 4c, 4d, 4e, 4f
- As stated in the assignment, your code should be based on the nanoshop and primitives sample code.
- Assignment 0315: 2b, 2c, 2d,
3c, 3d, 3e, 4a, 4b, 4c, 4d, 4e, 4f
- As stated in the assignment, your code should be based on the introductory WebGL code.
- Assignment 0410: 2b, 2c, 2d,
2e, 3c, 3d, 3e, 4a, 4b, 4c, 4d, 4e, 4f
- If you like, you might find this starter vector library to be useful (complete with test suite!).
- Assignment 0426: 1d, 1e, 2f,
2g, 2h, 3e, 4a, 4b, 4c, 4d, 4e, 4f
- Bazaar examples
light-start-webgl
andlight-more-webgl
have lighting code that you may want to study and/or adapt for this assignment.
- Bazaar examples
Handouts/Sample Code
- 0124: Naive animation example
- 0126: Sprite animation example with keyframes and eased tweening
- 0131: A jsFiddle version of the sprite animation example (copy and save in your own fiddle if you like)
- 0202: Graphics = Light = Color = Memory, simple image processing sample
- 0214: Sample implementations of selected 2D graphics primitives
- 0221: OpenGL/WebGL startup examples
- WebGL starter modules and an accompanying demo
- For comparative purposes, a similar OpenGL program in C
- 0223: 3D Object Modeling, The Math of Space, Transforms: More Than Meets the Eye
- WebGL demo showing a few more WebGL/GLSL capabilities
- 0308: Projection
- 0327: Look At
- 0410: Modeling Light
- 0419: Clipping
- 0424: 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 MAME (Multiple Arcade Machine Emulator) home page: For kickin’-it-old-school graphics
- Chrome Experiments: Lots of inspiration here
- 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