# Slides

Document Sample

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

Outline
• Review • Image Warping
– Translation

• Keyframe Animation

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

Image Processing 2-2
Image Warping (Translation)

Lots of slides taken from Alexei Efros

Review: 2x2 Matrices
• What types of transformations can be represented with a 2x2 matrix?
2D Identity?

x'  x y'  y
x'  s x * x y'  s y * y

 x'  1 0  x   y ' 0 1  y      
 x '  s x  y '   0    0  x s y  y  

2D Scale around (0,0)?

Review: 2x2 Matrices
• What types of transformations can be represented with a 2x2 matrix?
2D Rotate around (0,0)?
x'  cos  * x  sin  * y y '  sin  * x  cos  * y
 x ' cos   sin   x   y '   sin  cos    y      

2D Shear?
x '  x  shx * y y '  shy * x  y

 x '  1  y '   sh    y

shx   x  1  y  

Review: 2x2 Matrices
• What types of transformations can be represented with a 2x2 matrix?
x'   x y'  y

 x '     1 0  x   y '  0 1  y      

2D Mirror over (0,0)?
x'   x y'   y

 x'   1 0   x   y '  0  1  y      

Review: 2x2 Matrices
• What types of transformations can be represented with a 2x2 matrix?
2D Translation?
x'  x  t x y'  y  t y
NO!

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

All 2D Linear Transformations
• Linear transformations are combinations of …
– – – – – – – – – Scale, Rotation, Shear, and Mirror Origin maps to origin Lines map to lines Parallel lines remain parallel Ratios are preserved Closed under composition

 x' a b   x   y '   c d   y      

• Properties of linear transformations:

 x'  a b   e  y '  c d   g    

f  i h  k 

j x l  y  

Translation
• How can we represent translation?

x'  x  t x y'  y  t y
• How can we represent it as a matrix?

Homogeneous Coordinates
•Homogeneous coordinates (동차좌표)
– represent coordinates in 2 dimensions with a 3-vector

 x  x  homogeneou coords   s  y      y    1   

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

x'  x  t x y'  y  t y

• A: Using the rightmost column:

1 0 t x    Translation  0 1 t y  0 0 1   

Translation
•Example of translation
Homogeneous Coordinates

 x '  1 0 t x   x   x  t x   y '  0 1 t   y    y  t  y   y      1  0 0 1   1   1        

tx = 2 ty = 1

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
y

2 1
Convenient coordinate system to represent many useful transformations

(2,1,1)

or (4,2,2)

or (6,3,3)

1

2

x

Basic 2D Transformations
• Basic 2D transformations as 3x3 matrices
 x'  1 0 t x   x   y '  0 1 t   y  y       1  0 0 1   1      
Translate

 x '  s x  y '   0    1  0   

0 sy 0

0  x  0  y    1  1   

Scale

 x' cos   y '   sin     1  0   

 sin  cos  0

0  x  0  y    1  1   

Rotate

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

 x'  a b  y '  d e  w  0 0   

c  x  f  y  1   w  

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

 x'   a  y '   d  w'  g   

b e h

c  x  f  y  i   w  

Matrix Composition
• Transformations can be combined by matrix multiplication
 x'   1 0 tx  cos   sin  0  sx 0 0   x   y '    0 1 ty   sin  cos  0  0 sy 0   y     w'  0 0 1   0 0 1   0 0 1    w        
p’ = T(tx,ty) R() S(sx,sy) p

Sequence of composition 1. First, Scaling 2. Next, Rotation 3. Finally, Translation

Inverse Transformation
 x  1 0  t x   x'  y   0 1  t   y ' y       1  0 0 1   1      
Translate

0  x  1 / s x  y   0 1/ s y    1   0 0   
Scale

0  x '  0  y '   1  1   

 x   cos  sin  0  x'  y    sin  cos  0  y '      1   0 0 1  1      
Rotate

Inverse Transformation
 x'   1 0 tx  cos   sin  0  sx 0 0   x   y '    0 1 ty   sin  cos  0  0 sy 0   y     w'  0 0 1   0 0 1   0 0 1    w        
p’ = T(tx,ty) R() S(sx,sy) p

0 0  cos  sin  0 1 0  tx    x'   x   1 / sx  y     0 1 / sy 0  sin  cos  0 0 1  ty    y '           w   0 0 1  0 0 1 0 0 1    w'        
P = S-1(sx,sy) R-1() T-1(tx,ty) p’

2D image transformations

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

Keyframe Animation

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

Keyframe Animation

The starting keyframe

The ending keyframe

The completed animation

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

Making inbetweens
• Interpolation

?

?

Start Time = 0

Inbetween Time = α (0 ≤ α ≤1)

End Time = 1

Making inbetweens
• Linear Interpolation

1-α

α

Start Time = 0

Inbetween Time = α (0 ≤ α ≤1)

End Time = 1

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 …

State vector
• A state vector: a collection of parameters
– Example with 5 parameters
• Scale: Sx, Sy • Rotation: θ • Translation: Tx, Ty

 sx     sy    v    Tx  T   y

Interpolation of state vector
• Keyframes: v 0 , v1

s x  0  s y  v0    0    T 0x   0  T y 
0

 s1 x   1  s y  1  1  v     T 1x   1  T y 
(at time=1)

(at time=0)

Interpolation of state vector
• What is the state vector at time = α ?
1-α α

v

0
α
0

v

1

v  (1   ) v   v



1

Interpolation of state vector
• What is the state vector at time = α ?
1-α α

v

0

α

v

1

 (1   ) s 0 x   s1 x     (1   ) s 0 y   s1 y   0 1 v  (1   ) v   v   (1   ) 0    1     (1   )T 0 x   T 1 x   0 1   (1   )T y   T y 

```
DOCUMENT INFO
Shared By:
Categories:
Stats:
 views: 7 posted: 1/6/2010 language: English pages: 32