INFO-I400 Topics in Informatics

Graphics, Animation, and Multimedia for the Web

Lessons

Part I: JavaScript and Canvas

Week 1, August 27–September 1, 2012

  1. Introduction
  2. JavaScript Fundamentals
  3. Introduction to the Canvas

Week 2, September 3–8, 2012

  1. JavaScript Functions
  2. Simple Canvas Animations

Week 3, September 10–15, 2012

  1. Colors and Gradients
  2. JavaScript Objects
  3. JavaScript Arrays

Week 4, September 17–22, 2012

  1. Controls and Events
  2. Canvas: Images and Patterns

Week 5, September 24–29, 2012

  1. JavaScript: Strings
  2. Canvas: Drawing Text
  3. Robust JavaScript

Week 6, October 1–6, 2012

  1. More about Lines and Curves

Week 7, October 8–13, 2012

Midterm review and exam

Week 8, October 15–20, 2012

  1. Canvas Transforms and Shadows. Translation, scaling, rotation; the context stack; shadow effects.
    • Discussion Assignment, due Monday Oct 21: respond in Oncourse Forums / Discussion Assignments / DA 2 Project Proposals (10 points).

Part II: Audio and Video

Week 9, October 22–27, 2012

  1. Audio and Video

Part III: Scalar Vector Graphics

Week 10, October 29–November 3, 2012

  1. Introduction to SVG. Basic figures and shapes, text, and images. Colors. Grouping, defining and using elements. Transforms.
    • Lab 3, due 11:59 p.m. Monday, November 12, 2012.

Week 11, November 5–10, 2012

  1. Fancier SVG. Gradients, patterns, clipping path and mask, filters.
    • Lab 4, due 11:59 p.m. Monday, November 26 (Monday after Thanksgiving break)

Week 12, November 12–17, 2012

  1. Declarative Animation in SVG. Animation with SMIL.
    • Lab 5, due 11:59 p.m. Monday, December 3.

Week 13, November 26–December 1, 2012

  1. Dynamic SVG. Using JavaScript to animate or make other changes in SVG through the DOM.
    • No lab or discussion assignment

Week 14, December 3–8, 2012

  1. Comparing Technologies, Future Prospects

Week 15, December 11–17, 2012

(Monday through Monday)

Final review and exam (revised 2012 Dec 8)