CHAPTER 5 TRANSFORMATION

WHAT IS TRANSFORMATIONS?
(ALTERNATE INTERPRETATION)

Transformations convert points between coordinate systems

Different coordinate systems represent the same point in different ways
Some operations are easier in one coordinate system than in another
Transformations modify an object’s shape and location in one coordinate
system
But … How ?
v (2,3) u=x-1 v (1,2)
y y
v=y-1
u x=u+1 u
x y=v+1 x

2
COORDINATE SYSTEMS
•The use of coordinate systems is
fundamental to computer graphics
•Coordinate systems are used to
describe the locations of points in
space
•Wcs : world coordinate system
•Ucs : User coordinate system
•Ncs : Normalised coordinate system
• Multiple coordinate systems make graphics
algorithms easier to understand and
implement
•Việc sử dụng các hệ tọa độ là cơ bản cho đồ
họa máy tính
•Hệ tọa độ được sử dụng để mô tả vị trí của
các điểm trong không gian
•Wcs: hệ tọa độ thế giới
•Ucs: Hệ tọa độ người dùng
•Ncs: Hệ tọa độ chuẩn hóa
• Nhiều hệ tọa độ làm cho thuật toán đồ họa dễ
hiểu và dễ thực hiện hơn
COORDINATE SYSTEMS
•The use of coordinate systems is
fundamental to computer graphics
•Coordinate systems are used to
describe the locations of points in
space
•Wcs : world coordinate system
•Ucs : User coordinate system
•Ncs : Normalised coordinate system
• Multiple coordinate systems make graphics
algorithms easier to understand and
implement

4
WHY TRANSFORMATIONS?

y Scale
Translate World Coordinates
x
Modeling
Coordinates

Scale
Rotate
Translate

5
GRAPHICS PIPELINE
Transform
Illuminate
Transform
Clip
Project
Rasterize

Model & Camera

Rendering Pipeline Framebuffer Display
Parameters
 AFFINE TRANSFORMATIONS
An affine transformation is any transformation that preserves collinearity and ratios of
distances
An affine transformation is one that can be written in the form
x = a xx x + a xy y + bx
y = a yx x + a yy y + by
or
 x   a xx a xy   x  bx 
 y  =  a    + 
a yy   y  by 
   yx
7
WHY AFFINE TRANSFORMATIONS?
Affine transformations are linear
 Transforming all the individual points on a line gives the same set of points
as transforming the endpoints and joining them
 Interpolation is the same in either space:
 Find the halfway point in one space, and transform it.
 Will get the same result if the endpoints are transformed and then find the
halfway point.

Các phép biến đổi affine là tuyến tính

 Chuyển đổi tất cả các điểm riêng lẻ trên một dòng cho cùng một tập hợp các điểm như chuyển
đổi các điểm cuối và nối chúng
 Nội suy là giống nhau trong cả hai không gian:
 Tìm điểm giữa trong một không gian và biến đổi nó.
 Sẽ nhận được kết quả tương tự nếu các điểm cuối được chuyển đổi và sau đó tìm điểm giữa
chừng. 8
AFFINE TRANSFORMATION: PROPERTIES
Product of affine transformations is affine.
• Preservation of lines: They preserve lines, so the image of a straight line is
another straight line
•Affinetransformations preserve parallelism between lines.
•Preservation of proportional distances
•Affine transformations are invertible.
Sản phẩm của biến đổi affine là affine.
▪Bảo toàn các đoạn: Chúng bảo tồn các đoạn, vì vậy hình ảnh của một đường thẳng
là một đường thẳng khác
▪Biến đổi affine bảo tồn song song giữa các đường.
▪Bảo toàn khoảng cách tỷ lệ
▪Biến đổi affine là không thể đảo ngược. 9
10
COMPOSITION OF AFFINE TRANSFORMS

Any affine transformation can be composed as a

sequence of simple transformations:
Translation
Scaling
Rotation

Shear
Reflection

11
  x   s x 0   x  0 
2D SCALING  y  =  0    + 
s y   y  0 
  
Resizes an object in each dimension
x = a xx x + a xy y + bx

y y'
y = a yx x + a yy y + by

syy
y
x sxx
x' = x.S x
x x'
y ' = y.S y

12
ROTATION (2D)
Consider rotation about the origin by q degrees
 radius stays the same, angle increases by q

x’ = r cos (f + q) x’=x cos q –y sin q cos q − sin q 

y ‘= r sin (f + q) y’ = x sin q + y cos q
 sin q cos q 


Specifying a 2D-Rotation about the origin:

x = r cos f
y = r sin f glRotatef(theta, 0.0, 0.0, 1.0);

theta: Angle of rotation in degrees.

The above function defines a rotation about the z-axis (0,0,1).
13
  x  cosq − sin q   x  0
2D ROTATION  y =  sin q   
cosq   y  0
+ 
  
Rotate counter-clockwise about the origin by an angle q
x = a xx x + a xy y + bx
y y y = a yx x + a yy y + by
q
x’=x cos q –y sin q
x x y’ = x sin q + y cos q

14
2D TRANSLATION
Moves an object y y

by
 x  1 0  x  bx 
 y = 0 1  y  + b  x bx x
      y 

x = a xx x + a xy y + bx x' = x + bx
y = a yx x + a yy y + by
y ' = y + by
15
X-AXIS SHEAR
Shear along x axis (What is the matrix for y axis shear?)
y
 x   1 shx   x  0
 y =  0 +  y
  
1   y  0
  
x
x
x' = x + yshx
y ' = y + xshy

16
REFLECT ABOUT X AXIS
x x
 x   1 0   x  0
 y =  0    + 
− 1  y  0
  

What is the matrix for reflect about Y axis?

x' = x
y' = − y

17
ROTATING ABOUT AN ARBITRARY POINT
What happens when you apply a rotation
transformation to an object that is not at
the origin?
Solution:
Translate the center of rotation to the
origin
Rotate the object
Translate back to the original location

18
ROTATING ABOUT AN ARBITRARY POINT
y y
Say R is the rotation matrix to apply, and p
is the point about which to rotate
Translation to Origin: x = x − p x x
Rotation: x = Rx = R( x − p) = Rx − Rp
Translate back: x = x + p = Rx − Rp + p y y
The translation component of the composite
transformation involves the rotation matrix.
x x
What a mess!

19
SCALING AN OBJECT NOT AT THE ORIGIN
What also happens if you
apply the scaling transformation
to an object not at the origin?
Based on the rotating about a
point composition,
what should you do to resize an
object about its own center?
Điều gì cũng xảy ra nếu bạn áp dụng
phép biến đổi tỷ lệ cho một đối tượng
không ở gốc?
Dựa trên sự xoay vòng về một thành
phần điểm,
Bạn nên làm gì để thay đổi kích thước
một đối tượng về trung tâm của chính
nó?
20
HOMOGENEOUS COORDINATES
21
HOMOGENEOUS COORDINATES
•If we use homogeneous coordinates, the
geometric transformations given above
can be represented using only a matrix Cartesian Homogeneous
pre-multiplication.
( x, y ) ⎯
⎯→( xh, yh, h), h  0
• A composite transformation can then be
represented by a product of the a b
corresponding matrices.  , ⎯⎯ ( a, b, c), c  0
•Nếu chúng ta sử dụng tọa độ đồng nhất, các c c
phép biến đổi hình học được đưa ra ở trên có
thể được biểu diễn chỉ bằng cách nhân ma Examples: (5, 8) (15, 24, 3)
trận. (x, y) (x, y, 1)
•Một phép biến đổi tổng hợp sau đó có thể
được biểu diễn bằng một sản phẩm của các ma
trận tương ứng. [6]-22
HOMOGENEOUS COORDINATES
Use three numbers to represent a point
(x,y)=(wx,wy,w) for any constant w0  x a xx a xy bx   x 
 y = a a yy 
by y  
Typically, (x,y) becomes (x,y,1)    yx  
Translation can now be done with matrix  1   0 0 1   1 
multiplication!

23
BASIC TRANSFORMATION
Specifying a 2D-Translation:
Translation:
1 0 bx  glTranslatef(tx, ty, 0.0);
0 1 b 
 y (The z component is set to 0 for 2D translation).
0 0 1 

 x  1 0 bx   x 
 y  =  0 1 by   y 
  
 1   0 0 1   1 

24
 Specifying a 2D-Scaling with respect to the origin:
SCALE glScalef(sx, sy, 1.0);

sx, sy: Scale factors along x, y.

For proper scaling sx, sy must be positive.
For 2D scaling, the third scale factor must be set to 1.0.
 sx 0 0
0 sy 0
 
 0 0 1

 x   S x 0 0  x 
 y  =  0 Sy 0  y 
  
 1   0 0 1  1 

25
 ROTATION ABOUT PIVOT POINT
cosq − sin q 0
Rotation:  sin q cosq 0
 
 0 0 1
Specifying a 2D-Rotation about a pivot point (xp,yp):
 x  cos q − sin q 0  x 
 y =  sin q cos q 0  y 
glTranslatef(xp, yp, 0);
glRotatef(theta, 0, 0, 1.0);
   glTranslatef(-xp, -yp, 0);

 1   0 0 1  1  Note the OpenGL specification of the sequence of transformations in the

reverse order !

x’=x cos q –y sin q

y’ = x sin q + y cos q

26
  x 1 0 0  x 
 y  =  0 0  y
REFLECTIONS 1 
 


0
−1
0
 
1 1
 
 x − 1 0 0  x 
Reflection about y
 y  =  0 1 0  y
x = − x y Initial 1    
1
Object   
 0 0 1
 
 x − 1 0 0  x 
 y  =  0 −1 0  y
x 1    
   1 1
 0 0  
Reflection about
origin
Reflection about x
x = − x
y = − y
y = − y Reflection about x: glScalef(1, -1, 1);
Reflection about y: glScalef(-1, 1, 1);
Reflection about origin: glScalef(-1, -1, 1);

[6]-27
 •A shear transformation in the x-direction (along
x)
SHEARING shifts the points in the x-direction proportional
to the y-coordinate.
•The y-coordinate of each point is unaffected.
•Shear along x, y

 x  1 h 0  x 
 y  =  0 1 0  y
1    
   1 1
0 0  
 x  1 0 0  x 
 y  =  h 1 0  y
  
x = x + hx y 1 
  
0 0 1 1
 
y = y
[6]-28
INVERSE OF TRANSFORMATIONS
If: Examples:
 x   x −1
 y  = [T ] y  T (t x , t y ) = T ( −t x ,−t y )
   

1  
1  R −1
(q ) = R ( −q )
Then:
 1 1 
 x  x
−1
S (s x , s y ) = S  , 
s 
 y  = [T ] −1  y   x sy 
   

1  
1  H x−1 ( h) = H x ( − h)
[6]-29
COMPOSITE TRANSFORMATIONS
Transformation T followed by  x   x
Transformation Q followed by  y  = [ R][Q][T ] y 
   
Transformation R:  1   1 

Example: (Scaling with respect to a fixed point)

 x   1 0 x f   sx 0 0 1 0 − x f   x 
 y  = 0 1 y   0    
0 0 1 − y f   y 

   f  sy
 1  0 0 1   0 0 1 0 0 1   1 

Order of Transformations
30
ORDER OF TRANSFORMATIONS
In composite transformations, the order of transformations is very important.

Rotation followed by Translation:

Translation followed by Rotation:

[6]-31
 ORDER OF TRANSFORMATIONS (OPENGL)

OpenGL postmultiplies the current matrix with the new transformation matrix
glMatrixMode(GL_MODELVIEW); Current Matrix

glLoadIdentity(); [I]

glTranslatef(tx, ty, 0); [T]

glRotatef(theta, 0, 0, 1.0); [T][R]

glVertex2f(x,y); [T][R]P
Rotation followed by Translation !!
32
HOMOGENEOUS TRANSFORM ADVANTAGES
Unified view of transformation as
matrix multiplication
 Easier in hardware and software
To compose transformations, simply
multiply matrices
 Order matters: AB is generally not the
same as BA
Allows for non-affine
transformations:
 Perspective projections!
 Bends, tapers, many others
Quan điểm thống nhất về phép biến
đổi như phép nhân ma trận
 Dễ dàng hơn trong phần cứng và phần mềm
Để soạn thảo các phép biến đổi, chỉ
cần nhân ma trận
 Vấn đề đặt hàng: AB thường không giống
như BA
Cho phép biến đổi không affine:
 Phối cảnh chiếu!
 Bẻ cong, chỉnh sửa, nhiều ứng dụng
33
khác
3D TRANSFORMATIONS
34
 3D TRANSFORMATIONS
Same idea as 2D transformations a b c tx 
 Homogeneous coordinates: (x,y,z,w) d e f 
ty 
 4x4 transformation matrices 
g h i tz 
Typical graphics packages allow for specification  
of translation, rotation, scaling and arbitrary 0 0 0 1
matrices
OpenGL: glTranslate[fd], glRotate[fd],
glScale[fd], glMultMatrix[fd]

35
3D TRANSLATION
➢ Moving of object is called translation.
➢ In 3 dimensional homogeneous
coordinate representation, a point is
transformed from position P = ( x, y, z)
to P’=( x’, y’, z’)  x 1 0 0 tx   x 
➢ This can be written as:-  y  0 1 0 ty  y
 =  
Using P’ = T . P  z   0 0 1 tz   z 
    
 1  0 0 0 1 1 
36
 SCALING (3D)
Expand or contract along each axis (fixed point of origin)

x’=sxx
y’=syy
z’=szz
p’=Sp

 sx 0 0 0
0 sy 0 0
S = S(sx, sy, sz) =  
0 0 sz 0
 
0 0 0 1
37
3D ROTATION
Rotation in 3D is about an axis in 3D space
passing through the origin
Using a matrix representation, any matrix
with an orthonormal top-left 3x3 sub-matrix
is a rotation
 Rows are mutually orthogonal (0 dot
product)
 Determinant is 1
 Implies columns are also orthogonal, and
that the transpose is equal to the inverse
Xoay trong 3D là về một trục trong không
gian 3D đi qua điểm gốc
Sử dụng biểu diễn ma trận, bất kỳ ma trận
nào có ma trận con 3x3 trên cùng bên trái
đều là một phép quay
 Các hàng là trực giao lẫn nhau (sản phẩm
0 chấm)
 Xác định là 1
 Các cột ngụ ý cũng trực giao và chuyển vị
ngang với nghịch đảo

38
3D ROTATION
Rotation in 3D is about an axis in 3D space  x  rxx rxy rxz 0  x 
passing through the origin
 y  r ryy ryz 0 y   
Using a matrix representation, any matrix  = yx  
with an orthonormal top-left 3x3 sub-matrix
is a rotation  z   rzx rzy rzz 0  z 
 Rows are mutually orthogonal (0 dot     
product)  1   0 0 0 1  1 
 Determinant is 1 and for example :
 Implies columns are also orthogonal, and
that the transpose is equal to the inverse rxx ryx + rxy ryy + rxz ryz = 0

39
3D ROTATION
In 2D, the only rotation possible was about
the origin.
In 3D, there are 3 possible rotations, one
about each of the x, y and z axes
Positive rotations are anti-clockwise,
negative rotations are clockwise, when
looking down a positive axis towards the
origin
y y
Trong 2D, phép quay duy nhất có thể là về
gốc.
Trong 3D, có 3 góc quay có thể, theo từng
trục x, y và z
Các phép quay dương là ngược chiều kim
đồng hồ, các phép quay âm theo chiều kim
đồng hồ, khi nhìn xuống một trục dương
về phía gốc
y

x x x
z z z
40
Z-AXIS ROTATION
The equation for Z-axis rotaion
x’ = x cosθ – y sinθ
y’ = x sinθ + y cosθ
z’ = z

cos q − sin q 0 0
R = Rz(q) =  sin q cos q 0 
0

 0 0 1 0
 
 0 0 0 1
41
ROTATION ABOUT X AND Y AXES
Same argument as for rotation 1 0 0 0
0 cos q - sin q 0
about z axis R = Rx(q) =  
 For rotation about x axis, x is 0 sin q cos q 0
unchanged  
 For rotation about y axis, y is 0 0 0 1
unchanged
 cos q 0 sin q 0
R = Ry(q) =  0 1 0 0
 
- sin q 0 cos q 0
 
 0 0 0 1
42
OTHER ROTATION ISSUES
Exp: 1. Rotation is about an axis at the origin
 Use the same trick as in 2D: Translate to origin, rotate, and translate back
again
Rotation is not commutative
 Rotation order matters
 Experiment to convince yourself of this

43
GENERAL ROTATION ABOUT THE ORIGIN

A rotation by q about an arbitrary axis can be decomposed

into the concatenation of rotations about the x, y, and z axes

R(q) = Rz(qz) Ry(qy) Rx(qx)

qx qy qz are called the Euler angles

Note that rotations do not commute

We can use rotations in another order but with different angles

44
EG: ROTATION ABOUT ARBITRARY AXIS
HOW MANY MATRIXES ?

45
3D SHEARING
➢ Modify object shapes
➢ Useful for perspective projections
➢ When an object is viewed from different ➢ Matrix for 3d shearing
directions and at different distances, the
appearance of the object will be different. ➢ Where a and b can Be assigned any
real Value.
➢ Such view is called perspective
view. Perspective projections mimic what the
human eyes see.

46
3D REFLECTION
(REFLECTIONS-SECONDARY TRANSLATION)
▪ Reflection in computer graphics is
used to emulate reflective objects like
mirrors and shiny surfaces
▪ Reflection may be an x-axis y-axis , z-
axis. and also in the planes xy-
plane,yz-plane , and zx-plane.
▪ Reflection relative to a given Axis are
equivalent to 180 Degree rotations
▪ Sự phản chiếu trong đồ họa máy tính
được sử dụng để mô phỏng các vật thể
phản chiếu như gương và bề mặt sáng
bóng
▪ Phản xạ có thể là trục y trục x, trục z.
và cũng trong các mặt phẳng xy-
phẳng, yz-phẳng và zx-phẳng.
▪ Phản xạ liên quan đến một trục đã cho
tương đương với góc quay 180 độ
47
3D REFLECTION
(REFLECTIONS-SECONDARY TRANSLATION)

▪ Reflection in computer graphics is

used to emulate reflective objects like
mirrors and shiny surfaces
▪ Reflection may be an x-axis y-axis , z-
axis. and also in the planes xy-
plane,yz-plane , and zx-plane.
▪ Reflection relative to a given Axis are
equivalent to 180 Degree rotations

48
OPENGL EXAMPLE
Rotation about z axis by 30 degrees with a
fixed point of (1.0, 2.0, 3.0)
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(1.0, 2.0, 3.0);
glRotatef(30.0, 0.0, 0.0, 1.0);
glTranslatef(-1.0, -2.0, -3.0);
glBegin(GL_TRIANGLES);
...

Remember that last transform specified in the

program is the first applied

49
 SUMMARY ScreenCoordinates

Coordinate systems
 World vs. modeling coordinates Transform ation
W orld->Screen
2-D and 3-D transformations
 Trigonometry and geometry
 Matrix representations WorldCoordinates
 Linear vs. affine transformations
Matrix operations Transform ation Transform ation Transform ation
 Matrix composition O bject #1-> O bject #2-> O bject #3->
W orld W orld W orld
Hướng dẫn code:
https://www.youtube.com/watch?v=
_QajrabyTJc&t=500s O bject #1 O bject #2 O bject #3
Object Coordinates Object Coordinates Object Coordinates
50
 HỆ TỌA ĐỘ THỰC
(WCS-WORLD COORDINATE SYSTEM)

Là hệ tọa độ của đối tượng

được các chương trình ứng
dụng sử dụng để mô tả tọa độ
của các đối tượng trong thế
giới thực.
Đơn vị trong hệ thống tọa độ
phụ thuộc vào không gian và
kích thước của đối tượng
được mô tả, có thể từ A0, nm,
mm ... đến m, km ...
Modeling Coordinate

51
 HỆ TỌA ĐỘ THIẾT BỊ
(DCS-DEVICE COORDINATE SYSTEM)
Là hệ thống tọa độ của thiết bị nơi hiển thị hình ảnh và không
gian của đối tượng mà ứng dụng mô tả.

subselect.me

Vïng täa ®é thiÕt bÞ

VGA=640x480

ThiÕt bÞ hiÓn thÞ

52
 HỆ TỌA ĐỘ CHUẨN
(NCS - NORMALIZED COORDINATE SYSTEM)

Chuyển đổi hệ tọa độ

Giải quyết vấn đề khi ứng dụng chạy trên các thiết bị khác nhau
Có kích thước 1x1

NCS Dcs
Wcs chuyÓn ®æi 2
chuyÓn ®æi 1

53
BASIC VIEWING TRANSFORM

Phép biến đổi góc nhìn cơ bản là chuyển đổi từ hệ tọa độ mô hình sang hệ tọa độ
mà hình (Modelling co-ordinates to Screen Coordinates)
Vấn đề:
Thay đổi tỷ lệ hình ảnh
Hiệu ứng về tỉ lệ khi Zoom hình ảnh
Phần nào của hình vẽ sẽ hiển thị ?
Hiển thị tại đâu trên màn hình ?
Chuyển đổi sẽ được thực hiện ra sao?

54
2-DIMENSIONAL VIEWS (wxmax,wymax) (vxmax,vymax)

A Window : Cửa sổ, Phần hình ảnh của thế (wx,wy) (vx,vy)
giới thực sẽ được hiển thị
(vxmin,vymin)
A Viewport : Cổng nhìn, vùng màn hình nơi (wxmin,wymin)
hình ảnh thế giới thực sẽ hiển thị

55
PHÉP CHUYỂN ĐỔI

56
 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ệ  Xvmax - Xvmin 
 Xwmax - Xwmin 0 0
 Yv max − Yv min 
 1 0 0 [ S1] =  0 0
[T 1] =  0 1 0  Yw max − Yw min 
 0 0 1
− Xw − Yw 1
 
[T ] = [T 1]x[S1]x[T 2]
 Xvmax - Xvmin 
Ma trận chuyển vị theo tọa độ viewport 0 0
 
Xwmax - Xwmin
 
1 0 0 Yv max− Yv min
[𝑇2] = 0 1 0 [T ] =  0 0
𝑋𝑣 𝑌𝑣 1  Yw max− Yw min 
 Xvmax - Xvmin Yv max− Yv min 
Xv min− Xw min Yv min− Yw min 1
 Xwmax - Xwmin Yw max− Yw min 
57
VÍ DỤ OPENGL - WINDOWS AND VIEWPORTS

Plotting a function revisted..

//set the viewing coordinates

setWindow(xmin, xmax, ymin, ymax);
setViewport(0,640,0,480);
glBegin(GL_POINTS);
for(GLdouble x = xmin; x < xmax;
x+=0.005 )
{
glVertex2d(x, pow(2.7183,-x)
*cos(2*3.14*x));
} GLdouble bottom, GLdouble top)
glEnd();
//--------------- setWindow ---------------------
void setWindow(GLdouble left, Gldouble right,
GLdouble bottom, GLdouble top)
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(left, right, bottom, top);
}
//---------------- setViewport ------------------
void setViewport(GLdouble left, Gldouble right,
{
glViewport(left, bottom, right – left, top - bottom);}

58
HTTPS://LEARN.UNITY.COM/TUTORIAL/TRANSLAT
E-AND-ROTATE#5C8A44C2EDBC2A001F47CE1E
Transform and Vector –
https://www.youtube.com/watch?v=FeheZqu85WI
Lien he cac doi tuong
https://www.youtube.com/watch?v=2Ariq8vc5Vc
https://www.youtube.com/watch?v=rezoUiwgPrI&feature=youtu.be
https://www.youtube.com/watch?v=tNtOcDryKv4
Demo
Transformation models Unity3d
https://youtu.be/4RLbsJD-xqs

59
Tài liệu phục vụ
học tập sinh viên
CNTT&TT ĐHBK -
HN
Tài liệu sử dụng Hình ảnh , Text , Video trên mạng theo
nguyên tắc FU – CC và tuân thủ theo quy tắc đó
Sinh viên, người học hoàn toàn có quyền chỉnh sửa,
copy và tái suất bản theo CC & FU