Multimedia Programming 07:
Image WarpingKeyframe 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?
yyxx
''
yx
yx
1001
''
2D Scale around (0,0)?
ysy
xsx
y
x
*'
*'
y
x
s
s
y
x
y
x
0
0
'
'
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
'
'
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
''
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!
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''
Translation
• How can we represent translation?
• How can we represent it as a matrix?
y
x
tyy
txx
'
'
Homogeneous Coordinates
•Homogeneous coordinates– represent coordinates in 2 dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
( 동차좌표 )
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
'
'
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
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
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
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''
( 유사변환 )
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
'''
( 사영변환 )
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
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
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’
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
StartTime = 0
EndTime = 1
InbetweenTime = α
(0 ≤ α ≤1)
? ?
Making inbetweens
• Linear Interpolation
StartTime = 0
EndTime = 1
InbetweenTime = α
(0 ≤ α ≤1)
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
y
x
y
x
T
T
s
s
v
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)
Interpolation of state vector
• What is the state vector at time = α ?
)1( 10 vvv
1-α α
0v1v
α
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
α