Final Review and Exam

Prerequisites: Lessons 1–21, with emphasis on 15–21.

Revised 2012 Dec 8 (and again Dec 9, but only to remove the word “DRAFT”).

Overview

The procedures and format for the final exam will be similar to the midterm. The content, of course, will be different. Most questions will be about topics covered in lessons 15–21. Some questions will ask you to compare this material with earlier material (e.g., compare SVG with canvas). There will be no questions specifically about the earlier material on its own; you have tested enough on that already.

This review guide is organized in three parts:

1. Exam Format and Arrangements
2. General Learning Objectives
3. Specific Topics

I. Exam Format and Arrangements

This will be a take-home exam, available in Oncourse Assignments Thursday, December 13, 12:00 noon, and due Monday, December 17, 12:00 noon.

You may use books and notes. You may use a computer and the Internet for reference and testing. You may not give or receive aid: your answers must be your own work. (You may ask the instructor for clarification of questions.)

You may return the exam through Oncourse (scan and upload attachment), FAX, or delivery of the paper to my office.

Question types may include essay, short answer, sketching lines and curves, and writing short segments of SVG or JavaScript code.

II. General Learning Objectives

The final exam emphasizes material covered after the midterm exam. Some topics covered before the midterm may be implicitly covered—for example, you may be asked to compare SVG with canvas drawing APIs, or to write a script that manipulates an SVG drawing. Otherwise, no coverage of pre-midterm material is planned. For example, I will not ask you to write a script that draws a dozen rectangles on the canvas.

Since the midterm exam, students should have acquired some further knowledge about graphics concepts, audio and video, static SVG, animated and scripted SVG, relations between SVG and canvas, WebGL, and WebRTC.

A. Graphics Concepts

Be able to explain the concepts of

1. Graphics transforms (translate, rotate, scale).
2. Filters.
3. Grouped elements.
4. Mask and clip path.

B. Audio and Video

Be able to

1. Explain the concepts of codec and container.
2. Write and script HTML5 <audio> and <video> elements.

C. Static SVG

Be able to

1. Write code to create SVG drawings with common shapes and paths; set fill and stroke styles; use colors, gradients, and patterns.
2. Create and use groups of elements.
3. Apply transforms and filters.

D. Animated and Dynamic SVG

Be able to

1. Distinguish between declarative and scripted animation.
2. Create declarative SVG animations.
3. Use scripts to respond to user events, modify the DOM, and randomize SVG elements.

E. Additional Topics

Be able to

1. Compare canvas and SVG.
2. Discuss WebGL and WebRTC.

III. Specific Topics

Here follows a list of more specific learning outcomes and review questions, arranged chronologically by lesson. Most of these should come as no surprise, since I have been stating the learning objectives near the beginning of each lesson, since Lesson 16: Audio and Video.

15 Canvas Transforms and Shadows

Learning Outcomes

Be able to

1. Explain the concepts of translation, rotation, and scaling as graphics transforms.
2. Write JavaScript code that transforms and adds shadow effects to objects drawn on the canvas.

Review Questions

If drawArrow() would normally draw an arrow from (50, 50) to (150, 50), describe how the drawing would be different …

1. If ctx.translate(100, 10); is the current transform?
2. If ctx.rotate(Math.PI/2); is the current transform?

16 Audio and Video

Learning Outcomes

1. Be able to explain the difference between container formats and (video and audio) codecs.
2. Recognize common container format names: MPEG 4, Flash Video, Ogg, WebM, Audio Video Interleave (AVI), QuickTime (.mov). By “recognize” I mean that, when you see or hear the name, such as “MPEG 4”, you know it is a container format.
3. Recognize common video codec names: H.264 (MPEG-4 Part 10, MPEG-4 AVC), Theora, VP8.
4. Recognize common audio codec names: MPEG-1 Audio Layer 3 (MP3), Advanced Audio Coding (AAC), Vorbis.
5. Be able to state which of the above codecs are patent encumbered.
6. Be able to explain to a business manager why a single video format is not enough to support HTML5 video for all popular browsers.
7. Be able to find a conversion tool (for converting or “transcoding” between video formats).
8. Be able to write HTML code for audio, video, and source elements.
9. Be able to script the audio and video elements.

Review Questions

1. Name three codecs (one audio, two video) which are commonly believe not to be patent encumbered.
2. Write a <video> element to play the video file at the relative URL “birthday.avi” with the default player controls. Give your element an id attribute so it can be referenced from a script.
3. Write a short script to change the video file played by the above video element to “sleeping.ogv”.

17 Introduction to SVG

Learning Outcomes

Be able to:

1. Describe the nature and advantages of vector graphics over bitmapped graphics.
2. Create stand-alone SVG documents, and SVG elements within HTML documents.
3. Write SVG elements describing lines, rectangles, circles, ellipses, paths, images, and text.
4. Write attributes for these elements to control stroke and fill styles (including colors, stroke-width, stroke-dasharray, stroke-linecap), and text styles (font size, etc.).
5. Define, create, and use groups of elements with the defs, g, and use tags.
6. Transform SVG elements (translate, rotate, scale).

Review Questions

1. Write the SVG element for a red-filled rectangle with top left corner (10, 20), width 120, and height 90.
2. Define an SVG group consisting of two concentric circles centered at (0, 0).
3. Use the group, moving its center to (100, 150) and doubling its radius.

18 Fancier SVG

Learning Outcomes

Be able to

1. Create gradients and patterns in SVG.
2. Explain the concepts of mask and clip paths.
3. Use masks and clip paths in SVG.
4. Apply a Gaussian blur filter in SVG.

Review Questions

1. Create a pattern from the image “grass.jpg” and use it to fill a rectangle.
2. Explain the difference between a mask and a clipping path.

19 Declarative Animation in SVG

Learning Outcomes

Be able to:

1. Declaratively animate most attributes of most graphical SVG elements, motion along a path, and transformations, using <animate>, <animateMotion>, <animateTransform>.
2. Use events and times to control the starting and stopping of animations and to set attribute values (using <set>).

Review Questions

1. Use SMIL to animate a rectangle moving from (100, 100) to (500, 500) over a period of 10 seconds, repeating 5 times and then sticking at its final position of (500, 500).
2. Modify the above rectangle animation so that it begins 1.5 seconds after a mouse click on the SVG element identified as “slowStartButton”.

20 Dynamic SVG

Learning Outcomes

Be able to use JavaScript in combination with SVG to:

1. Respond to user actions such as mouse events and HTML controls
2. Insert, modify, and remove elements of the DOM tree
3. Randomize SVG elements and attributes

Review Questions

1. Write a script which uses a loop to insert 20 red-stroked, unfilled circles into the SVG drawing which begins <svg id="svg0" ...>. The circle centers should be spaced evenly at positions (70, 300), (90, 300), (110, 300), …, (450, 300).

21 Comparing Technologies, Future Prospects

Learning Outcomes

Be able to

1. Discuss the differences and similarities between SVG and the HTML5 canvas.
2. Explain what is WebGL.
3. Explain the goals of the WebRTC project.

Review Questions

Same as learning outcomes.