Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
31 lines (19 sloc) 3.19 KB

CMSI 371 Computer Graphics, Spring 2017

Assignment 0222

This assignment is the actual big 2D scene, implemented from scratch with our homebrew keyframe/tweening library. Let your imagination run wild :)

Background Reading

Read Robert Penner’s book chapter on motion, tweening, and easing. His overall website holds additional useful resources as well.

Automated Feedback Setup

Like the previous assignment, please send your repository’s URL to Ed Seim. Also like the previous assignment, automated feedback only covers code presentation and formatting.

For Submission

Modify the starter scene.json so that it features a 2D animated scene that is written and directed (and implemented!) by you and starring the “sprites” (actually parameterized drawing functions) from the preceding assignment. Ideally, your scene will work as a very brief animated short, with a quick and engaging little story and characters.

To support your new and improved animated scene, enhance the keyframe-tweener.js animation module in the following ways. Of course, you should demonstrate these enhancements by using them in your own animated short (a.k.a. “eating your own dog food”).

Overlapping/Skipping Keyframe Ranges

Limitation: The current version of KeyframeTweener requires that all tweened properties appear in every keyframe of a sprite. That is, if a translation is specified in one keyframe, the destination translation must be specified in the next one, or else the sprite gets tweened back to some default value.

Improvement to Make: Modify the animation code so that properties can skip keyframes, allowing properties to start and end tweening at any time. That way, a sprite can move from one location to another in, say, 100 frames, but within those 100 frames it might perform multiple rotations.

Arbitrary Tweenable Properties

Limitation: In its current form, KeyframeTweener can only tween whole-sprite translation, rotation, and scaling. In addition, that code is quite repetitive.

Improvement to Make: Extend KeyframeTweener so that it can handle arbitrary tweenable property values in the keyframe objects that it processes. This feature is intended precisely to support the ability to animate your parameterized sprites in addition to just whole-sprite translation, rotation, and scaling. Design the data structure and write the needed code to process (tween) these properties then relay them into your sprite’s object parameter. Ideally, this work will also reduce the repetitive transform-tweening code that is in the current KeyframeTweener.

New Tweening Functions

Limitation: The current KeyframeTweener implements only four tweening functions.

Improvement to Make: Adapt at least two (2) non-monotonic tweening functions from either Dan Rogers’s library or Tim Groleau’s Easing Function Generator (Flash required) into KeyframeTweener and use them in your animated scene. The more visually distinct, the better.