Abstract - Vrije Universiteit Amsterdam

embarrassedlopsidedAI and Robotics

Nov 14, 2013 (3 years and 6 months ago)

126 views

Johan F. Hoorn, 2002


Motion Visualization

1

Running head:
MOTION VISUALIZATION








Motion Visualization


Johan F. Hoorn


vrije Universiteit
, Amsterdam,
the Netherlands








Correspondence Address:

Johan F. Hoorn

Faculty of Sciences

Department of Computer Science

Section Information Management
& Software Engineering

Sub section Human Computer Interaction, Multimedia & Culture

Tel.: +31
-
(0)20
-
444 7614

Fax: +31
-
(0)20
-
444 7728


jfhoorn@cs.vu.nl

Johan F. Hoorn, 2002


Motion Visualization

2


Abstract


In this paper, you get introduced to some of the appli
cation domains in which motion plays a special role
such as gaming, developing intelligent adaptive agents, Virtual Reality for education, and gesture
-
based interfaces
for industrial robotics. We will tentatively look into examples of motion representation

and then elaborate on making
scenario’s both for usability testing and for making games. We then look at some cartoon drawing techniques that
can be useful in creating animated agents. Central issue is whether motion representations are understandable to
everyday users or not.



Two Web sites on motion perception are obligatory reading:
http://www.yorku.ca/eye/movement.htm

and
http://www
.biols.susx.ac.uk/home/George_Mather/Motion/
. You need to read through these sites to work on the
exercises.


Johan F. Hoorn, 2002


Motion Visualization

3


Motion Visualization

Knowing some of the principles of making a movie or animation is important for writing and testing
computer applications.
Testing the usability of a newly developed system is often done with use
-
case scenarios,
invented situations in which the application should show itself useful. Potential users can act out such scenarios to
find deficits in hardware and software of a devic
e. Specialists on acting out scenarios are theater and filmmakers,
so that learning about their tricks and tools is to the designer’s benefit. Also earlier in the process of designing a
computer system, however, knowing how an animation works, how to build

a sequence of images people can
understand is influential for the success of your system.

Virtual operation rooms, Intensive Care hospital units, air
-
traffic simulation, and nuclear power plant
process control are examples in which computerized motion g
eneration plays an important and sometimes crucial
role in preventing disasters or when done badly, causing them. However, you also have to know about the
principles of motion pictures to improve, for example, cache performance in video
-
on
-
demand systems,
content
-
based queries of video databases of Interpol, when you work with Amiga animation computers, when you
program adventure games, build an animation agent, or if you want to create an editing suite with 3
-
D graphics
applications. Broadly speaking, anyt
hing that has Flash, RealPlayer or QuickTime in it or makes use of avi files is
liable to the principles of making and viewing motion pictures (e.g.,
http://www.wired.com/animation/
).
However, PowerPoint presentations and information kiosks on the Internet

also can benefit from them.


Figure 1.

Game design takes movie knowledge:
Alice

(American McGee) and Konoko (
Oni
, Bungie)
have strong animations (
http://www.3dactionplanet.com/oni/images/konoko_rogue.jpg
).



Figure 2.

Animated agents. From left to right:

Two tutor agents, a product presenter dog
(
http://www.ics.uci.edu/~kobsa/courses/ICS104/course
-
notes/metaphors.htm
), the conversational agent Max
(
http://www.techfak.uni
-
bielefeld.de/ags/wbski/lehre/digiSA/Methoden_der_KI/WS0102/methki15.pdf
), and
Robby t
he Robot (Microsoft).


Johan F. Hoorn, 2002


Motion Visualization

4


Animation can be important in education as well. In chemistry, for example, students are trained in
interpreting changes in matter at the visible laboratory level (e.g., color changes, formation of solids, and
boiling). At the invi
sible, molecular level, they should recognize changes in structure and processes of, for
example, atoms and ions. The VisChem screen shot shows three representation forms or “modes of thinking” for
melting ice (
http://www.uws.edu.au/science/Staff/rtasker/
papers/images/interface.gif
). The laboratory level
shows a beaker in which the form transition from solid to liquid matter occurs. The molecular level shows the
same in a graphic QuickTime animation, and the symbolic level shows the transition in terms of
an abstract
notation.


According to Johnstone (1991),
switching among the three modes of thinking
is difficult. They are not stored in long term
memory, which operates the perceptual
process at the laboratory level and helps to
organize information in the

limited working
space of the molecular level. The VR
approach helps students to link their
observations in the laboratory to imagined
molecular structures and processes. It helps to
communicate their ideas correctly using
abstract notation, terminology, a
nd
mathematics.


Representation of motion is not
limited to movie
-
like applications. An advancing type of communication with machines is through gesture
interfaces. Around 1975, Krueger (1991) pioneered in gesture
-
based interfaces as a new form of human
-
co
mputer
interaction. At Tata Steel in Jamshedpur, India, large electrical overhead (EOT) cranes are controlled by
GeStation (Gesture Station). This program handles real time camera based recognition of a user’s gestures and
moves a virtual EOT Crane in simu
lation mode. In the picture,
the scrap ladle in the middle screen is being
moved anticlockwise under gestural commands. The left screen shows the input image with a calibration box.


http://www.iitk.ac.in/robotics/project_lists/gesture/tisco.html#gestati
on

http://members.rediff.com/jamshedpur/steel_city.html



The claims of the developer, IIT Kampur, on using gesture
recognition technology is that:


… opposed to DataGlove type of fine motion input, or the Polhemus style whole body gestures, visual
recogn
ition can capture a wider range of gestures without encumbering the user… we not only interpret
gestures, but react to them by passing the gesture on to a task. As recent results in Artificial Intelligence
show, this is actually easier than trying to simpl
y “understand” the gesture; the task
-
domain helps
constrain the possible interpretations of the gesture.
http://www.cse.iitk.ac.in/~amit/gesture/



In shared work, gestures help performing tasks (cf. the aircraft pilot
who is directed to the gate by human
gesticulation on the ground). Moving
hands and heads are important components of coordination and negotiation, for
instance, during video conferencing. In groupware such as videophones,
however, gestures are hard to recognize and understand because the net
work is
slow or causes interruptions. Gutwin and Penner (2002) improved the visibility
of remote gestures “by using traces
-
visualizations of the last few moments of a
remote pointer’s motion.” In the diagram right, you see some examples. The
black dot is w
here a gesture begins. In their experiments, Gutwin and Penner
found that telepointer traces improved user’s accuracy and certainty in decisions
Johan F. Hoorn, 2002


Motion Visualization

5

that were made at the longer disruption delays. This is a fine example of developing a representation scheme in

interactive systems to advance communication through motion.

Gesture
-
based interfaces also become increasingly important for a more natural and efficient way of
human
-
robot interaction.
Juan and Uri (2001) developed a telerobotic system for a distant ope
rator manipulating
a robot (system architecture and flowchart below). To do so, they went through the following steps:

1. A visual gesture recognition language was developed. A robot
-
accomplished task guided by a
sequence of human hand gestures through the

proposed visual gesture recognition was implemented.


2. A training process was executed in which several hundreds of hand pose images inserted into a
database were implemented. These included all possible system hand gestures. Every picture had an identi
fication
number and other features, such as height and width. At this stage, for each one of the pictures, a vector, which
contained 13 parameters, was built. These vectors contained the height / width (aspect ratio) and the gray scale
levels of sub blocks
.


3. A Fuzzy C
-
Means clustering process was implemented. During this process, membership functions
were built for each gesture image. These membership functions are relative to the number of signs in the
language. For each gesture image, a membership vect
or was built.


4. In this stage, a performance index (cost function) was built for estimating how optimal the system is,
from the aspect of building the clusters.


5. The user controlled a robot in real time by hand gestures. In this step a real time image

processing
process was used.


6. The user received visual feedback from the remote robotic scene.


7. The user performed a task, in which a yellow wooden box, placed on a plastic cup structure, had to be
removed, using hand gestures and visual feedback on
ly.







Johan F. Hoorn, 2002


Motion Visualization

6


http://www.ie.bgu.ac.il/intranet/site/mmlab/gesture/FullHandGestureProject.htm

(Dec 16, 2002)



In all the examples you just have read developing a representation of motion that users can understand is
crucial. In games and agent development,
you need to obey the rules of making motion pictures and cartoons. In
education, you should represent different ‘modes of thinking’ about a process. In gesture
-
based interfaces, you
need to think of a ‘sign language’ or symbolic representation scheme that
both users and machines can interpret.
Irrespective of the type of system you design, however, you will direct the future behaviors of the users by
offering limitations (e.g., gestures cannot be seen in the dark) and possibilities (use infrared sensors). L
ike in a
chess game, you can think ahead of the possible moves a user can make with your system given specific
circumstances. Performing exhaustive thought experiments with the system under development is extremely
important in enhancing its usability. How

will your system behave during a worst
-
case scenario? Or more
importantly, how will the system’s user behave?


The making of a scenario


Making scenarios is a well
-
understood craft in film and video productions. Scene by scene, they help to
systematize th
e actions, moves, and gestures the actors or props have to make. In usability testing, scenarios help
explore situations in which a user handles an interactive system. At first, this is done in imagination and a use
-
case scenario generally follows the norm
al sequence of task performance and workflow. A scenario is a thought
experiment that later on needs to be worked out in laboratory tests, field experiments, and (work) practice. You
can already put the system to the test in early design by thinking of a s
cenario in which things go wrong. Then
have it acted out by users. It is not necessary to have the system fully operational. You are still in the stage of
make
-
belief; a prototype, mockup, or even an agenda might serve just as well as a prop for your devic
e.


A scenario gives the structure of a story or plot of a user in interaction with the system, other system
users, and other people. The scenario describes an actual situation or use
-
case. You need to be specific about the
story line (what happens when),
mention the characteristics of the user and of the situation of use. A scenario is
not a written
-
out novel or theater play. Put a bit paradoxically, it is a short history of what you think may happen
in the future.


Imagine a security team in an art museu
m, who wants your design group to develop a handheld security
monitor. Some of the requirements are that the guard should be able to see at least four surveillance sectors at
once while moving around the museum. The guard should be able to sound an alarm a
s related to one of the
sectors. It should be possible to take notes or have a patrol log and the device should respond to authorized
personnel only. It should be easy to transmit data to a mainframe. As a general requirement, security personnel
Johan F. Hoorn, 2002


Motion Visualization

7

want the m
ost functionality with the least number of buttons and gadgets. Under critical circumstances, they
cannot push buttons and do not want options with multiple functions. Operation of the device should be
intuitively clear.


At the Web site of this course und
er Extra, you will find the file
Offline Design of a Handheld Security
Monitor: HandSeM
. Here you find a toy design of the future system but it already offers many concurrent options
that may proof useful or not in different scenarios. Below follows an exa
mple of a scenario that may help select
or create the proper functions.


__________________________________________________________________________________________


Use
-
case scenario
HandSeM

Title:


Security guard in late night firefight requests backup

S
ituation:


Inside art museum, nightly setting

Characters:

Guard, colleagues, criminal


1.

Guard alone on night patrol.
HandSeM

in front of her.

2.

Does her regular round:

a. Walking from control center

b. Go to museum library

c. Check door

d. Check window

e. Go to main exhibition room

f. Check art works

g. Return to control center

h. Do second round

3.

At 2f, however, she discovers Vermeer’s painting ‘The Concert’ is missing. Skip 2g
-
2h, go to 4

4.

Selects alarm sector, sounds alarm, states she is going to

the museum’s back entrance

5.

A man in black runs away with a package under his arm

6.

The guard is in pursuit and running

7.

The man draws a gun and shoots

8.

Guard dives away and requests backup through her
HandSeM
, while the bullets fly around

9.

Second guard e
nters the scene

10.

He draws a gun

11.

Chaotic firefight, smoke, halfdark circumstances (degraded vision)

12.

Man in black falls down

13.

Second guard gets shot

14.

First guard runs off with painting and disappears, smoking gun in hand, using
HandSeM

to deceiv
e control center

__________________________________________________________________________________________


The use
-
case scenario envisions that the device has to operate under circumstances of extreme motion,
perhaps even commotion. It should be small en
ough to stash in your pocket and robust enough to withstand
physical force.


Exercise 1. Redesign
HandSeM

by testing the options proposed in the PowerPoint Presentation against
the use
-
case scenario. For each point 1
-
14, write down which options are approp
riate or not. Give alternatives.
Motivate your answers.



What you just did in Exercise 1 is a form of requirements engineering. You try to come up with a list of
features and functions a future interactive system should provide. The above use
-
case scenari
o, however, tells you

more. The sequence 2a
-
h resembles what psychologists call a ‘script’ or ‘schema’ (e.g., Goffman 1972/1997).
Scripts are important guidelines for human behavior, because they almost automate routine tasks humans
frequently perform. Thi
s saves time to use our heads for new problems and more relevant questions while doing
our daily things. Going to the supermarket is one we all know. The usual course of action is entering
-

getting a
basket
-

collect goods
-

pay bill
-

pack goods
-

exit.
This standard sequence is a psychological script and in
designing for users, you will find that many jobs and (computer) tasks rely on such scripts. Computers are great
for automating routine jobs, so that the workflow the designer analyzes comes close to
the psychological script
the employees have in their heads (but beware when there are mismatches!). It is no surprise, then, that the
security guard undertakes a standard series of moves and actions that the system has to support. Thus, many of
your use
-
ca
se scenarios will contain psychological scripts. Although the words ‘script’ and ‘scenario’ often are
Johan F. Hoorn, 2002


Motion Visualization

8

used interchangeably, we stick to the convention that a scenario is a concise version of a script. A script is much
more detailed about the story, setting
, and dialogue (e.g., standard greeting and negotiating rituals with the
supermarket’s cashier). Therefore, a scenario relates to visualizing the future state of the system (Task Model 2),
whereas in writing a script, you are one step further and busy doin
g detail design, that is shaping the interface
(e.g., menu structures, dialog boxes).


Developer
MeGagaMe

has heard of your scenario for a security guard in a late night firefight and asks
you to develop it further into a script for a new interactive game
called NightWatch, in which art thieves battle
with security guards over invaluable artifacts. Now you have to visualize motion in a way users (i.e. gamers) can
understand.


Review question 1. In relation to the classes on lexical ambiguity of labels and
names (
Choosing Your
Words in Interface Design
), what is the pun in
MeGagaMe
? Hint: Try to combine the syllables into different
words from what the typography suggests. What is the message of the pun?



Like a movie director, you have to think in which way

the gamer can see what action under what angle.
Can you look the enemy right into the eyes with a close
-
up (C.U.), is it possible to oversee the crime site (pan) or
do you want to program shots in which the camera focus is changed to compensate for the mo
vement of the
action or the camera itself (follow focus)? Below is a list of shot types with the usual abbreviations and general
effect on the viewer. For a more comprehensive film glossary, look at (
http://
www.teako170.com/glossary1
). It is
also available at the course’s Web site under Repository. Study the shot list (Table 1) and then see how the use
-
case scenario for the security guard can be turned into a script for a shooter game.


Table 1. Concise ove
rview of shot types in motion pictures, video productions, and computer visualizations


Shot type



Abbreviation

Description



Viewer effect

__________________________________________________________________________________________

Close
-
up



C.U.


Subject

is larger than


Attention focusing

the frame; approx.


Feeling of involvement

from the top of chest

to top of head


Medium close
-
up



M.C.U.


Between C.U. and B.C.U.


Likewise but more

intense than C.U.


Big close
-
up



B.C.U.


Usually, a cut out of


Likew
ise, but more







the face (e.g., eyes)


intense than M.C.U.


Mid shot



M.S.


From the waist up


Neutral, everyday











approach of looking











at people


Long shot



L.S.


Subject at distance


Seeking focal point







seen from top to feet


Emotional distance


Extreme long shot


E.L.S.


Like L.S. but distance is


Likewise, but more







larger (tiny puppets)


intense than L.S.


Panorama



Pan


Camera rotation about


Overview

its vertical axis



Feeling dominant


Tilt up/down



Tilt


Camera
rotation about


Looking up

its horizontal axis


Looking down


Zoom in/out





More/less magnification


Attention focusing/

of the filmed objects


Attention broadening

_________________________________________________________________________________________
_


Looking up or down with the camera can have many meanings, which rely on
context. If the camera represents the point of view of a character (e.g., the hero), looking up
Johan F. Hoorn, 2002


Motion Visualization

9

may mean asking a question or being surprised. From an extreme angle, however, (see

the archer) it expresses
superiority of the other character (e.g., the villain). Looking down to the ground may express that the camera
‘bows its head,’ suggesting submission of the hero to another object or character. If the camera looks down on
another
object or character, however, it may mean that this object or character is inferior to the hero.

Let Table 1 enrich the use
-
case scenario with some means to visualize motion. In doing so, we create a
small script that can be used in developing a video gam
e.

__________________________________________________________________________________________


Script for game developer
MeGagaMe

Title:


Security guard in late night firefight requests backup

Situation:


Inside art museum, nightly setting

Characters:

Guar
d, colleagues, criminal


Scene

Scene






Shot type



Viewer effect

#

description


1.

Amy alone on night patrol




L.S.



Introduction











Who/what is this about?

Communication device in front of her



C.U.+Dialogue


O, key role for this thing










What is it? A speaking

device?

2.

Does her regular round:







M.S.s emphasize daily

routine


neutral

visualization

a. Walking from control center



M.S.



She does security work

b. Go to museum library




M.S.



Checks rooms

c. Check door





C.U.



Door is important

d. Check window





M.S.



Window less important.

Seems she starts










taking her job more lightly

e. Go to main exhibition room



M.S.



Just a routine patrol

f. Check art works





Pan to



OK. She works in an art

museum

C.U. o
f empty space

O, painting got stolen!

3.

Amy discovers Vermeer’s painting



E.C.U. Amy’s eyes


She is upset, feel sorry for

‘The Concert’ is missing.







her

4.

a. Selects alarm sector




C.U.



This speaking thing is a











security device

b. Sound
s alarm





C.U.



Of course, she wants help

c. States she is going to the museum’s back entrance

M.C.U.+Dialogue


Dangerous. She goes after










the thief

5.

Bert runs away with a package under his arm


L.S.



There is the villain. That











pack
age must be the

painting

6.

a. Amy is in pursuit




M.S.



Going after him, that’s her











job after all

b. Running





M.S. Legs


Go get him! (M.S. is

special for lower end of the

body. Therefore, more

attentional focus)

7.

a. Bert draws a gun




L
.S.



Gun represents danger,

evoking emotional

distance, emphasized by

emotional distance through

L.S.

b. Shoots






M.S.



A bullet is more dangerous

than a gun because it

comes closer. Less

distance, therefore, with

Johan F. Hoorn, 2002


Motion Visualization

10

M.S.

8.

a. Amy dives away





M.S.



Here M.S. is used to link

up with 7b as if bullet flies

on to Amy. M.S. gives an

impression of the places

where Amy can hide.

Builds up to 8b, a more

emotional scene

b. Requests backup through her communication device

C.U.+Dialogue


OK, this thing is her l
ife

line

c. While the bullets fly around



Tilt up to L.S.


She looks up to see where










the bullets come from

9.

Carl enters the scene




M.S.



Finally, help

10.

He draws a gun





M.C.U.



OK, he goes for it. The

gun is in M.C.U. to

suggest it wil
l give the

resolution of the situation

11.

a. Chaotic firefight





E.C.U.s and E.L.S.s mixed

The hard switches

between extremely close

and extremely distant

illustrate the back and forth

of firing bullets and the

disorganized perception by

the fighters

b.

Smoke






M.S.



Neutral view of the

situation but even then


things look bad

c. Halfdark circumstances (degraded vision)


E.C.U. (tears in Amy’s eyes)

The smoke irritates, she

sees nothing, dangerous!

Perhaps she is hit!

12.

Bert falls down





M.S.



Good! The villain goes

down

13.

Carl gets shot





M.S.



Oh no! Her mate goes

down! That crook took

a final shot at him

14.

a. Amy runs off with painting and disappears


M.S.



What’s this? Is she saving

the picture in stead of her

colleague?

b. Smoking g
un in hand




C.U.



She fired! But at whom?

c. Using the communication device



E.L.S.+Dialogue


She misinforms the others.


to deceive control center







Now the device works

against the good guys.

She is stealing that

painting! Who did she cry

for
then? Her colleague or

her accomplice? Or is she

doublecrossing both?

What a bitch (E.L.S.

emphasizes extreme

distance in emotion and

physically by running off)

__________________________________________________________________________________________



Co
mpared with the use
-
case scenario, you can see that for the game the focus has switched from
HandSeM

to the characters. The proper name
HandSeM

is replaced by the neutral “communication device.” The
neutral “guard” and ominous “man in black” are replaced b
y proper names. A name supposedly is a unique
identifier (pointer) and therefore gives users the feeling that they already are a little bit acquainted with someone
or something, which increases user
-
involvement. Remember that an interactive game is differe
nt from making a
motion picture in that the user can choose more points of view than in a conventional movie. A user selects
Johan F. Hoorn, 2002


Motion Visualization

11

his/her own script from what you offer. In other words, a game, interactive TV series, Virtual Reality interfaces
or certain types
of Web sites require making several possibilities in one script or even making more scripts.


The point of view in the script is Amy. Receiving the point of view as a character immediately triggers
several presumptions in the viewer. Amy is seen as the pos
itive protagonist (hero) and therefore, earns a baseline
involvement she has not proven worthy of yet. You allocate point of view by giving Amy the longest exposure
time and the most C.U.s. That is, compared to the other characters she literally occupies t
he screen the most.
Everything that follows is interpreted in this context and viewers stick to this impression unless extremly strong
counter
-
evidence is provided. In social psychology, this phenomenon of sticking to your first impression is called
an ‘im
pression formation bias.’ For Bert, the reverse is valid. He is in black, which is culturally connected with
negative associations (death, decay, and darkness). He does not get attentional focus too much (remains a
stranger) and acts in distance
-
evoking lo
ng shots all the time. The viewer’s impression formation of Bert, then, is
negative although Bert never had the opportunity to proof everybody wrong.


The script follows a classic story line: Introduction (scene 1
-
2), problem (3), building up to climax (5
-
11), and resolution (12
-
14). The story also has a twist (14) in that the impression formation and other
expectations (black is bad guy) of the viewer are deregulated. The more interesting stories have several story
twists. If you look at the sequence of sh
ot types, you see that the more neutral shots (M.S., C.U.) are in the
introduction, the most emotional at the climax (E.C.U., E.L.S.), and back to neutral during the resolution (M.S.).
Because of the twist, one more extreme shot (E.L.S.) is introduced, whi
ch makes the story end in a cliffhanger.
Thus, you create a classic tension curve not only by the story line and actions but also by the way you represent
that action, the shot types you choose to visualize the motion.


The twist in scene 14 can occur beca
use of all the things that are
not

represented. Humans tend to
interpret everything they perceive according to coherence. In psychology, this is called the Gestalt principle of
‘good continuation.’ If you draw a straight dashed line (Figure 3), disrupted b
y a box, the left part of the line is
supposed to relate to the right part and seen as one line. The dashes themselves also are small straight lines, yet
we think that they all belong to the same entity. The box is seen as a unit as well, although logicall
y the drawing
completely consists of separate lines or even ink dots with different coordinates (cf. how a computer represents
lines internally). Humans apply a 3
-
D interpretation to this 2
-
D picture to safeguard the Gestalt principle: The
box is in front
of the dashed line. This suggestion is even stronger if the dashed line represents the horizon and
the box a house.




Figure 3.

The principle of ‘good continuation.’ The dashed lines are seen as one entity.



Film is based on ‘good continuation.’ Film fr
ames are separate photographs projected quickly one after
another (like a dashed line) and the viewer interprets this sequence as continuous motion. The eye and brain are
too slow to process continuous input, so that humans make eye fixations (mental photo
graphs) and interpret what
is in between two fixations as if it were a continuous flow. In other words, if you present a gun and then someone
falling down, then according to ‘good continuation,’ the action in between has been that that gun was fired and
th
at the bullet hit that person. However, that need not be the case and if you counter ‘good continuation,’ you get
a story twist. Amy and Carl are supposed to cooperate but this is your interpretation. Carl draws a gun so that you
think he will fire at Bert
. But perhaps he did not fire at all and only Amy did at Bert as well as at Carl. Amy has
tears, maybe because of the smoke but perhaps Bert is her lover, whom she just has shot because her greed is
stronger than her love. The script is mute on all these a
spects, and because it is, as a good designer of games and
interactive TV, particularly here is where you can play with the viewer’s expectations.

If you write non
-
linear story lines, for instance, for interactive Web sites, you unintentionally may
introdu
ce story twists. When lines cross that do not make a consistent whole any more, the user gets lost. Many
post
-
modern artists would avow that this is exactly what their message is (thou shall not understand the world).
However, one could easily believe that

this is the result of lacking thinking discipline rather than artistic genius.


Exercise 2. Another story twist: It turns out that Bert is a system designer who brought a package of new
CD
-
ROMS with the latest security algorithms to the museum’s mainframe

to implement that night. What does
Johan F. Hoorn, 2002


Motion Visualization

12

that do for the story? What can Amy do with the package? In hindsight, what does it do to your involvement with
Bert? Why does Bert run away for Amy? Does he know her? Who stole the painting, then? Or wasn’t it stolen
af
ter all but just Amy’s decoy?


Exercise 3 (it is allowed to do this exercise in groups). Check out
Investeren in Voorsprong
, a CD
-
ROM on ICT at school (
Designserver
, Maarten Rens, 2001). Click Start, Video, and a city name from the menu.
Analyze the digit
al movie scene by scene for the type of shots that were made (Table 1). Write down why the
makers probably have chosen that shot or explain why they had better done something else.




The making of an animation

Making scripts is important also in creatin
g animation agents. When Genie spins into a cloud, will the
user understand the computer is processing? When Peedy reveals a telescope and rotates, does that express
searching? Should not the user know the functions beforehand to know what function Peedy a
cts out? How do
you express in motion the functions your system offers?


Johan F. Hoorn, 2002


Motion Visualization

13















Exercise 4. On the left is a cut out of a screenshot of some of Merlin’s
moves. For each of these moves, try to guess what function they have. If you are
familiar wit
h the agent Merlin, try to find somebody who is not and do the test.
Then check the answers with the Web site (
http://msdn.microsoft.com/
library/defau
lt.asp?url=/library/en
-
us/msagent/menanlst_9x2s.asp
, Dec. 18,
2002). From the graphic representations of Merlin on the right, try to guess what
move he makes and what functionality that move illustrates. If you are familiar
with Merlin, ask someone who is

not, without giving the textual description.











Three things are important to make a sequence of static pictures into a smooth animation of motion:
How long does the action take, what are the important positions, and what is the distance between th
ose
positions? Decompose every motion sequence into main positions (the key frames) and the phases in between.
The flying bird in Figure 4 has three key frames: Wings up (1), wings down (2), and wings halfway (3). You first
render these (drawing, film, pho
tograph) and then add the phases in between. The flying bird forms a cycle or
loop if after position 3 the sequence starts all over again. Repeating motion cycles (walking, turning pages,
stirring cauldron) saves you a lot of graphic design and computing w
ork. Particularly if you leave the character
doing its motion cycles at the same place and merely move the background behind it, you can suggest motion
with little effort. This approach also has a disadvantage, however, in that natural motion is never a co
mplete
repetition of the previous cycle. Therefore, many computer animations look a bit artificial (cf.
Bounce this!

http://www.driscal.com/shorts/milton/bounce.html
, Jan. 8, 2003).
To keep th
e viewer interested, the number of
repetitions of a motion cycle should be invertedly related with animation exposure time.

That is, the longer a
viewer watches your animation the more motion variety you need to offer. Keep in mind that also a repetition o
f a
range of motion cycles (waving, sounding trumpet, clapping) gets boring in the long run (‘he’s repeating all his
moves all the time’). In other words, to design a realistic experience of motion, variability is necessary within and
between motion cycles
.

Figure 4.

Motion cycle. Key frames have numbers. (
http://www.balmoralsoftware.com/obsidian/ zoetrope.jpg
,
Dec. 19, 2002)







†††††





†††


Johan F. Hoorn, 2002


Motion Visualization

14


In nature, hardly anything moves at a constant speed. If you want to simulate a ballistic sequence such as
the shooting from a gun
boat or throwing a ball, you need to vary the distances between the frames to suggest
acceleration and speed decrease. “
The question to be answered is how best to generate the values of the
parameter for the frames between the key frames. The parameter to
be interpolated may be a coordinate of the
position of an object, or a joint angle of an appendage of a robot, or the transparency attribute of an object, or any
other parameter used in the display and manipulation of computer graphic elements.” (Parent, 2
001, Chap. 4). In
Figure 5, you see a typical motion sequence of a ballistic sequence.


Figure 5.

Interpolation of values for a ballistic sequence (
http://www.cis.ohio
-
state.edu/~parent/book/animation/
interpolation/ease/image.gif
, Dec. 19, 2002)


Exercis
e 5. Inspect the PowerPoint Presentation on
Motion Visualization

again and develop a measure for
applying motion in infotainment or edutainment by combining the
info
-
motion ratio

with the
joy
-
motion ratio
.
Enter your answers in the discussion group (
http:/
teletop.few.vu.nl

> Cursus 02400075 > Discussie). It is allowed
that your answer is a response to others. Constructive contributions receive credits (answers are not considered
right or wrong). Who fails at contributing receives no credits. Make sure to pu
t your name and student number.



Decomposition of a motion sequence into key frames and the phases in between is also important in
representing speech. Spoken words require moving mouths, which are important features of tutor or
conversational agents (cf.

Figure 2). Not every vowel and consonant need to be visually represented (an
exception is for people who rely on lipreading). Often some simple lip movements suffice. In case of a spoken

m
,
b
, or
p
, however, the lips are pressed together. These are salien
t lip positions and form key frames in every visual
speech representation. The phases in between form the lip positions for other sounds. The nine basic lip positions
in uttering speech sounds can be found in Figure 6. You can save a lot of work by represe
nting the lip movements
and not the complete jaw.


Johan F. Hoorn, 2002


Motion Visualization

15


Figure 6.

Mouth shape as connected to basic phoneme set (
http://freespace.virgin.net/d.corcoran/phonemes.gif
,
Dec. 19, 2002)


Johan F. Hoorn, 2002


Motion Visualization

16


The sugg
estion of motion can be accomplished also by other means than the number of frames per
second. The graphic object can be distorted to render an impression of speed change. To suggest high speed, the
object is stretched into the opposite direction of which
the motion occurs as if the matter cannot follow the force
of the thrust. Squeezing the object at the front and elevating the back (like a bucking bronco) can represent speed
decrease or disturbance. For a few examples, see Figure 7.



Figure 7.

Calvin an
d Hobbes (B. Watterson, Universal Press Syndicate): Stretching and squeezing the graphics to
suggest motion.




Another static representation of motion is the arrow. Originating from the Middle Age archer it flew
right into our flowcharts, its head expres
sing the direction of the motion.



http://www.city.ac.uk/disability/images/archer.jpg

(Dec. 19, 2002)

Johan F. Hoorn, 2002


Motion Visualization

17

Exercise 6. This is a color pencil design for a graffiti called
Trouble Shootin CDs

(Hoorn, 2002). Although this is
not a moving image, several fe
atures suggest motion. Point out the ‘cartoon motion markers’ and what kind of
perceptual phenomena they signify. Describe the depicted computer in terms of ‘stretch and squeeze.’







Johan F. Hoorn, 2002


Motion Visualization

18

Exercise 7. This is an advert on house mortgages (
www.bouwfonds.nl
, Dec. 14, 2002). The slogan says “Your
amazement gets bigger and bigger.” Under the double
-
headed arrows, the advert sums up some of the
advantages: A larger house
and

lower monthly costs
and

more security. Analyze how

in this static visual
representation, motion is suggested. Which psychophysiological measure is assumed to correlate with
amazement? Should not the scale be calibrated?



Johan F. Hoorn, 2002


Motion Visualization

19

Want to know more?


We only covered a few aspects of visualizing motion. If you w
ant to know more about graphics and
animation, go to the Web site of the Imager Computer Graphics Laboratory
http://www.cis.ohio
-
state.edu/~parent/book/Full.html

(Dec. 19, 2002).



If you want to look up movies and see some excellent examples of scenarios
, scripts, and shot sequences
(e.g., the opening scene of
Citizen Kane
, Orson Welles, 1941), go to Internet Movie Database (
www.imdb.com
).
It has more than 333,000 titles in store, fully
annotated, and is a good example of a user
-
friendly
Web site.



Refer
ences

Goffman, E. (1997).
Frame Analysis: An Essay on the Organization of Experience.

Northeastern
University Press.

Gutwin, C., & Penner, R. (2002). Improving interpretation of remote gestures with telepointer traces.
Proceedings of the 2002 ACM conferenc
e on Computer supported cooperative work 2002, New Orleans,
Louisiana, USA

(pp. 49
-
57). New York, NY: ACM Press.

Johnstone, A. H. (1991).
Thinking about Thinking. International Newsletter on Chemical Education, 36,

7
-
11.

Juan, W., & Uri, K. (2001). Hand Ge
sture Telerobotic System using Fuzzy Clustering Algorithms.
http://www.ie.bgu.ac.il/intranet/site/mmlab/gesture/FullHandGestureProject.htm

(Dec 16, 2002)

Krueger M. W. 1991.
Artificial Reality II.

Addison
-
Wesley.

Parent, R. (2001).
Computer Animation: Algo
rithms and Techniques.

Morgan
-
Kaufmann.