Described Dynamic Visual Content
An Introduction with Examples in Java
|
Prof. David Bernstein
James Madison University
|
|
Computer Science Department
|
bernstdh@jmu.edu
|
Described Dynamics
- The Concept:
- Describe the way the visual "stream" changes over time
- Start with a set of components (i.e., the
"participants" in the "action") and then
describe component-by-component changes
- Analogy:
- A play with a script, stage directions, actors,
sets, and a stage
Terminology for Described Dynamics
- Sprite:
- Common Usage - an imaginary being or elf
- Animation - a discrete piece of visual content that can
respond to descriptions of changes
- Stage:
- The "component" that sprites act "on"
Quick Start
- Additional Requirements:
- Manage a collection of sprites
- Repeatedly inform each sprite in this collection that
it should perform the next task in its script
- Render this collection of sprites
- Design Alternatives:
- As with dynamic sampled content we could add the
necessary enhancements by: adding code to the
Visualization
class, decorating the
Visualization
class or specializing
Visualization
class
- As with dynamic sampled content, specialization is
the best option
"Quick Start" (cont.)
Requirements of a Sprite
javaexamples/visual/dynamic/described/Sprite.java
"Quick Start" (cont.)
Structure of a Stage
Class
javaexamples/visual/dynamic/described/Stage.java
(Fragment: skeleton)
"Quick Start" (cont.)
Timer Events
javaexamples/visual/dynamic/described/Stage.java
(Fragment: metronomeevents)
"Quick Start" (cont.)
Structure of the AbstractSprite
Class
javaexamples/visual/dynamic/described/AbstractSprite.java
(Fragment: skeleton)
"Quick Start" (cont.)
Rendering
javaexamples/visual/dynamic/described/AbstractSprite.java
(Fragment: render)
"Quick Start" (cont.)
An Example: FloatingSprite
javaexamples/visual/dynamic/described/FloatingSprite.java
(Fragment: skeleton)
javaexamples/visual/dynamic/described/FloatingSprite.java
(Fragment: getContent)
javaexamples/visual/dynamic/described/FloatingSprite.java
(Fragment: handleTick)
"Quick Start" (cont.)
Using the FloatingSprite
javaexamples/visual/dynamic/described/FloatingSpriteApp.java
(Fragment: skeleton0)
Encapsulating Rule-Based Sprites
Put simple rules in the handleTick()
method
Sprite Interactions
- Motivation:
- Rule-based sprites often need to interact with one another
- The Issue:
- This often means we need to determine when sprites
intersect
Sprite Interactions (cont.)
Rectangular Sprites
Sprite Interactions (cont.)
Non-Rectangular Sprites
Sprite Interactions (cont.)
Non-Convex Sprites
Sprite Interactions (cont.)
Using Bounding Boxes
Sprite Interactions (cont.)
Modifying the Sprite
Class
javaexamples/visual/dynamic/described/AbstractSprite.java
(Fragment: intersects)
Sprite Interactions (cont.)
The Protagonists
javaexamples/visual/dynamic/described/RuleBasedSprite.java
Sprite Interactions (cont.)
An Example
javaexamples/visual/dynamic/described/Fish.java
javaexamples/visual/dynamic/described/Shark.java
javaexamples/visual/dynamic/described/FishTankApp.java
User Interaction
- Where We Are:
- Sprites do not respond to user input
- Where We Are Going:
- Make the
Sprite
a
KeyListener
, MouseListener
or
MouseMotionListener
User Interaction (cont.)
A Change to the Visualization
Class
javaexamples/gui/Visualization.java
(Fragment: listeners)
User Interaction (cont.)
An Addictive (a.k.a. Boring) Game
javaexamples/visual/dynamic/described/Cupola.java
(Fragment: skeleton)
javaexamples/visual/dynamic/described/Cupola.java
(Fragment: mouseMotionListener)
javaexamples/visual/dynamic/described/Cupola.java
(Fragment: handleTick)
javaexamples/visual/dynamic/described/Balloon.java
A "Key Time" Approach
First describe "key times" and then describe how to interpolate
between them
Traditional Cel Animation
- The Good Jobs:
- Developing characters
- Drawing important frames
- Drawing backgrounds
- The Bad Job:
- Drawing all of the frames in between the important frames
Computerizing Cel Animation
Tweening is done by the computer
Design (cont.)
A TweeningSprite
Class
javaexamples/visual/dynamic/described/TweeningSprite.java
(Fragment: skeleton)
javaexamples/visual/dynamic/described/TweeningSprite.java
(Fragment: addKeyTime)
Location Tweening
Location Tweening (cont.)
A TweeningSprite
Class
javaexamples/visual/dynamic/described/TweeningSprite.java
(Fragment: tweenLocation)
Rotation Tweening
Rotation Tweening (cont.)
More of the TweeningSprite
Class
javaexamples/visual/dynamic/described/TweeningSprite.java
(Fragment: tweenRotation)
Rotation Tweening (cont.)
An Example of Pure Rotation Tweening
javaexamples/visual/dynamic/described/Airplane.java
Rotation Tweening (cont.)
Another Example of Pure Rotation Tweening
javaexamples/visual/dynamic/described/BuzzyOnMars.java
Rotation Tweening (cont.)
An Example of Alignment
javaexamples/visual/dynamic/described/BusOnRoute.java
Tweening Samples and Descriptions
- The Idea:
- Tween what we might think of as the visual content that
makes up the sprite
- Types:
- Tweening Samples (i.e., rasters)
- Tweening Descriptions (i.e., shapes)
Tweening Samples and Descriptions (cont.)
Tweening Sampled Content
javaexamples/visual/statik/sampled/AggregateContent.java
javaexamples/visual/dynamic/described/SampledSprite.java
Tweening Samples and Descriptions (cont.)
Tweening Sampled Content - An Example
javaexamples/visual/dynamic/described/CrystalBall.java
Tweening Samples and Descriptions (cont.)
Tweening Sampled Content - Another Example
javaexamples/visual/dynamic/described/Professor.java
Tweening Samples and Descriptions (cont.)
Shape Tweening
Tweening Samples and Descriptions (cont.)
Shape Tweening - Using java/awt/geom/PathIterator
javaexamples/visual/statik/described/Content.java
(Fragment: PathIterator)
Tweening Samples and Descriptions (cont.)
Shape Tweening - described.AggregateContent
javaexamples/visual/statik/described/AggregateContent.java
Tweening Samples and Descriptions (cont.)
A DescribedSprite
javaexamples/visual/dynamic/described/DescribedSprite.java
Tweening Samples and Descriptions (cont.)
Shape Tweening - An Example
javaexamples/visual/dynamic/described/BuzzyJumping.java
Tweening Samples and Descriptions (cont.)
An Example of a DescribedSprite
javaexamples/visual/dynamic/described/BuzzyJumping.java
Dynamics with Multiple Views
An Animated Diptych
javaexamples/visual/dynamic/described/DiptychApp.java
Dynamics with Multiple Views (cont.)
Picture-in-a-Picture
javaexamples/visual/dynamic/described/PIPApp.java
Dynamics with Multiple Views (cont.)
Jumbo Tron (Two Views of one Model)
javaexamples/visual/dynamic/described/JumboTronApp.java
There's Always More to Learn