![Page 1: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/1.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/2.jpg)
Outline
• Review• Image Warping
– Translation
• Keyframe Animation
![Page 3: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/3.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/4.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/5.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/6.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/7.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/8.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/9.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/10.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/11.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/12.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/13.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/14.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/15.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/16.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/17.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/18.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/19.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/20.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/21.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/22.jpg)
Keyframe Animation
![Page 23: Multimedia Programming 07: Image Warping Keyframe Animation Departments of Digital Contents Sang Il Park](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/23.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/24.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/25.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/26.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/27.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/28.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/29.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/30.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/31.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081603/5697c00d1a28abf838cc9317/html5/thumbnails/32.jpg)
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
α