2d and 3d transformation
DESCRIPTION
2D and 3D Transformation. Pradondet Nilagupta Dept. of Computer Engineering Kasetsart University. Transformations and Matrices. Transformations are functions Matrices are functions representations Matrices represent linear transformation {2x2 Matrices} {2D Linear Transformation}. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/1.jpg)
April 19, 2023204481 Foundation of Computer Graphics 1
2D and 3D Transformation
Pradondet Nilagupta
Dept. of Computer Engineering
Kasetsart University
![Page 2: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/2.jpg)
April 19, 2023204481 Foundation of Computer Graphics 2
Transformations and Matrices
Transformations are functions Matrices are functions representations Matrices represent linear transformation {2x2 Matrices} {2D Linear Transformation}
![Page 3: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/3.jpg)
April 19, 2023204481 Foundation of Computer Graphics 3
Transformations (1/3)
What are they? changing something to something else via rules mathematics: mapping between values in a range set
and domain set (function/relation) geometric: translate, rotate, scale, shear,…
Why are they important to graphics? moving objects on screen / in space mapping from model space to screen space specifying parent/child relationships …
![Page 4: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/4.jpg)
April 19, 2023204481 Foundation of Computer Graphics 4
Transformation (2/3)
Translation Moving an object
Scale Changing the size
of an object
ty
tx
wold wnew
hold
hnew
xnew = xold + tx; ynew = yold + ty
sx=wnew/wold sy=hnew/hold
xnew = sxxold ynew = syyold
![Page 5: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/5.jpg)
April 19, 2023204481 Foundation of Computer Graphics 5
Transformation (3/3)
To rotate a line or polygon, we must rotate each of its vertices
Shear
(x,y)
Original Data y Shear x Shear
![Page 6: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/6.jpg)
April 19, 2023204481 Foundation of Computer Graphics 6
What is a 2D Linear Transform?
.y and x vectorsand ascalar for
,)y(T)x(aT)yxa(T:Definition
)y,x2()y,x2(yy),xx(2
:say 2,by x,in Scale
11001010
Example
![Page 7: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/7.jpg)
April 19, 2023204481 Foundation of Computer Graphics 7
Example
), 00( yx ), 002( yx
), 11( yx ), 112( yx
y
x x
y
), 002( yx
), 112( yx
yyxx 1010 ,22
y
), 00( yx
), 11( yx
yyxx 1010 ),(2
yyxx 1010 ),(
x
y
yyxx 1010 ),(2
yyxx 1010 ),(
y
x
yyxx 1010 ,22 Scale in x by 2
yyxx 1010 ),(2 yyxx 1010 ),(2
![Page 8: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/8.jpg)
April 19, 2023204481 Foundation of Computer Graphics 8
Transformations: Translation (1/2)
A translation is a straight line movement of an object from one position to another.
A point (x,y) is transformed to the point (x’,y’) by adding the translation distances Tx and Ty:
x’ = x + Tx
y’ = y + Ty
![Page 9: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/9.jpg)
April 19, 2023204481 Foundation of Computer Graphics 9
Transformations: Translation(2/2)
moving a point by a given tx and ty amount
e.g. point P is translated to point P’
moving a line by a given tx and ty amount
translate each of the 2 endpoints
)10,5(P
)10,15(P
0
10
y
x
t
tT
)20,5(1P
)10,5(2P )10,5(1P
)0,5(2P
10
0
y
x
t
tT
![Page 10: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/10.jpg)
April 19, 2023204481 Foundation of Computer Graphics 10
Transformations: Rotation (1/4)
Objects rotated according to angle of rotation theta ()
Suppose a point P(x,y) is transformed to the point P'(x',y') by an anti-clockwise rotation about the origin by an angle of degrees, then:
Given x = r cos , y = r sin x’ = x cos – y sin y’ = y sin + y cos
![Page 11: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/11.jpg)
April 19, 2023204481 Foundation of Computer Graphics 11
Transformations: Rotation (2/4)
Rotation P by anticlockwise relative to origin (0,0)
)0,0(
),( yxP
),( yxP
x
yr
)0,0(
),( yxP
![Page 12: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/12.jpg)
April 19, 2023204481 Foundation of Computer Graphics 12
Transformations: Rotation (3/4)
Rotation about an arbitary pivot point (xR,yR)Step 1: translation of the object by (-xR,-yR)
x1 = x - xR
y1 = y - yRStep 2: rotation about the origin
x2 = x1 cos() - y1sin ()
y2 = y1cos() - x1sin ()Step 3: translation of the rotated object by (xR,yR)
x’ = xr + x2
y’ = yr + y2
![Page 13: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/13.jpg)
April 19, 2023204481 Foundation of Computer Graphics 13
Transformations: Rotation (4/4)
object can be rotated around an arbitrary point (xr,yr) known as rotation or pivot point by: x' = xr + (x - xr) cos() - (y - yr) sin ()
y' = yr + (x - xr) sin ()+(y - yr) cos()
![Page 14: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/14.jpg)
April 19, 2023204481 Foundation of Computer Graphics 14
Transformations: Scaling (1/5)
Scaling changes the size of an object Achieved by applying scaling factors
sx and sy Scaling factors are applied to the X
and Y co-ordinates of points defining an object’s
![Page 15: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/15.jpg)
April 19, 2023204481 Foundation of Computer Graphics 15
Transformations: Scaling (2/5)
uniform scaling is produced when sx and sy have same value i.e. sx = sy
non-uniform scaling is produced when sx and sx are not equal - e.g. an ellipse from a circle. i.e. sx sy
x2 = sxx1 y2 = syy1
![Page 16: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/16.jpg)
April 19, 2023204481 Foundation of Computer Graphics 16
Transformations: Scaling (3/5)
Simple scaling - relative to (0,0)
General form:
y*sy
x*sx
y
x
),(1 yxP),(1 yxP
)3,2(1P
)1,3(2P
)3,4(1P
)1,6(2P
Ex: sx = 2 and sy=1
![Page 17: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/17.jpg)
April 19, 2023204481 Foundation of Computer Graphics 17
Transformations: Scaling (4/5)
If the point (xf,yf) is to be the fixed point, the transformation is:
x' = xf + (x - xf) Sx
y' = yf + (y - yf) Sy
This can be rearranged to give:
x' = x Sx + (1 - Sx) xf
y' = y Sy + (1 - Sy) yf
which is a combination of a scaling about the origin and a translation.
![Page 18: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/18.jpg)
April 19, 2023204481 Foundation of Computer Graphics 18
Transformations: Scaling (5/5)
![Page 19: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/19.jpg)
April 19, 2023204481 Foundation of Computer Graphics 19
Transformation as Matrices
Scale:
x’ = sxx
y’ = syy
Rotation:
x’ = xcos - ysin y’ = xsin + ycos
Translation:
x’ = x + tx
y’ = y + ty
ys
xs
y
x
s
s
y
x
y
x
0
0
cossin
sincos
cossin
sincos
yx
yx
y
x
y
x
y
x
ty
tx
y
x
t
t
![Page 20: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/20.jpg)
April 19, 2023204481 Foundation of Computer Graphics 20
Transformations: Shear (1/2)
y
ayx
y
xaShx 10
1Shear in x:
)0,1(
)1,( a)1,0(
)0,1(
)1,1(
![Page 21: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/21.jpg)
April 19, 2023204481 Foundation of Computer Graphics 21
Transformations: Shear (2/2)
Shear in y:
)1,0(
)0,0(
),1( b
)1,0(
)0,1()0,0(
)1,1(
ybx
x
y
x
bShy 1
01
![Page 22: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/22.jpg)
April 19, 2023204481 Foundation of Computer Graphics 22
Shear in x then in y
)1,0(
)0,0(
)1,0(
)0,0(
)1,0(
)0,0()0,1( )0,1(
),(1 bab
),( 1a
),( 1 aba
),( 11 baba
),( 11 a
)1,0(
)0,0(
)1,1( b
)1,1(
),1( b
![Page 23: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/23.jpg)
April 19, 2023204481 Foundation of Computer Graphics 23
Shear in y then in x
)1,0(
)0,0(
)1,0(
)1,0(
)0,0()0,1( )0,1(
),(1 b
),( 1a
),( 1 aba
),( 11 abba
),( 11 a
)1,0(
)0,0(
)1,1( b
)1,1(
),1( b
![Page 24: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/24.jpg)
April 19, 2023204481 Foundation of Computer Graphics 24
Homogeneous coordinate
As translations do not have a 2 x 2 matrix representation, we introduce homogeneous coordinates to allow a 3 x 3 matrix representation.
The Homogeneous coordinate corresponding to the point (x,y) is the triple (xh, yh, w) where:
xh = wx yh = wy
For the two dimensional transformations we can set w = 1.
![Page 25: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/25.jpg)
April 19, 2023204481 Foundation of Computer Graphics 25
Matrix representation
1),( y
x
P yx
100
00
00
, y
x
yx s
s
S
100
0cossin
0sincos
R
100
10
01
, y
x
yx t
t
T
![Page 26: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/26.jpg)
April 19, 2023204481 Foundation of Computer Graphics 26
Basic Transformation (1/3)
Translation
![Page 27: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/27.jpg)
April 19, 2023204481 Foundation of Computer Graphics 27
Basic Transformation (2/3)
Rotation
P x y x y
t t
t t PS t( , , ) ( , , )
cos sin
sin cos ( )1 1
0
0
0 0 1
![Page 28: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/28.jpg)
April 19, 2023204481 Foundation of Computer Graphics 28
Basic Transformation (3/3)
Scaling
![Page 29: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/29.jpg)
April 19, 2023204481 Foundation of Computer Graphics 29
Composite Transformation
Suppose we wished to perform multiple transformations on a point:
P2 T3,1P1
P3 S2, 2P2
P4 R30P3
M R30S2,2T3,1
P4 MP1
![Page 30: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/30.jpg)
April 19, 2023204481 Foundation of Computer Graphics 30
Example of Composite Transformation(1/3)
A scaling transformation at an arbitrary angle is a combination of two rotations and a scaling:
R(-t) S(Sx,Sy) R(t)
A rotation about an arbitrary point (xf,yf) by and
angle t anti-clockwise has matrix:
T(-xf,-yf) R(t) T(xf,yf)
![Page 31: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/31.jpg)
April 19, 2023204481 Foundation of Computer Graphics 31
Example of Composite Transformation(2/3)
Reflection about the y-axis Reflection about the x-axis
100
010
001
100
010
001
![Page 32: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/32.jpg)
April 19, 2023204481 Foundation of Computer Graphics 32
Example of Composite Transformation(3/3)
Reflection about the origin Reflection about the line y=x
100
010
001
100
001
010
![Page 33: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/33.jpg)
April 19, 2023204481 Foundation of Computer Graphics 33
3D Transformation
Z
X
YY
X
Z
![Page 34: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/34.jpg)
April 19, 2023204481 Foundation of Computer Graphics 34
Basic 3D Transformations
Translation Scale Rotation Shear
As in 2D, we use homogeneous coordinates (x,y,z,w), so that transformations may be composited together via matrix multiplication.
![Page 35: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/35.jpg)
April 19, 2023204481 Foundation of Computer Graphics 35
3D Translation and Scaling
TP = (x + tx, y + ty, z + tz)
SP = (sxx, syy, szz)
1000
100
010
001
z
y
x
t
t
t
1
z
y
x
1000
000
000
000
z
y
x
s
s
s
1
z
y
x
![Page 36: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/36.jpg)
April 19, 2023204481 Foundation of Computer Graphics 36
3D Rotation (1/4)
Positive Rotations are defined as follows:
Axis of rotation is Direction of positive rotation isx y to zy z to xz x to y
Z
Y
X
![Page 37: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/37.jpg)
April 19, 2023204481 Foundation of Computer Graphics 37
3D Rotation (2/4)
Rotation about x-axis Rx(ß)P
1000
0cossin0
0sincos0
0001
1
z
y
x
y
z
)0,1,0(
)1,0,0(
![Page 38: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/38.jpg)
April 19, 2023204481 Foundation of Computer Graphics 38
3D Rotation (3/4)
Rotation about y-axis Ry(ß)P
1000
0cos0sin
0010
0sin0cos
1
z
y
x
x
z
)0,0,1(
)1,0,0(
![Page 39: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/39.jpg)
April 19, 2023204481 Foundation of Computer Graphics 39
3D Rotation (4/4)
Rotation about z-axis Rz(ß)P
1000
0100
00cossin
00sincos
1
z
y
x
![Page 40: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/40.jpg)
April 19, 2023204481 Foundation of Computer Graphics 40
3D Shear
xy Shear: SHxyP
1000
0100
010
001
y
x
sh
sh
1
z
y
x
x
z
y
x
z
y
![Page 41: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/41.jpg)
April 19, 2023204481 Foundation of Computer Graphics 41
Rotation About An Arbitary Axis (1/3)
1. Translate one end of the axis to the origin
2. Rotate about the y-axis and angle
3. Rotate about the x-axis through an angle
Z
P1
P2
Y
X
b
a
c
u1
u2
u3
ß
U
![Page 42: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/42.jpg)
April 19, 2023204481 Foundation of Computer Graphics 42
Rotation About An Arbitary Axis (2/3)
Z
P1
P2
Y
X
b
a
c
u1
u2
u3
ß
U
Z
Y
X
b
a
c
u1
u2
u3
ß
U Z
Yµ
a
u2
X
4. When U is aligned with the z-axis, apply the original rotation, RR, about the z-axis.
5. Apply the inverses of the transformations in reverse order.
![Page 43: 2D and 3D Transformation](https://reader036.vdocuments.mx/reader036/viewer/2022081419/56812f4c550346895d94de0a/html5/thumbnails/43.jpg)
April 19, 2023204481 Foundation of Computer Graphics 43
Rotation About An Arbitary Axis (3/3)
T-1 Ry(ß) Rx(-µ) R Rx(µ) Ry(-ß) T P