32
Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Embed Size (px)

Citation preview

Page 1: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Multimedia Programming 07:

Image WarpingKeyframe Animation

Departments of Digital Contents

Sang Il Park

Page 2: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Outline

• Review• Image Warping

– Translation

• Keyframe Animation

Page 3: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Review

• Image Warping– Scaling– Rotation– Together with a 2X2 matrix

Page 4: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Image Processing 2-2

Image Warping(Translation)

Lots of slides taken from Alexei Efros

Page 5: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Review: 2x2 Matrices

• What types of transformations can be represented with a 2x2 matrix?

2D Identity?

yyxx

''

yx

yx

1001

''

2D Scale around (0,0)?

ysy

xsx

y

x

*'

*'

y

x

s

s

y

x

y

x

0

0

'

'

Page 6: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Review: 2x2 Matrices

• What types of transformations can be represented with a 2x2 matrix?

2D Rotate around (0,0)?

yxyyxx

*cos*sin'*sin*cos'

y

x

y

x

cossin

sincos

'

'

2D Shear?

yxshy

yshxx

y

x

*'

*'

y

x

sh

sh

y

x

y

x

1

1

'

'

Page 7: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Review: 2x2 Matrices

• What types of transformations can be represented with a 2x2 matrix?

2D Mirror about Y axis?

yyxx

''

yx

yx

1001

''

2D Mirror over (0,0)?

yyxx

''

yx

yx

1001

''

Page 8: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Review: 2x2 Matrices

• What types of transformations can be represented with a 2x2 matrix?

2D Translation?

y

x

tyy

txx

'

'

Only linear 2D transformations can be represented with a 2x2 matrix

NO!

Page 9: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

All 2D Linear Transformations

• Linear transformations are combinations of …– Scale,– Rotation,– Shear, and– Mirror

• Properties of linear transformations:– Origin maps to origin– Lines map to lines– Parallel lines remain parallel– Ratios are preserved– Closed under composition

y

x

dc

ba

y

x

'

'

yx

lkji

hgfe

dcba

yx''

Page 10: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Translation

• How can we represent translation?

• How can we represent it as a matrix?

y

x

tyy

txx

'

'

Page 11: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Homogeneous Coordinates

•Homogeneous coordinates– represent coordinates in 2 dimensions with a 3-

vector

1

coords shomogeneou y

x

y

x

( 동차좌표 )

Page 12: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Homogeneous Coordinates

• Q: How can we represent translation as a 3x3 matrix?

• A: Using the rightmost column:

100

10

01

y

x

t

t

ranslationT

y

x

tyy

txx

'

'

Page 13: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Translation•Example of translation

tx = 2ty = 1

11100

10

01

1

'

'

y

x

y

x

ty

tx

y

x

t

t

y

x

Homogeneous Coordinates

Page 14: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Homogeneous Coordinates

• Add a 3rd coordinate to every 2D point– (x, y, w) represents a point at location (x/w,

y/w)– (x, y, 0) represents a point at infinity– (0, 0, 0) is not allowed

Convenient coordinate system to represent many useful transformations

1 2

1

2(2,1,1) or (4,2,2) or (6,3,3)

x

y

Page 15: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Basic 2D Transformations

• Basic 2D transformations as 3x3 matrices

1100

0cossin

0sincos

1

'

'

y

x

y

x

1100

10

01

1

'

'

y

x

t

t

y

x

y

x

Translate

Rotate

1100

00

00

1

'

'

y

x

s

s

y

x

y

x

Scale

Page 16: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Affine Transformations

• Affine transformations are combinations of …– Linear transformations, and– Translations

• Properties of affine transformations:– Origin does not necessarily map to origin– Lines map to lines– Parallel lines remain parallel– Ratios are preserved– Closed under composition– Models change of basis

wyx

fedcba

wyx

100''

( 유사변환 )

Page 17: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Projective Transformations

• Projective transformations …– Affine transformations, and– Projective warps

• Properties of projective transformations:– Origin does not necessarily map to origin– Lines map to lines– Parallel lines do not necessarily remain parallel– Ratios are not preserved– Closed under composition– Models change of basis

wyx

ihgfedcba

wyx

'''

( 사영변환 )

Page 18: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Matrix Composition

• Transformations can be combined by matrix multiplication

wyx

sysx

tytx

wyx

1000000

1000cossin0sincos

1001001

'''

p’ = T(tx,ty) R() S(sx,sy) p

Sequence of composition1. First, Scaling2. Next, Rotation3. Finally, Translation

Page 19: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Inverse Transformation

1

'

'

100

0cossin

0sincos

1

y

x

y

x

1

'

'

100

10

01

1

y

x

t

t

y

x

y

x

Translate

Rotate

1

'

'

100

0/10

00/1

1

y

x

s

s

y

x

y

x

Scale

Page 20: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Inverse Transformation

wyx

sysx

tytx

wyx

1000000

1000cossin0sincos

1001001

'''

p’ = T(tx,ty) R() S(sx,sy) p

'

'

'

100

10

01

100

0cossin

0sincos

100

0/10

00/1

w

y

x

ty

tx

sy

sx

w

y

x

P = S-1(sx,sy) R-1() T-1(tx,ty) p’

Page 21: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

2D image transformations

These transformations are a nested set of groups• Closed under composition and inverse is a member

Page 22: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Keyframe Animation

Page 23: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Keyframe Animation

• Keyframes?– Define starting and ending

points of any smooth transitions

• The workflow of traditional hand-drawn animation– 1. Key frames

by senior key artists– 2. ‘clean-up’ and

‘inbetweens’ by inbetweeners keyframes inbetweens

Page 24: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Keyframe Animation

The starting keyframe The ending keyframe The completed animation

Page 25: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Keyframing: issues

• How do you know where to put the keyframes?

• Interface: How do you actually specify the key values?

• Inbetween: How do you make frames between keys

Page 26: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Making inbetweens

• Interpolation

StartTime = 0

EndTime = 1

InbetweenTime = α

(0 ≤ α ≤1)

? ?

Page 27: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Making inbetweens

• Linear Interpolation

StartTime = 0

EndTime = 1

InbetweenTime = α

(0 ≤ α ≤1)

1-α α

Page 28: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

State vector

• How to represent a state?– By Numbers! (or Parameters!)

– Examples)• Color: R,G,B (H,S,V)• Scale: Sx, Sy• Rotation: θ• Translation: Tx, Ty• Position of vertices• …

Page 29: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

State vector

• A state vector: a collection of parameters– Example with 5 parameters

• Scale: Sx, Sy• Rotation: θ• Translation: Tx, Ty

y

x

y

x

T

T

s

s

v

Page 30: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Interpolation of state vector

• Keyframes:

0

0

0

0

0

0

y

x

y

x

T

T

s

s

v

y

x

y

x

T

T

s

s

1

1

1

1

1

1 v

10 , vv

(at time=0) (at time=1)

Page 31: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Interpolation of state vector

• What is the state vector at time = α ?

)1( 10 vvv

1-α α

0v1v

α

Page 32: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park

Interpolation of state vector

• What is the state vector at time = α ?

)1(

)1(

)1(

)1(

)1(

)1(

10

10

10

10

10

10

yy

xx

yy

xx

TT

TT

ss

ss

vvv

1-α α

0v1v

α