CMSI 371 Computer Graphics, Spring 2017
This assignment is the actual big 2D scene, implemented from scratch with our homebrew keyframe/tweening library. Let your imagination run wild :)
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.
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
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.