Animating Direct Manipulation Interfaces - ACM Digital Library

17 downloads 0 Views 894KB Size Report
The Levels, SA, Australia. 5095 mabht@graceland. Levels. UniSA.Edu.Au. ABSTRACT. If judiciously applied, the techniques of cartoon anima- tion can enhance.
Animating

Direct Manipulation

Bruce H. Thomas Advanced Computing Research Centre School of Computer and Information Science University of South Australia The Levels, SA, Australia 5095 mabht@graceland. Levels. UniSA.Edu.Au

ABSTRACT tion

applied,

can enhance

many

human

particular, in

the

the

real

use to animate scribes

tools

porate

the

that

object.

into

by To

and

used

simple

drawing

on

editor

demonstrates

simple

the

is practical

even

idea,

new

the

sugcan

and it de-

use to easily

of

on standard

ani-

vince

users

animation,

cal interfaces, its,

warp

direct

the

a

The

to this

the

user interface

plore

how

techniques

puter

animation

ing

with

here

with

algorithm

animation

Rather,

we

Permission personal are not right given

wish

as to

enhance to make

to republish,

data,

[15])

toolk-

copies

is granted for profit

of the publication is by permission

of all

~IST 95 Pittsburgh PA USA @ 1995 ACM O-89791-709-x/95/l

be the

(such

as an

using

anima-

of otherwise

static

system

to

the

or part

of this

and its date of the ACM,

appear, Inc. To

reversible can conwith

it’s

Brenda

all

Laurel that

appli-

an illusion. calls

the

manipulation.

but

the

drag

all

times.

on drawing to

object

give to

More

the

too

solid;

used

by

that

mimic

start

move

cartoon

they

stretch

the

moving

the

the fullsolidity

must One

[10]

is to

such

do more approach use

tech-

as inertia

and

of substance.

and than

Cartoon

come

to a gradual

along

straight

to suggest

real

somehow

solid.

effects

slowly

is

the

object.

objects

illusion

rather

and squash

operation than

the object

animators

physical

in curves

to implement

the

as drawing

gives

also feel

where

techniques

a sense of substance;

must

to reinforce

they

such

drag

object

knows

rather

solid-seeming they

niques objects

that

easy to manipulate

widely

friction

the

user

are cheap

schemes

an

continuous

feedback

object

to convey

be convincing, look

the

outlines

during

moving provide

Simple

impression

ambitious fail

of must

so that

a surrogate

object

can still

than

operation

application

is at

tend

featured

stop,

lines,

interaction

with

and their

environment.

of hu-

material

for

the copies tht COpy -

and notice is copy otherwise,

to lists. r~wir~s

sPecific

Although

we have

informal

experience

enhance

the

with had

by

inertia;

wiggle

not

objects. it

if it collides sense

formal

these

The that

For with

distort

other

overall “things

are

our can

interacting

if an object slightly

objects, effect

trials,

techniques

when

example,

might

user

same

of substance

a corner,

as if bumped.

a stronger

conducted

is that

impression

application

dragged

has

as

they

is that

UIST ’95

is if

it

might

the

happening”

user and

1..$3.50

November 14-17, 1995

sus-

applica-

[17]).

interface

without fee provided that or commercial advantage.

fee.

com-

concerned

effectiveness

to post on sewers or to r~distril~ute and/or

and

ex-

of interact-

tools

help

the

to

as would

animation

augment

out

not

or when

animated

apply

or

are

editing

presentation an

digital/hard

or classroom use made or distributed

notice, the title that copyright

permission

the

(such

set

cartoons

we

animated

to supplement

itself—to

from

animation editor

have

the experience

However,

portraying operating

we

borrowed

a computer.

information

[2],

can enhance

case when tion

during

happening

graphi-

common The

object

but

hardware.

the

feedback

To workers

know

which the

and

interacting

they

the

immediate

changes,

[9], is the feedback

to track

dragging.

based

INTRODUCTION recent

identified

characteristics

are directly

illusion,

generates

it seems

other

a graph-

manipulation:

these

though

of disbelief

technique

InterViews

Like

even

Central

animation

manipulation,

transformation,

they

pension

thing.

KEYWORDS:

present

Shneiderman

incremental

applied,

that

data,

tion

[14], of direct

to actions, Properly

Consider

to build

workstation

response

by

inter-

feedback.

that

paper

ingredients

effects.

a warping

of the

it shows

seminal

user

transformation

effectiveness

that

manipu-

we added Interviews

uses animated

and

of

the

his

cation

incor-

a range

view

to the

that

operations,

paper

interfaces,

suggesting

the

the

editor

In

code.

distorting explore

This

programmers

can

their

capability

face toolkit

done.

applications

The Problem essential

strengthening

application

manipulation

is based

transformation

for

is being

that

In

of substance

manipulates,

with

interface.

that

to present.

a feeling

interaction

ical

anima-

manipulation

strive

programmers

effects

effects

lated

work

direct

approach

mation

a user

techniques

of cartoon

of direct

interfaces can convey

that

that

techniques

the illusion

computer

objects

gests some

Our

the

animation

sense

Paul Calder Department of Computer Science The Flinders University of South Australia GPO Box 2100, Adelaide, Australia 5001 [email protected] .edu. au

man

If judiciously

Interfaces

3

that

real

work

is being

done.

niques

is straightforward

some Adding

animation

plication

to

action.

In

being

to

display

and

to

the

object

the

user

tion

also

extra

understanding

the

inter-

suggest

that

the

an

gives of an ac-

the

effects

can

interface,

mer’s

but

task. animation

and

to provide

incorporate

can

toolkit

[11]. and

the

context additions

First

the

can

purpose

hardware.

modified

Finally,

that

in user

of the

project

that

that

In

Prosodic

Interfaces

gestures.

Audible

ment

the

the

addition

sense of presence.

repertoire

the

Gestures

way of issuing of tools their

the

contextual

while

that

interface

and

sounds

the

also

of requirements though basic

for

making

developed principles

in both

in the also

disciplines,

ing

sequences

For

interface

context

apply

to

animations

of images

in rapid

of film computer are

2. The

predefine

4

paths,

the

that

move

application

three

in

fixed

in

stays

an

application

to feel

principles

that

that,

can for

they

apply

of solidity,

these,

when

we

its

are in

to car-

exaggeration,

add

animating

should

principle

in general,

two

more

a direct,

states

at all times

of reluctance reluctant

Adherence

to the

impression

that

and

a

and extend

tion.

that

manipula-

that,

the

remain

object

attached

states

that

objects

are,

maintains

the

to change.

the

illusion

objects

of attachment

user

to the

is always

principle

of substance

requires

effort

of the

of reluctance

by

on the

in control

suggesting

that

part

user.

of the

ac-

reinforces changing

can

a basic

the

applied

animation.

Al-

simple

figures

animation,

the

simple

editing

animation

[8];

rotating.

display-

being

the Effect these

interaction

drawing

by

principle the

Adherence

The such

editor

as lines

such

task

objects

supports and

1 shows

to move

to the

graphical

operations

Figure used

principles

with

editor.

the

polygons,

a slrnple

creation aud

as moving,

a screen

of animatin

scaling,

image

of

it allows

of the

and editor

an object.

succession. Figure

objects

a fixed

leaning

sense of substance

users

an direc-

pointer.

set

created

object,

base

these,

of attacl~ment

cues

programmers

a successful

its

principles

manipulated

sense of di-

will

outlines

to move

the

while like

To

apply

principle

to the

ing [10],

list the

Demonstrating

Book

in the

interface:

being

and

creations.

Anzmutzon

an object,

engage-

INTERACTION

Lay bourne’s

show

allowing

Ungar

reinforcement.

We have

ANIMATING

pull

animator to suggest

distorted

an attempt,

of a greater

still

and tion

and specifying

techniques

an ob-

application

example,

dragging

object

could

techniques

animation:

and

a smoother

commands

three

to move the

com-

20],

improve

can provide

these

[19,

strengthen

how

of an object

a cartoon

For

someone the

the

illusion

toon

an

of human with

can

providing

Together,

use to enrich

is concerned

and

by

project,

animation

reinforcement

interface

expressive

to

to

to drag

example,

should

how

To suggest

of

With

create

by

animator

direction

should

other

a set of tools

the prosody

objects

tries

inertia

a

interfaces.

Interfaces

to provide

project

manipulation

operations.

aims

can improve

interfaces.

with

Prosodic

how

consider

show

pull.

the

Chang

special

we describe

animation

for

for

the

with response

control.

interactions, without

of the

object,

1. The

is part

techniques

more

and

screen,

behaviour.

caused

objects

InterViews

to show

applied

in

Context

work

ongoing

new

such

could

place.

we discuss

the

need

If a user

Or if a user tries

is to

depict

the

techniques

animated

implementation

has considered

Research

the

to create

be successfully

graphics

that

how

to

ani-

InterViews

Then

made

faced

accurate

restraint?

movement

to the prob-

of our

editor.

we

suggest

our

approach

effect

drawing

the

for

the

in position,

approach

would animator

support

into

our

overall

changes

outline

is fixed the

the

represent

its movement?

Our

experience,

can use to easily

built

across

resisting that

with

of di-

of object

Our Approach

interfaces.

we have

rapidly

are

and

behaviour.

ject

tion

can be used

briefly

rect

their

we describe

and

techniques

puter

program-

is at odds

[5] provide

are in control

programmers

the application

suggest

with

to suggest

interactive

of interactions

components,

This

application

programmers

of a simple

components

work

satisfaction

is twofold:

the

into

how

kinds

illustrate

the

the

that

effects

describes

certain

and

to the then,

enhance

tools

mating

toolkit

add

user’s

of the Paper

paper

lem

the

problem,

the

Structure

they

The

how

This

improve

object

Ungar

in the context,

for immediate

realistic-seeming

should

users

application

actions

and

However

where

the need

to user have

on an object.

These

manipulation,

dilemma:

prevent

results

rect

(Chang

examples).

movements,

actions,

information

of the

ap-

objects

by a user’s

of constraints The

the

of the

can

caused

changing.

a better

state

animation

presence

allows

about

current

of change

the

from

also

information

the

the

rate

or it can imply

feedback

more

addition

manipulated,

direction

the

excellent

spontaneously

or along

of Lay bourne’s

tech-

tion not

UIST ’95

2 shows

how

on a rectangle. fully

convey

the

the

editor

Of

course,

dynamic

animates these feel

a move

static

of the

opera-

images

can-

interaction;

we

November 14-17, 1995

. ,,,

,.,.,

,’

f

,.

,: .: ,;

11

$,

,,

,

1$

‘1 ., ,1 !,

!: , :

,, !,,,



. .

.“,

.-.

.

.

.

.

-----

-------

.,:, .: “f-~ 1! ?.

Figure 3: Animating

...,, .,,. .,,, ET ~

$..

.,.. !.

!

. ‘o I

,

,,,

I

I i

$: +-.

,.

.

,. ii---!

I ~___

,,,

_. I

,4

,’

Figure

‘-

. .- .:, _ .- -’-~

The

same

,

of effect

For

operation,

and

the

uses

editor

teraction;

the

controlled

by

that

Animating a rotate operation

4:

kind

operations.

lags behind.

..!“’.

...-”

,,.....-

,,,,.. ,,”-

,,,

,



,, .

r ,,

l’:

I

a scaling operation

:>---J

Figure 1: The animated editor in action

,,,,

\

the

control

The

editor

figure

the (For

of the

object while

the scaling

of the

common

a rotation.

strategy

all

other

3 illustrates

same

mouse,

that

for

figure

4 shows

the part

suggests

works

example,

to

In each animate

that the

is

case,

the

in-

‘(grabbed”

bulk

operation,

corners

editor a scaling

of the

is

object

we use an effect

are simultaneously

under

mouse.)

.”..

.!. ”.

.,,;

~,

I ,,

;: ,:

t ,

~ ~

:_,

.

..

-,

,,--

,

-

,,

show the

interaction.

move

,,,> .:

this

,,.,.l. _,::

also supports

how animation

following

a move operation

back

ure

shows

the

rectangle

bottom the point

suggest

the

merely

while

In operation, “rubbery”

the

of the the the object

successive

the

operation

shows

corner

several

effect.

without moves

rectangle bulk that

the

with stays

of the

effect

The

to follow

operation

object

is that distorts

frames top

of

the

attached

to the

as it is pushed

figThe

note

slightly

the

effect;

mouse.

animation; lags

the

animation

of manipulating

November 14-17, 1995

from

how

mouse

the

extra

for

is fixed simply

effects

information

example, in place.

that about

an attempt One

be to prevent

mouse.

of the

to

response

to

the object

from

correctly.

of response.

allow

the object

back

to its original

avoids

this

of visible

feed-

to follow

the problem when

place with

lack

as the result

at the operation lack

surprises

However,

be misinterpreted

the object

attempts superimposed to

that

might

might

“grasp”

interaction

constraining

_-”w

Figure 2: Animating

have

Consider,

an object attempt

simple

can convey

A user before

realising

Another

when lack

but

of feedback, object

to

several

the true

released.

placed

make

strategy

the mouse,

a carefully

might

of a failure

cause

might,

be to

then

to snap

This

approach

but

it

can lead to

suddenly

jumps

back.

behind. a heavy

and pulled.

Figure ing

UIST ’95

5 shows

animation.

how

our

editor

As the user

avoids

attempts

both

problems

to drag

the

us-

pinned

5

Figure 6: Moving under the influence of “gravity” ;#

v

., !.. e, !,,’“’”~

.

, ,

.,!

,,,,.

, ,,

P.***

..

.“., .,-. ,

W,,,.,,,+,..

Our

approach

usual,

Figure 5: Attempting to move a pinned object

but

surface object, the

the

bulk

user

grab

is pulling

in place.

The

object

will

The

move

succeed.

same

effect

For example,

figure

under

the

the

object

to snap

the

object

away

yond and

the

object

teraction

and

to the

it clear

is, what

result, any

snaps

makes what

the

fixed.

gravity next

what

happen

pulls

make

the

animation

them

chose

powerful

the

effects

into

all underlying

the effect

our

determines

editor

mation,

applies

to draw

the object

angle

from

its

to

suggest

be to represent

the responses the a much

effect

the

of the

and

of the in-

points.

images

[22].)

applied

to

a rectangle,

an appropriate drawing

for example,

warping

system,

transfor-

then

rectangle.

proceeds

When

it will

the rect-

appear

distorted.

model: warp;

complex

the code the

approach an approach

that

(indeed,

graphics

this with

draws

effect

will

two

of)

apply

key

based

the warped

is unaware

as to a simple

has

on a

objects

the

presence

as well

to more

rectangle.

the desired

is released

to generate,

toolkit

[11]

because

at

extend

we intoolkit. it

Computing

has

a

the Warp Vectors

warping

transformation

bound

vectors

to key

points

for

points

lated

to include

interaction

with

physical

the

with

a physical

simpler

objects

as forces

of the objects physical

we want.

6

of moving

compared

Again,

state

in the

the

is characterised

describe

do not idea;

by a set of

the transformations

coordinate

space. with

vectors

between

the

vectors.

a later

section

points

that

applied

Transformations

coincide

interpolating

illustrates lation

that

that

by

tors

and the interaction

that

certain

distort

is

and the

are

calcu-

Figure

describes

the

7

calcu-

in detail.

effect.

way

ulating

at

effect

primitives.

simplicity,

when

In the example, One

The sheet,

to

on the screen,

by

The Model would

distorted. a rubber

pulling

as a simple

is displayed

is unaffected

we could

onto

as

of the drawing

as a transformation

it to the

physical

interface

that

warp

To suggest

be-

user

model

drawn

drawing

go”

object

easy

the

“lets

an existing

InterViews

graphics

new

used

Our

corporated

the

by

is widely

then

advantages

time.

We

stretched

technique

Apart

corner

MAKING IT EASY TO USE To

was

(The

pulled

do to achieve

appears

sheet

When point.

view

objects

system

causes

user

grasped

current

if the

an ob-

that

the

manipulated

were

suddenly

grid

the

the user must will

As

point,

stays the

the

on objects.

field

grid.

the

the

coordinate

attempt

of moving

of a ‘(gravity”

object

is

shape.

effect

to a regular

distance,

the

so that

draw

the

as if the objects

We implement

user

is released,

constraints

the

a grid

the

that

point

but

is as if

is anchored

that

but

grab

other

6 shows

the

clear

mouse

effect

that

to its original

from

while

The

it

object, the

influence

a certain

feedback

the

can suggest

ject

stretches

makes

back

to the

fixed.

of an object

When

spring

attached

stays

feedback

to

not

stays

object

on a corner

attempting will

point

of the

is to

to warp

acting could

objects

be determined

system.

However,

model

is sufficient

our

points

model

on the objects.

are

are

depend

Then

grid

transformed

by

transformed

on their

relative

the by

coincide

specified

with

intermediate

distances

warp

amounts.

from

vecOther

amounts

that

the specified

vec-

tors.

by sim-

experience

to produce

is the

To need

add

animation

only

calculate

appropriate

warp.

UIST ’95

to

the

interaction,

a set of vectors We

have

found

November

then, that that,

the

editor

characterise for

the

an kinds

14-17, 1995

......

! ,

.

new . .. ..

.

,

, , , ! of shapes

and

algorithm in the

operations

gives

very

interaction,

we have

convincing

investigated, results.

we calculate

the

....................

a simple

For each

warping

! ... . ..

frame

vectors

as

follows:

1. Compute

the new positions

of the vertexes

of the shape

as usual. , 2. Place

a zero

grasped 3. Place

by the

at each

other

of that

vertex

8 shows dashed

new

positions.

the

point

by

the

rectangle

idea dots

(in

its

top

that

vertex

that

cases, of the

show

is

other

zero the

...

old

and

vectors

..

Figure 8: Calculating warp vectors for move and rotate

at

has been

arrows

warp

shape

under

its

rectangle

and

back

frame.

operations.

at

the

the

the

be drawn

points

and rotate

corner),

sizes

will

previous

a rectangle

both

strokes

that

in the

represent

right

and

solid

the

vertex

for move

show

The

positions

nally,

the

outlines

mouse

grasped

at

mouse.

position

The the

vector

a vector

to the

Figure

magnitude

show

vectors.

of the

Fi-

distorted

the warped

transfor-

mation. Although

the

physical

model,

sion

that

weights

effect

the

this shape

attached

behind

the

elastic

vertexes

that

the

to

material,

cause

a

impreswith

them

to lag

class

the

warping

user interface InterViews

this

capabilities original

tion.

Figure

with

the

such 9 shows

transformation.

part

a new Since

to coordinate

object

to add

all

of the we

only and

class interface,

added

to

support

rotate

void

scale

(float

void

translat

void

warp

(float

a) ; x,

e(Coord

float x,

y) ; Coord

y) ;

(Warp&

w) ;

//

new

method

void

transf

orm(Coord&

x,

Coord&

y) ;

warping 1;

scaling,

void

. . .

transfor-

supported

as rotation,

that

to

objects.

Transformer

method

. . . {

we ex-

by adding

was sufficient

to all InterViews

transformations

Specifically,

model

is subject

addition

as an extension

toolkit.

a warp

mation,

one

model

drawing

of transformation: in InterViews

Transformer

public: . . .

our

drawing

warping

of

exactly

gives

interviews

the InterViews

The

correspond

algorithm

is made

to the

We implemented

kind

not

movement.

Extending

tended

does simple

affine transla-

““”

Figure 9: Extension to Transformer class

together the

new

transformation.

November 14-17, 1995

UIST ’95

7

most class

Warp

{

common

mations

case),

when

but

it allows

for

arbitrary

transfor-

necessary.

public: void

Warpo;

virtual

This add_vector

void

Coord

Coord

x,

Coord

VX,

(

y,

Coord

generalisation

how

even

more

porated

vy

we

into

have

the

not imagine

could

be used to suggest

eye”

transformation

Transformer Warp

u; 80,

w.add_vector(O,

80,

w.add_vector(O,

O,

0, -10,

-10,

w.add_vector(100,

O,

drawing

InterViews affect

-10);

that

nents

-10);

can

warping

-10);

class

contains

no

the

vectors;

positioned

nents

vx

and

vy.

putes

example, lowed

pings

figure

11 shows

of figure

8could

steps

of affine

might

represent

Because

of this

a single

the

Transformer

aggregate

is that

any

property, modified

the

warp

be represented

the

mapping

of the

isnot

get

the

such

These full

to

additions

components,

operations.

and

changes

our

as

compo-

benefit

of the

transform

is a weighted

q

and

a set

pi{

transformed

Algorithm the

and

warp

point

transformation

com-

a displacement

vector

average

of the

warp

of warp

vectors

pi

a displacement

point

vectorsl. (each

p~d),

For

defined

we compute

a by

the

q’ as follows:

n

q’ = q + ~ Wqipid

of

a scaling

fol-

One can

However,

InterViews

as-is

the new warp

minor

i.=1 where Cqi

char-

Wqi

=

~

be com-

E

coordinate ofaffine

Cqj

j=l

map-

operation.

Transformer

stored

transformations to reflect

mations

are

while warp

and

on

the

transformation of the represents

into

new

Cqi

The

new the

in turn. original only

This

matrix

Transformer: list

of items

implementation transformations

The

q

it

im-

keeps

transfor-

item

are represented

implementation affine

affine

combicannot the

so that

successive a single

through

andso warping

We modified class

transformations

items.

iterates

matrix.

items;

combined

warp

affine, involve

Transformer

of transformation

efficiency

each

the

For

matrix

matrix

that

as a single

plementation

method

sequence

successive

of transformations

vidual

they

the original

3 x 2 matrix;

how

a

other.

in a homogeneous as a single

non-

l/lq

=

pil[



operation.

However, nations

the

by a rotation.

mappings products

with

a succession

one after

be represented

only

a list

represents

followed

or a “fishunder

adding

required

drawing

of

reachieved.

applied

as a consequence, can

8

example,

a Transformer

as matrix

system;

former

adds compo-

a Transformer

acteristic

be used

a location

initially

and

by a translation

puted

Warp:

point

exthat

operations.

for

point

vectors;

object

:add.vector

For

mapping

of warp

Warp

(z,g)

the

effect

Conceptually,

a set A

calling at

transformation

discrete

represents interface.

For

drawings, objects

class,

code.

existing use the

implementation

that

vector

Warp

the

do not

Figure 11: Applying a warp for a move operation

Warp

although

stage.

transformation

displays

The Warp Transformation

10 shows

model,

this

perspective

to InterViews

Our

new

at

point”

that

to the new

glyphs,

t.warp(&w);

figure

a “vanishing

transformation

O);

-10,

graphics any

suggests be incor-

MAKING IT WORK

t;

w.add_vector(100,

class could

scaling.

In addition

fore,

InterViews

““” Figure 10: The new Warp class

Transformer

implemented

ample,

uniform

the

of transformations

);

};

The

of kinds

as beby indi-

coefficient

to the

tation,

cqi represents

transform we

distance

vector

compute

the

distance

tion

ensures

[0, 1], and

is zero that that

and

pil

(the

vector

sum

implemen-

reciprocal

undefined

specially). weights

of the

of the point

current

as the

is treated

the the

“closeness”

in our

closeness

q

between

the Pil;

This

remain

weights

of the

case

when

formula-

in the range

is 1.

: transform applying

each

retains if the

the

Trans-

Apart gorithm

from

its simplicity

and

complexity

O(n)

has

implementation

(by far the

UIST ’95

10ur

colleague

of the Murk

warp

Bottema

relative for leads

(the

vectors),

to several

suggested

November

efficiency

n warp

alour

properties

the algorithm.

14-17, 1995

that

simplify

a desired

the

warp

selection

of a suitable

set of vectors

for

solutions have

effect:

to this

been

used

Performance 1. Points

coincident

displaced

with

by the

one

amount

of

the

of that

warp

vectors

are

vector.

Drawing than

equidistant

by those

from

two vectors

are affected

equally

vectors.

drawing about

3. In

the

limit,

the

approaches

the

combined

vector

affect

of

distant

vectors

average.

To

understand

why

of the

proaches

one of the

without

bound;

weights

approach

with

pl i only

properties

locations,

O. In

with

the

vector

the

Cq, become

pli,

Wqi approaches limit,

will

if q becomes

compared

hold,

equal

and

the

all

for

carried

the

all

Wqa approach

then

l/rr.

InterViews

drawing

class,

which

ing operations Canvas and

filled

paths);

and

Extending

straight

lines

had

draw

on

text

required

remain

[7].

stroked

PostScript-like

(which

tion

and

only

a line

segment, the

a slight the

new

Instead,

points.

bisects

the

we

segment

can be approximated

To

the

the segment

original

no longer

use

algorithm

until

by straight

the

longer

even

as the How-

1 client)

graphics the

loaded

Xl

imworksta-

For example, Xl

on

hardware,

of around

when

(such hold.

standard

performance.

rates

addi-

assump-

a straightforward on

special

One

calculation

generation

10 per to

a we

second

1 connection

ethernet

conditions.

These

complex

frame

was

a separate

The

idea

is to look

time

the

for equal

of the computation is redundant we

use

magnitudes,

can

the

For example,

consider 12).

adequate

systems.

speedup

that,

we have

in the

war-p

vectors.

warp

is applied.

In

be avoided.

common

ation

(figure

loaded

vectors such

can

the warp

Since

computation

of the

q’

q +

the

warp

often

have

be significant.

vectors

Ipl I =

at

cases,

displace-

Since

manipulations

benefit

for

be important,

of the transformation

and for

will

magnitude

transformation

ment

transfornlaalgorithms

or to maintain

on heavily

on symmetries

some vectors

techniques

transformation

relies

of approaches

warping

drawing

objects,

rates

class of warp

a range

of the of the

O and

for

a move

oper-

pz = p~ = p.I = P,

transformation

simplifies

as fol-

lows:

the

we can an

the

implemented

the

end points Because

even

we have investigated the

drawing

equal

that

transformation.

is non-a fine,

assumption.

the

mollifi-

property

therefore,

to transform between

recursively

after

under

no

a moderately

animation

the

are based

figures

have

straight

path

merely

that

that

drawing:

path-based

transformations

transformation

sections

of

and

the

of PostScript

based

images,

to draw

a straight

warping

forms

by

to a set of draw-

to those

are

transformation

make

speeding

common

images).

Atfine

and

basic

(which

stencils,

cation.

draw

two

Canvas

warping

is implemented

an interface

are similar

figures

on bitmapped

model

defines

that

supports

Canvas

for

when

Canvas

view

no

expensive of the

certain

distorted

(a standard

frame

objects,

because

algorithms

editor

more

because

lines)

has adequate

Nevertheless,

Drawing The

the

2 with

on

that

server.

vectors

vectors,

of the

animation

simple

and

is that

our

Sparcstation

all

other

of

we ran

achieved

graphics

“straight”

hardware

Cgi grows

transformation. from

between

q ap-

q is coincident

distant

thus

then

when

the

If

1 while

affect

very

distance

consider

as q varies.

techniques

[22].

is necessarily

step

experience

plementation tion

weights

vector

thus

that

Conversely,

all

these

vector

of

our

when

behaviour

graphics

properties

straightness ever,

as other

images

non-warped

transformation

tions

such

warping

Issues

warped

tional 2. Points

problem, for

n =

~

‘wqiF)i

;=1

warped

n

lines.

=

!7 +

Wqlpl

+

Wqin

~

i=2 Drawing

image-based

original

Canvas

graphics

ages and used a standard populate inal warp

However,

not,

pute

an approximation

forming

age and filling image.

Our

results

under

demonstrate

with not

because

in general, the

image we can

transformations

does

built

have

pixel

the corresponding some

algorithm warp

the effect

warp

trans-

in the original

is slow

of the warp.

November 14-17, 1995

and produces but

q + P(wqz

=

Although

im-

area in the transformed

conditions,

iE2 + wq3

+ %4)

for

we comby

q+o+P~wqi

to

the orig-

transformation image

n — —

im-

approach

Instead,

warped

of each

from

use this

the

The

scheme

data

an inverse.

to the

coordinates current

difficult. transformed

back-transformation

the transformed

image.

is more

implementation

ear

reduces ing

the

in the

complexity

number

the number

and scaling,

symmetries

of the

of vectors,

algorithm

the

of arithmetic

some

and

thus

occurs the

lin-

computation

operations.

simplification

are fewer

remains

simpler

benefit

For rotatalthough

the

less.

poor

it is sufficient

We are investigating

to

Another stitution

UIST ’95

technique of a more

that

we have

easily

drawn

investigated shape

for

is the subthe

warped

9

of suspended interface 1,

L

dtsbeltef

move

smooth

motion

ions

of the

willingness

. .

.........

/

P3

..

P4

Lasseter to

stitute then

of path-based

graphics

a Bezier

curve

for each segment

of a warped

curve

as if no warping

were

draw

this

the

way,

mation

we only

when

the

calculating

a considerable the

incur

cost of the

the control

saving

transformation

One

over

the

at many

idea

is to sub-

warping

as a cubic

if a warped Bezier

curve,

transformations instead ing

(the

anticipation, through

The

conditions,

but

curve

warped

Ieads

to

dent

visual

remaining

modifications

mating

path

promise

for

and

appeal.

their

technique,

with

a compromise

such

several

between

animated

warp-

warp curve

to

which

thinking

describes

in relation

interfaces.

The

an overview applies that

material

that

and

accu-

of other for

Basic Animation her

that ing

book

the

to facilitate closely

of the the to

the

agent.

of these

10

as

and

how

a look

at some

systems

their

interfaces;

and

interface

designer

toolkits

the

are

Laurel

active goal,

effort

advocates interest effects;

can for

and

basis

of our

an-

concerned whereas

interactive

operations. that

work on

Card,

good

how

interactive

load

from

The

Self

style

tree

is

makfor

akin

although

to

they

system

with

status

feedback

for

animation.

In wall

can shift, to the

perceptive

dissolves, out,

a

of the goals

and

drawing,

and

are manipulating

on current

technology;

they

techniques

to achieve

sufficiently

but

only

expense

of a limited

and

types

the

stretch,

through,

solid

tion

[5] de-

and

the

was its practical

tion

show

cartoon-

Ungar

follow

to strengthen

of the system

[12]

system.

squash

anticipation, arcs

the

relies

processing

supports

Chang

uses solid

in

particular,

the user’s

environment

techniques.

programmers

Mackinlay visualization

perspective

the

cognitive

Self

and

and

programming

at

is

interactive

blur,

that

paper

technique

for

information

animation

the

how

feedback

Robertson,

[13]

animation

scribe

with

ani-

with

manipulation

as feedback,

dimensional

cone

this and

Our

an-

and

use animation

of

the

taxonomy,

direct

Baecker

process,

we are concerned

slow

it

interface

to

chiefly

[2],

can play:

of function,

animation

in and

workthat

objects.

One

implementa-

use colourmap high

slow

impression

anima-

refresh

choice

rates,

of colours

of animation.

as of

enhance the

Several

workers,

Bharat

and

the

participation

example

secothers,

argues

to collaborate

be used

of

of

their

for

motion

the use of dramatic and

pose-to-pose many

animation

comprehensible.

it

that

agents

of an application’s

Animation

dramatic

[9],

common

in their

Laurel

engage

Thea ire

human some

agents

techniques some

graphical

to achieve

as possible.

human

into

categories: and

Techniques

computer

goal

in three process

to

animation.

Computers

together

is the

interfaces;

our

of animation

animation

and

ut the Interface

By

monitoring

heavily

curves,

has influenced

application

animation

support

that

is arranged

basic

to graphical

presentation

work

to the

of the

incorporate

include

In

other

and and

exaggeration,

as the

roles

animation more

area of three

RELATED WORK section

ArL -

stretch

with

animation

feedback

notion

The

are investi-

performance

with

Systems

as coinci-

structure,

interfaces

their

racy.

This

ahead arcs,

principles

several

of function.

ing

as approxi-

Bezier

Computer

overlapping

Along

Animation

outline of

4 warp

“mild”

We

these

article

Small

points)

warps,

).

to 3D

tech-

Principles

imations.

only

(such

coincident

to the

segments

artifacts

straight

action,

concerned

the true

“severe”

action,

ondary

represented

of the Bezier

degenerates

paper

staging,

slow-out,

imation

control

under

screen.

animation

his

Applted

and

are

well

basic in

expectat-

to an increased

on the

a set of 11 principles:

slow-in

and

need.

the approximation

not

two that

reasonably

unsatisfactory

points

gating

typically

works

the

compute and

transformations

would

approach

we would

This

agent’s

leads

to apply

action,

In

of computing

were

which

timing,

adopted

human

animation

He lists

of an

fashion.

transfor-

points.

segment

end points

of the many

algorithm

path

how

graphics

realistic

is shown

Animation

squash,

mation For example,

what

[8].

we have

In

of the curve,

cost

in-between

path,

present.

points

usual

world,

imution follow [21].

physical

computer

if the

and

to the

to accept

of Traditional

Figure 12: Symmetry of Translation Vectors

figures

is closer

considered

niques

/

is improved

in a smooth

effect

context

have

shown

more

quickly

including

Sukaviriya of an that and

on-line accurately. icons

about

and

the

UIST ’95

nature

have help

animation

der used animated the

Sukaviriya [4],

and

explored system.

helped

[3], which

[17] and

animation These

convey

Baecker,

use of the

Foley

information

Small,

offered programs

in

studies

and

Man-

animated attached

icons.

November

14-17, 1995

help to

Finally,

HyperCard

niques The to

to

help

system use

[1] uses some

smooth

offers

to

several

animate

dissolves,

the

animation for

between

resizing,

and

tech-

between

mechanisms

switching

iris-like

simple

transitions

states,

stack

cards,

panning

builders

as colour) fluence on the

Toolkits

[6]

offers

animation

animation

application

techniques

squash

through,

dition,

and

animation

grammer

slow-in

Pacers

path

the

[18] address

taining

the

plex

graphics Pacers

ject,

pacer

the

object

the

on

might

omit

time

are

draw

fash-

resources.

grained

work Flinders

the

members

been

IRIS

scale

rendering

primary

and

goal

real-time

is to support

on high-performance signed

is a high-end

graphics

as a graphical

user

with

mation

three

2. Ronald the

in graphical

of

ciples

how

effects

based

on

the

“real”

a new a set

of warp

can

field

ing

de-

4.

of ani-

animation

into

interfaces,

use

to

vectors

impression

and

it

graphics

of an existing

demonstrates

feedback suits

need

Systems,

Krishna

can

be

Bharat

effects

that,

helped

improve

Computers

Small.

Inc.,

Animation editor,

MA,

at

The

Design.

Reading,

Small,

and

In

Art

Addison1990.

1–6,

Richard

Mander.

Proceedings

on Humun

and

of

Factors

ACM

In Coli!pnt -

1991.

Piyawadee

interfaces

Interface

using

ACM

Sukaviriya.

animation and

Ani-

servers.

SIG GRAPH

Sofiwur-e

users

In

Symposautn

Technology,

pages

of animation the effects

and to

of the ACM

David

the

user

Unger.

SIG GRAPH

Soflwure

unrt

Animation:

interface.

In

Proceerl-

Sympostum

Technology,

on

pages

User

45-55,

1991.

the

into user

cost

of

even

on

how the

and standard

7. Adobe

animated

that

good

reusable

re-

und Systems

1985.

Lasseter.

on the of other

November 14-17, 1995

user’s

.perception .

aesthetic

elements

of the

9. Brenda

such

Wesley

UIST ’95

3D

on

pages

User

57-67,

PostScript

Addison-Wesley,

Principles

robust, of the Int erfuce

1991. Lunyuuge

Reading,

of traditional

Anaheim,

Animation

Flexible, Proceedings

Symposium

computer

35-44,

Stasko.

In

Incorporated.

sachusetts,

to

T. toolkit:

Technology,

Manuel.

applied

John

abstractions.

Reference

8. John

workstation

and

SIG GRAPH

software

new

toolkit.

drawing

Hudson

in a user interface

ACM

effects

underlying

interface

and

prothe

E.

support

operation

application

describes

be prohibitive,

achieved

Chang cartoons

‘87’, pages

(like

the

and

1991.

ACM The

for

work,

Laurel,

life.

of the

Interface

hardware.

interface

Ian to

pages

user

User

ings

ma-

that

animation

incorporated

that not

that

incorporate

was

3. It

at, Flinders

Interface

Conference

69-79,

prin-

of direct

transformation

transformation model

thank

objects.

geometric

grammers their

Ian

Co.,

icons

6. Scott

based

from

We

this

Apple

Brenda

Baecker,

mating

the illusion

by strengthening

defines

group for

comments

and In

Publishing

CHI’91

its

it is not

to the

on cartoon

to enhance

are manipulating 2. It

a grant

interfaces:

can be used

nipulation

research

Human-Computer

From It shows

by

paper.

Baecker

.5. Bay-Wei 1

in part

HyperCard.

interface.

Wesley

toolkit.

contributions

an

to use.

of Research.

context for

Atkinson.

on

makes

and

make

1987.

CONCLUSIONS work

TGI

of this

Proceedings This

childish

it, can

applications

workstations;

interface

seem

enjoyable

Board

reviewers

presentation

1. W.

full-

However,

interactive

of In-

or draw

toolkit

animation. 3D

uses

uses of animation.

applied,

supported

of the

3. Ronald

[16]

disasters

bad

REFERENCES

ob-

instead

Inventor

and

in-

possible;

great and

will

sensibly

a stimulating

Bringing The

equally

bad

this

are

good

animation

But

University

anonymous

For

a solid

detail

and

graceful

has

providing

quality

to draw

more

This

com-

in a timely

presentation

available

fine

mainthere

to fully

away.

the

the

when

to user input adapt

proalong

of automatically

is insufficient

outline

aspects the

function.

resources

depending

if there

an object

time

of an animation

and respond

graphics

allow

problem

rate

dynamically

example,

timing

functions

of a graphical

computational

ion.

of the

the

frame

insufficient

speed

to a non-linear

In ad-

to control

These

applied,

users

hand,

ACKNOWLEDGEMENTS

and

transitions.

are good

one

of

blurring,

anticipation

slow-out

functions

a choice

motion

trajectories,

effects.

to map

a curved

as simple

arcing

it uses pacing

of the

are

interface programmers

such

and stretch,

follow

that

as there

appropriately

that support

Artkit

it warns

so there

the

improvements

Just

colour,

drive

On

great

hand,

one

to another.

that

other

can

card

be profound.

happen.

including

from

can

suggests

graphics.

In

CA,

July

Mas-

animation SIGGRAPH 1987.

ACM,

Press. Laurel. Publishing

Computers Co.,

us Theutre.

Reading,

MA,

Addison1991.

11

10.

Kit

Laybourne.

lishers,

The Animation

Inc.,

New

York,

Book.

NY,

Crown

Pub-

17.

Piyawadee pling

1979.

Sukaviriya

context-sensitive 11.

Mark

A.

Calder.

Linton,

John

Composing

IEEE

Computer,

Jock

D. Mackinlay,

M.

Vlissides,

user interfaces pages

8-22,

and

with

Paul

R.

the

InterViews.

February

art

K. Card.

text

The

smoothly

CHI’91 ing

George

G. Robertson,

Perspective

integrated.

Conference

Systems,

Wall: In

on Human

pages

173–179,

ACM

face

George art

G. Robertson,

and

Stu-

K.

tions

Card. of

Cone

trees:

hierarchical

of ACM

CHI’91

Steven

H. Tang objects.

and con-

GRAPH

Proceedings

of A CM

and

Fuctors

19.

Computing

Animated

Systems,

pages

and

3D In

information.

Stu-

Shneiderman.

beyond pages 15.

John tem

programming 57–69, T.

visualizaFactors

20.

Paul toolkit.

S.

Bruce

September

In Andreas

pages

192-200,

ACM,

ACM

step

kit

IEEE

Paepcke,

Washington

editor, D. C.,

of

User

Ir~ter-

152-166,1990.

A. Linton.

on

pages

35–43,

Pacers:

of the

User

and

sys-

21.

Computer,

a 3D

Interaction

Special

Time-

ACM

Interface

SIG-

S(jfiwure

1991.

R. Calder. In

of Australia,

203-208,

Melbourne,

Nov

An

Proc.

Interest

Society

Bruce

H.

Thomas

widgets The on

animated

Computer

Group

Hu-

of the

H.

1995

22.

Press.

Russia,

Thomas

InterViews

West

and Information

Intern

Wolberg. Society

Ani-

Calder. toolkit.

In

utzonu[

Conferpages

88–

1995. Paul

R.

manipulation

Report

February

R.

Interaction,

and

puter

Computer

Paul

the

Jul

for direct

Technical

George

and East-

gons.

Australia,

’93, 1993.

Bruce

in

Graphi-

of simple

CIS-95-007, Science,

Calder. School

University

poly-

of Comof South

1995. Digital Press,

Image Los

Wurping.

Alamitos,

IEEE CA

USA,

1992.

12

Er-

‘~4, pages

OZCHI

1994.

Human-Computer

cal feedback

graphics

00PSLA October

and Paul

InterViews.

gonomics

ence

1990. Inventor,

of

Proceedings on

pages

Proceedings

for

Proc.

Computer,

A framework

IRIS

In

H. Thomas

107, Moscow,

animation.

Strauss.

IEEE

A

1983.

TANGO:

algorithm

Technology,

Cou-

in

1991.

manipulation:

languages.

August

Stasko.

for

23(9):27-39, 16.

Direct

In

Symposi,urn

Symposium

mating 14< Ben

help.

and Mark

Technologyl

man

Proceedings

on Human 189-194,

Foley. generation

in Comput-

D. Mackinlay,

Conference

and

elastic

Detail

1991.

Jock

SIG GRAPH

D.

automatic

animated

Soflware

widget 13,

James

with

1989. 18.

12

and

a UI framework

UIST ’95

November

14-17, 1995