- Forward


Described Dynamic Visual Content
An Introduction with Examples in Java


Prof. David Bernstein
James Madison University

Computer Science Department
bernstdh@jmu.edu

Print

Described Dynamics
Back SMYC Forward
  • 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
Back SMYC Forward
  • 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
Back SMYC Forward
  • 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.)
Back SMYC Forward

Requirements of a Sprite

javaexamples/visual/dynamic/described/Sprite.java
 
"Quick Start" (cont.)
Back SMYC Forward

Structure of a Stage Class

javaexamples/visual/dynamic/described/Stage.java (Fragment: skeleton)
 
"Quick Start" (cont.)
Back SMYC Forward

Timer Events

javaexamples/visual/dynamic/described/Stage.java (Fragment: metronomeevents)
 
"Quick Start" (cont.)
Back SMYC Forward
  • Two High-Level Designs of Sprites:
    • sprite_design1
    • sprite_design2
  • Benefits of the Decorator:
    • It gives us the flexibility to associate a different SimpleContent with a particular AbstractSprite at different points in time
    • Expand
"Quick Start" (cont.)
Back SMYC Forward
  • Different Conceptualizations of a Sprite:
    • Rule following
    • Interpolate between known states at different times
  • Mid-Level Design Alternatives:
    • Use the decorator pattern
      sprite-types_design2
    • Use specialization
      sprite-types_design3
    • Use the strategy pattern
      sprite-types_design1
    • Expand
"Quick Start" (cont.)
Back SMYC Forward

Structure of the AbstractSprite Class

javaexamples/visual/dynamic/described/AbstractSprite.java (Fragment: skeleton)
 
"Quick Start" (cont.)
Back SMYC Forward

Rendering

javaexamples/visual/dynamic/described/AbstractSprite.java (Fragment: render)
 
"Quick Start" (cont.)
Back SMYC Forward

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.)
Back SMYC Forward

Using the FloatingSprite

javaexamples/visual/dynamic/described/FloatingSpriteApp.java (Fragment: skeleton0)
 
Encapsulating Rule-Based Sprites
Back SMYC Forward

Put simple rules in the handleTick() method

Sprite Interactions
Back SMYC Forward
  • 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.)
Back SMYC Forward

Rectangular Sprites

intersects3
Sprite Interactions (cont.)
Back SMYC Forward

Non-Rectangular Sprites

intersects4
Sprite Interactions (cont.)
Back SMYC Forward

Non-Convex Sprites

intersects2
Sprite Interactions (cont.)
Back SMYC Forward

Using Bounding Boxes

intersects1
Sprite Interactions (cont.)
Back SMYC Forward

Modifying the Sprite Class

javaexamples/visual/dynamic/described/AbstractSprite.java (Fragment: intersects)
 
Sprite Interactions (cont.)
Back SMYC Forward

The Protagonists

javaexamples/visual/dynamic/described/RuleBasedSprite.java
 
Sprite Interactions (cont.)
Back SMYC Forward

An Example

javaexamples/visual/dynamic/described/Fish.java
 
javaexamples/visual/dynamic/described/Shark.java
 
javaexamples/visual/dynamic/described/FishTankApp.java
 
User Interaction
Back SMYC Forward
  • 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.)
Back SMYC Forward

A Change to the Visualization Class

javaexamples/gui/Visualization.java (Fragment: listeners)
 
User Interaction (cont.)
Back SMYC Forward

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
Back SMYC Forward

First describe "key times" and then describe how to interpolate between them

Traditional Cel Animation
Back SMYC Forward
  • 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
Back SMYC Forward

Tweening is done by the computer

Design
Back SMYC Forward
  • Options:
    • Attributes at each key time are kept in the TransformableContent objects themselves
    • Attributes at each key time are kept externally
  • Tradeoffs:
    • The first is more intuitive
    • The first makes it difficult to interpolate iteratively
    • Expand
Design (cont.)
Back SMYC Forward

A TweeningSprite Class

javaexamples/visual/dynamic/described/TweeningSprite.java (Fragment: skeleton)
 
javaexamples/visual/dynamic/described/TweeningSprite.java (Fragment: addKeyTime)
 
Location Tweening
Back SMYC Forward
tweening_location
Location Tweening (cont.)
Back SMYC Forward

A TweeningSprite Class

javaexamples/visual/dynamic/described/TweeningSprite.java (Fragment: tweenLocation)
 
Rotation Tweening
Back SMYC Forward
tweening_rotation
Rotation Tweening (cont.)
Back SMYC Forward

More of the TweeningSprite Class

javaexamples/visual/dynamic/described/TweeningSprite.java (Fragment: tweenRotation)
 
Rotation Tweening (cont.)
Back SMYC Forward

An Example of Pure Rotation Tweening

javaexamples/visual/dynamic/described/Airplane.java
 
Rotation Tweening (cont.)
Back SMYC Forward

Another Example of Pure Rotation Tweening

javaexamples/visual/dynamic/described/BuzzyOnMars.java
 
Rotation Tweening (cont.)
Back SMYC Forward

An Example of Alignment

javaexamples/visual/dynamic/described/BusOnRoute.java
 
Tweening Samples and Descriptions
Back SMYC Forward
  • 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.)
Back SMYC Forward

Tweening Sampled Content

javaexamples/visual/statik/sampled/AggregateContent.java
 
javaexamples/visual/dynamic/described/SampledSprite.java
 
Tweening Samples and Descriptions (cont.)
Back SMYC Forward

Tweening Sampled Content - An Example

javaexamples/visual/dynamic/described/CrystalBall.java
 
Tweening Samples and Descriptions (cont.)
Back SMYC Forward

Tweening Sampled Content - Another Example

javaexamples/visual/dynamic/described/Professor.java
 
Tweening Samples and Descriptions (cont.)
Back SMYC Forward

Shape Tweening

tweening_shape
Tweening Samples and Descriptions (cont.)
Back SMYC Forward

Shape Tweening - Using java/awt/geom/PathIterator

javaexamples/visual/statik/described/Content.java (Fragment: PathIterator)
 
Tweening Samples and Descriptions (cont.)
Back SMYC Forward

Shape Tweening - described.AggregateContent

javaexamples/visual/statik/described/AggregateContent.java
 
Tweening Samples and Descriptions (cont.)
Back SMYC Forward

A DescribedSprite

javaexamples/visual/dynamic/described/DescribedSprite.java
 
Tweening Samples and Descriptions (cont.)
Back SMYC Forward

Shape Tweening - An Example

javaexamples/visual/dynamic/described/BuzzyJumping.java
 
Tweening Samples and Descriptions (cont.)
Back SMYC Forward

An Example of a DescribedSprite

javaexamples/visual/dynamic/described/BuzzyJumping.java
 
Dynamics with Multiple Views
Back SMYC Forward

An Animated Diptych

javaexamples/visual/dynamic/described/DiptychApp.java
 
Dynamics with Multiple Views (cont.)
Back SMYC Forward

Picture-in-a-Picture

javaexamples/visual/dynamic/described/PIPApp.java
 
Dynamics with Multiple Views (cont.)
Back SMYC Forward

Jumbo Tron (Two Views of one Model)

javaexamples/visual/dynamic/described/JumboTronApp.java
 
There's Always More to Learn
Back -