(c) SE/FIT/HUT 2002 1
Bài 4 Các phép biến đổi Đồ hoạ
Affine Transformations
Le Tan Hung
Email: 
[email protected]
I KHái niệm cơ bản
II Các phép biến đổi
III Hệ tọa độ đồng nhất
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 2
Mô hình hoá - Modelling 
 mô hình - model :
 Modeling - Mô hình hoá
 Thực thể cơ sở -
primitives
 như circles, lines polygons 
hay cubes
 Cảnh - A scene
 mô hình hoá cảnh - Scene 
Modeling
object
A scene with several instances of the object
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002
Ví dụ
 At each frame of the animation, the 
object is transformed, in this case by a 
rotation. It could also be transformed 
by changing its size (scaling), or its 
shape (deforming), or its location 
(translation). 
 Further animation effects can be 
achieved by not changing the object, 
but the way it is viewed (i.e. the 
window to viewport transformation) at 
each frame (e.g. by zooming).
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 4
Phép biến đổi - Transformations 
 Trong kỹ thuật đồ hoạ 3 bước: modeling, rendering, 
displaying
 Với Modeling:
 Phép biến đổi - Transformation
 Biến đổi mô hình hoá - Modeling transformations
 Biến đổi tạo góc nhìn - Viewing transformations
 Biến đổi tạo Hoạt cảnh - Animation
modeling 
coordinate Modeling 
transformation
Viewing 
transformation
world 
coordinate
viewing 
coordinate (eye coordinate)
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 5
Transformations - Modeling
world
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 6
Viewing
Transformations - Viewing
 Viewing 
 Transformations - Viewing
 Trong phép biến đổi này : 
 Một mô hình có thể quan sát 
trên các góc cạnh khác nhau 
(e.g. faraway, near, looking 
down, looking up) WORLD
OBJECT
CAMERA
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 7
Phép biến đổi Affine
Affine Transformations?
 Phép biến đổi Affine 
 Ví dụ: phép biến đổi tọa độ với chỉ 2 điểm đầu cuối của
đoạn thẳng tạo thành 2 điểm mới mà khi nối chúng với
nhau tạo thành đoạn thẳng mới.
 Các điểm nằm trên đoạn thẳng sẽ có kết quả là điểm
nằm trên đoạn thẳng mới với cùng phép biến đổi thông
qua phép nội suy.
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002
Phân loại - Transformations
 Có 2 cách nhìn trên phép 
biến đổi 
 Object Transformation: 
 Coordinate 
Transformation 
 Mỗi phương pháp có ưu 
nhược điểm riêng về bản 
chất tương đồng nhau
1,1
.4, 2
Example: OBJECT TRANSFORMATION
(1,1)
(1,1)
Example: COORDINATE TRANSFORMATION
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 9
Modeling Transformations
Transform objects/points Transform coordinate system
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002
2D Object Transformations
 A 2D object transformation alters each point P into a 
new point Q using a specific formula or algorithm.
 It therefore alters the co-ordinates of P (Px,Py) into 
new values which specify point Q (Qx,Qy)
 This can be expressed using some function T, that 
maps co-ordinate pairs into co-ordinate pairs:
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002
Matrix Representation
 If affine transformation T maps P onto Q, then Q is related to P as 
follows:
 where a, b, c, d, tx and ty are all constants, and ad = bc
 This gives rise to the following matrix representation:
 i.e. 
+
=
y
x
y
x
y
x
t
t
P
P
dc
ba
Q
Q
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 12
Các phép biến đổi hình học hai chiều
 Phương pháp biểu diễn đối tượng P = [ x y ]
 Phép biến đổi vị trí điểm
 Thực thi phép biến đổi đúng trên 1 điểm ảnh sẽ đúng trên toàn bộ đối
tượng
=
dc
ba
T
y
x
z
pM
pW
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 13
Phép biến đổi
 Phép bất biến
 Phép biến đổi tỉ lệ - Scaling
 A scaling changes the size of an object with two scale factors, Sx and Sy
 Phép biến dạng
 A shearing shears an object in a particular direction, (in 2D, it’s either in the x 
or in the y direction
xz
y
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 14
Phép quay- Rotation
y
( x, y )
xα
ρθ
ρ
( x’, y’ )
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 15
Thuộc tính cơ bản của phép biến đổi 
Affine Transformations
 Preservation of lines:
 Affine transformations map lines to lines;
 Preservation of parallelism 
 Preservation of proportional distances
 Affine transformations change volume by | 
Det(M) |;
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002
Kết hợp các phép biến đổi
Composition of Affine Transforms
 Any affine transformation can be 
decomposed into elementary 
transformations.
 Mọi phép biến đổi phức tạp đều có
thể tạo thành từ các phép biến đổi cơ
sở như:
 Dịch chuyển - Translation
 Tỉ lệ - Scaling
 Quay- Rotation
 Biến dạng - Shearing
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002
Affine transformations preserve 
affine combinations
 It is rare that we want to perform just one elementary 
transformation.
 Usually an application requires that we build a complex 
transformation out of several elementary ones
 e.g. translate an object, rotate it, and scale it, all in one move
 These individual transformations combine into one overall 
transformation
 This is called the composition of transformations.
 The composition of two or more affine transformations is 
also an affine transformation
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 18
Thuộc tính 
 Tác động lên tập các điểm đặc trưng của đối tượng tạo 
thành phép biến đổi cho đối tượng
 We have defined each transformation by their effects on single 
points
 In practice these will be applied to multiple points to transfer
entire scenes or objects made up of many defining points
T
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002
Điểm gốc - Pivotal points
Cho phép quay và tỉ lệ Rotation and Scaling
 The simple versions of rotation and scaling have been based around the origin.
 This means that when we rotate or scale, the object will also move, with 
respect to the origin
 Translate all points through (-c1,-c2)
 Rotate all points about the origin by
 Translate all points back through (c1,c2) 
(c1,c2)
(0,0)
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002
Pivotal points
 Often we wish to rotate or scale with respect to some pivotal 
point, not the origin
 Most significantly, we often wish to rotate or scale an object 
about its centre, or midpoint
 In this way, the object’s location does not change
 To do this, we relate the rotation or scaling about the pivotal 
point V, to an elementary rotation or scaling about the origin
 We first translate all points so that V coincides with the origin
 We then rotate or about the origin
 then all points are translated back, so that V is restored to its original 
location
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002
Hệ toạ độ đồng nhất
 Vấn đề gặp phải:
 An affine transformation is composed of a linear transformation 
followed by a translation
 Unfortunately, the translation portion is not a matrix 
multiplication but must instead be added as an extra term, or 
vector
 What we need is a “trick”, so that translations can be represented 
in matrix multiplication form
 This then means that they can be easily composed with other 
transformations, by simply multiplying the matrices together
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 22
Tọa độ đồng nhất
Homogeneous Transform 
 x' = ax + by + n
 y' = bx + dy + m
 Phương pháp biểu diễn mở rộng thông qua tọa độ đồng
nhất của các vector vị trí
 Với ứng dụng của phép chiếu hình học mà ở đó tọa độ điểm
được mô tả dưới ma trận [ x* y* h]
 với x = x*/h, y = y*/h, z = z*/h và h là một số thực tuỳ ý
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 23
Ưu điểm của Hệ tọa độ đồng nhất
Homogeneous Transform
 Ðưa ra cái nhìn hợp nhất của các phép biến đổi dưới phép nhân
ma trận, hỗ trợ cho việc xử lý bằng cả phần cứng và phần mềm
 Kết hợp các các phép biến đổi tạo thành ma trận tích đơn giản duy
nhất. Tránh nhầm lẫn về thứ tự của các phép nhân khi sử dụng.
 Order matters: AB is generally not the same as BA
 Cho phép kết hợp với cả các phép biến đổi đặc biệt không tuyến
tính khác(non-affine) như:
 Phép chiếu phối cảnh - Perspective projections!
 Uốn - Bends, Vuốt tapers v.v.v
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 24
Phép biến đổi với tọa độ đồng nhất
 Ma trận biến đổi đồng nhất
 Phép tịnh tiến 
=
1
0
0
][
nm
dc
ba
T
]1[
1
010
001
]1[]1''[ nymx
nm
yxyx ++=
=
(tx, ty, tz)
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 25
Phép tỉ lệ
]12.1.[
100
020
001
]1[]1''[ SySxS
S
yxyx =
=
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 26
Phép quay
y
( x, y )
xα
ρθ
ρ
( x’, y’ )
]1cos.sin.sin.cos.[ φφφφ yxyx +−=
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 27
Phép biến đổi tổng hợp
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 28
Phép chuyển đổi
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 29
Windows and Viewports
 Mapping involves scaling and translation (moving).
 Both the world window and viewport can be any aligned 
rectangle.
 Usually the viewport is set to take up the entire screen 
window.
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 30
Phép biến đổi theo ma trận
 Ma trận chuyển vị theo Window
 Ma trận biến đổi tỉ lệ
 Ma trận chuyển vị theo tọa độ viewport
−
−=
100
0
minmax
minmax0
00
Xwmin-Xwmax
Xvmin-Xvmax
]1[
YwYw
YvYvS
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 31
Ma trận biến đổi tổng hợp của phép chuyển đổi
tọa độ
−
−−−
−
−=
=
1
minmax
minmaxminmin
Xwmin-Xwmax
Xvmin-Xvmaxminmin
0
minmax
minmax0
00
Xwmin-Xwmax
Xvmin-Xvmax
][
]2[]1[]1[][
YwYw
YvYvYwYvXwXv
YwYw
YvYvT
TxSxTT
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002
Coordinate Transforms
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 33
Coordinate Transforms
(1,1)
u’
v’
(1,1)
u
v
x
y
Object defined in Local 
Coordinate System
Object after transformation in 
Global Coordinate System
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 34
x
y
x
y
Identity as a Coordinate Transform
P
100
010
001
Q
=
(1,1)
u
v
(1,1)
u’
v’
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 35
x
y
Translation
x
y
P
100
10
01
Q
= ty
tx
(1,1)
u
v
(1+tx,1+ty)
u’
v’
=
11
0
0
ty
tx
ty
tx
100
10
01
 +
=
1
1
1
0
1
ty
tx
ty
tx
100
10
01
+=
1
1
1
1
0
ty
tx
ty
tx
100
10
01
origin
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 36
x
y
Rotation
x
y
P
100
0
0
Q
 −
= θθ
θθ
cossin
sincos
(1,1)
u
v
u ’
v ’
=
1
sin
cos
θ
θ
v
−
=
1
cos
sin
θ
θ
u
=
1
0
0
O
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 37
x
y
Scaling
x
y
P
100
0
0
Q
= sy
sx
0
0
(1,1)
u
v
(sx*1,sy*1)
u
v
=
1
0
0
O
=
1
0
syu
=
1
0
sx
v
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 38
Composite Transformations
−−
+−−
=
100
sin)cos1(cossin
sin)cos1(sincos
11
11
θθθθ
θθθθ
xy
yx
M
x
y
x
y
(1,1)
u
v
u ’
v
’
−−
+−
1
sin)cos1(
sin)cos1(
11
11
θθ
θθ
yy
yx
−−+
+−+
1
sin)cos1(sin
sin)cos1(cos
11
11
θθθ
θθθ
yy
yx
−−+
+−+−
1
sin)cos1(cos
sin)cos1(sin
11
11
θθθ
θθθ
yy
yx
O = 
v = 
u = 
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 39
Modeling Transformations
 To make full use of the computational optimisation made 
possible by composite transforms, we only want to apply the 
transformations to points at the very end
 i.e. the transformation operation (multiplying point p by 
transform matrix is the very last thing we do in the modelling 
phase)
Specify points 
in local coords
Specify 
Transformations
(composite if necessary)
Send to 
Pipeline
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 40
+ +
=This of course shouldn’t 
mean all objects need to 
share the same 
transformations
CuuDuongThanCong.com https://fb.com/tailieudientucntt
(c) SE/FIT/HUT 2002 41
+
=
+
transform +transform
+
transform
Obviously we want 
something more 
versatile
CuuDuongThanCong.com https://fb.com/tailieudientucntt