CMSC 381: Intro to graphics programming
Spring 2017
Prof. Blaheta
Computers have been creating graphics since at least the 1960s, but in the last few decades an exponential increase in computing power has meant that computer graphics are now capable of incredibly high-definition photorealistic graphical output at high speeds---which in turn means that we all now see computer-generated images and video on a daily basis. Games, movies, print media, and most professional websites are all but guaranteed to make use of some sort of generated graphics.
In this course, we'll write programs to create graphics and better understand some of the math and theory that makes them work.
This class meets 2:00pm on MWF in Ruffner 352.
The textbook is Edward Angel and Dave Shreiner, Interactive computer graphics: a top-down approach with WebGL, 7e (ISBN 978-0-13-357484-5).
Course materials
- Syllabus
- Collaboration policy
- Textbook website
- Lectures:
- Files for the Common/ directory
- WebGL reference card
- The dress; xkcd about the dress
- Metropolis light transport
Homework
- For 25 Jan: finish exercises from 23 Jan: draw a shape in outline; draw a quadrilateral; make multiple shapes side-by-side; and draw a circle. Try using separate files for each one!
- For 27 Jan: experiment with the javascript in the files we've been working with, and get it to draw a circle (programmatically, i.e. don't just type in a bunch of coordinates).
- For 30 Jan: Play with gasket1 and see what happens when you move points around, etc; as you read/listen about shaders, try tweaking the gasket code to shade itself differently.
- For 1 Feb: Convert circle into a beachball.
- For 3 Feb: Make your beachball spin.
- For 20 Feb: Draw a single triangle (like in our first examples), and animate it to rotate about an apex that's not at (0,0). Do it using matrices for all the affine transforms; don't do it by just starting the apex at (0,0) and moving it later. Also, bring your laptops on Monday.
- For 22 Feb: Keep with the triangle and once you've got it rotating, make it move around the canvas (still rotating about the apex, but now the apex is moving). Bounce off the edges, but no worries about gravity or if it hangs off the edge (as long as it doesn't get stuck there). All the work (translation, rotation, and scaling if you do it) should be done via matrices multiplied together.
- For 15 Mar: Reuse or build a small scene with one or two "solid" objects, and use lookAt and ortho to build an orthographic camera to view the scene. (and bring your laptop to show it to us/ask questions if it's not working)
- For 17 Mar: Adapt your scene from Wednesday to use perspective instead of ortho. Try different values and see what they do. If any look particularly interesting or unusual, make note of the parameters and bring them up in class.
- For 22 Mar: By choosing different lookAt orientations and different ortho and perspective parameters, inspect a variety of different model-view and camera matrices and write down a few that seem to have interesting properties ("this one is just like a rotation matrix", etc). Also, bring your laptops.
- For 27 Mar: Do the exam!
- For 29 Mar: Explain why a full moon (on a clear night) is much more than twice as bright as a half moon. Bring your explanation with you to class. Also, keep your eyes open for good examples of deceptive coloration, interesting differences between diffuse and specular reflection, or anything like that, and try to get a good photo of it if you can.
- For 31 Mar: Copy the files for today's work (lighting-1) into your own directory and play with them; try editing the shaders to set up an ambient and a diffuse component for a Phong shading model (specular will come later).
- For 3 Apr: Copy today's files (lighting-2) into your directory and try to compute the vectors appropriately, and get diffuse lighting working. (Look for the TODO in the code we've already written.)
Projects etc
- Due 13 Feb at 4pm: Project 1
- Due 24 Apr at 4pm: Project 2
- Due 8 May at 5:30pm (final): Project 3
(Edited 2 May 2:30pm) (Edited 7 May 4:50pm)
- strip.txt, teapot.txt; Note: tweaked as of 2 May 2:30pm, although the old files are still valid if you already have them; see edited handout for a couple clarifications about the data in the files.
In-class demos
All these files can be accessed directly on the server (torvalds itself) in /srv/http/htdocs/courses/cmsc381/s17/class/.
- 20 Jan: triangle
- 25 Jan: triangle2, box, circle (doesn't work yet)
- 27 Jan: circle2, gasket1
- 30 Jan: gasket2, varying
- 1 Feb: spinning
- 3 Feb: events, events2 (fixed click location)
- 17 Feb: matrix
- 22 Feb: octa
- 13 Mar: octa-view
- 17 Mar: daniel-persp
- 20 Mar: octa-persp
- 24 Mar: scene (in-class version, doesn't work yet); scene-fixed (fixed: added case to mult. Also added two more box objects and changed the camera angle to make them all visible)
- 29 Mar: lighting-1
- 31 Mar: lighting-2
- 3 Apr: lighting-2
- 14 Apr: sphere-1, sphere-2
- 17 Apr: sphere-spec, sphere-spec-2
Board photos
- 18 Jan: left, right
- 20 Jan: board
- 25 Jan: board
- 27 Jan: left, right
- 1 Feb: board
- 6 Feb: board
- 8 Feb: front, right (mine); left, side, back (yours)
- 10 Feb: front, right (mine); left, side, back (yours)
- 13 Feb: left, front, right, side, back
- 15 Feb: left, right
- 17 Feb: board
- 20 Feb: board
- 22 Feb: left, right
- 27 Feb: left, right
- 1 Mar: middle; Still life photos: still-upleft, still-upright, still-x, still-y, still-z; Projections: left, right, side, back-left, back-right
- 3 Mar: board
- 13 Mar: board
- 15 Mar: board
- 17 Mar: board
- 20 Mar: board
- 22 Mar: board
- 27 Mar: board
- 29 Mar: left, right
- 31 Mar: board
- 5 Apr: left, right
- 10 Apr: board
- 12 Apr: board
- 19 Apr: left, right, side, back-left, back-right
- 21 Apr: front, side, back-left, back-right
- 24 Apr: board
- 28 Apr: left, middle, right
- 1 May: board