Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos...
Transcript of Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos...
![Page 1: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/1.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 1
Transformations I
CS4600 Computer Graphics
From: Rich RiesenfeldFall 2015
Javascript and Canvas
Utah School of Computing
translate (x,y)Moves the canvas and its origin on the grid. x indicates the horizontal distance to move, and y indicates how far to move the grid vertically.
![Page 2: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/2.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 2
Javascript and Canvas
Utah School of Computing
rotate(angle)Rotates the canvas clockwise around the current origin by the angle number of radians.
Javascript and Canvas
Utah School of Computing
scale(x, y)Scales the canvas units by x horizontally and by y vertically. Both parameters are real numbers. Values that are smaller than 1.0 reduce the unit size and values above 1.0 increase the unit size. Values of 1.0 leave the units the same size.
![Page 3: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/3.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 3
Javascript and Canvas
Utah School of Computing
Order mattersConsider:translate (5,0);scale(2,2);
Javascript and Canvas
Utah School of Computing
Order mattersConsider:scale(2,2);translate (5,0);
![Page 4: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/4.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 4
Utah School of Computing 7
Transformations and Matrices
• Transformations are functions
• Matrices are function representations
• Matrices represent linear transf’s
•
• We will use matrices for transf’s
2 2 Matrices 2 Linear Transf'sx D
Utah School of Computing 8
Rocket
How to form a rocket?Model with triangles
![Page 5: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/5.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 5
Utah School of Computing 9
Rocket
How to form (model) a rocket?
How to move a rocket?
Utah School of Computing 10
What is a 2D Linear Transf ?
Recall from Linear Algebra:
: ( ) ( ) ( ) ,
for scalar and vectors and .
Def T ax y aT x T y
a x y
![Page 6: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/6.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 6
Utah School of Computing 11
Look at a Diagram( )T
( ) ( )
( ) ( )
aT x bT y
T ax T b y
, ax b y
( ), ( )T x T y
, x y
( )T
a b a b
Utah School of Computing 12
Scale in x by 2: S2x(v )
0 1 0 1 0 1 0 1
0 0 1 1
Scale in , by 2, say:
2 , 2 2 ,
2 , 2 ,
x
x x y y x x y y
x y x y
![Page 7: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/7.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 7
Example:
Scale in x by S2x(v )
What is the graphical view?
Utah School of Computing 14
), 00( yx ), 002( yx
), 11( yx ), 112( yx
y
x
Scale in x by 2: S2x(v )
![Page 8: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/8.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 8
Utah School of Computing 15
x
y
), 002( yx
), 112( yx
yyxx 1010 ,22
yyxx 1010 ,22
Utah School of Computing 16
), 00( yx
), 11( yx
yyxx 1010 ),(2
yyxx 1010 ),(2
x
y yyxx 1010 ),(
![Page 9: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/9.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 9
Utah School of Computing 17
yyxx 1010 ),(2
yyxx 1010 ),(
yyxx 1010 ),(2
x
y
Utah School of Computing 18
Summary on Scale
• “Scale then add,” is same as
• “Add then scale”
Same results
![Page 10: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/10.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 10
Utah School of Computing 19
Matrix Representation
2 0 2
0 1
x x
y y
Utah School of Computing 20
Matrix Representation of S2y(v )
1 0
0 2 2
x x
y y
Scale in y by 2: S2y(v )
![Page 11: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/11.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 11
Utah School of Computing 21
Matrix Representation S2(v)
2 0 22
0 2 2
x x x
y y y
Overall Scale by 2: S2(v)
Utah School of Computing 22
Matrix Form of Same
Add and , then scale
Scale and , then add
0 1 0 1
0 1 0 1
0 1
0 1
2 0 2
0 1
2 2x y
x y
x x x x
y y y y
x x
y y
![Page 12: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/12.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 12
What about Rotation?
Is it linear?
Utah School of Computing 24
Rotate by
x
y
)0,1(
)1,0(
![Page 13: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/13.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 13
Utah School of Computing 25
Rotate by : 1st Quadrant
x
y
)0,1(
cos ,sin
cos
sin
Utah School of Computing 26
Rotate by : 1st Quadrant
)sin,(cos)0,1(
![Page 14: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/14.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 14
Utah School of Computing 27
Rotate by : 2nd Quadrant
x
y
)1,0(
)0,1(
Utah School of Computing 28
Rotate by : 2nd Quadrant
x
y
cos
sin
)1,0(
![Page 15: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/15.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 15
Utah School of Computing 29
Rotate by : 2nd Quadrant
x
y
cos
sin
)1,0(
Utah School of Computing 30
Rotate by : 2nd Quadrant
)cos,sin()1,0(
![Page 16: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/16.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 16
Utah School of Computing 31
Summary of Rotation by
(1,0) (cos ,sin )
)cos,sin()1,0(
Utah School of Computing 32
Summary (Column Form)
cos
sin
1
0
sin
cos
0
1
![Page 17: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/17.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 17
Utah School of Computing 33
Using Matrix Notation
sin
cos
0
1
cossin
sin-cos
cos
sin-
1
0
cossin
sin-cos
(Note that unit vectors simply copy columns)
Utah School of Computing 34
General Rotation by Matrix
cos -sin cos -ysin
sin cos sin cos
x x
y x y
![Page 18: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/18.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 18
What do the off diagonal elements do?
Utah School of Computing 36
Off Diagonal Elements
1 0
1
x x
y xb b y
1
0 1
x x y
y y
a a
![Page 19: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/19.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 19
37
Example 1
y
yx
x
y
xyxT
4.0
14.0
01),(
)1,0(
)0,1(
)1,1(
)0,0(
S
x
38
Example 1
x
y
yx
x
yxT
4.0
),(
S
)1,0(
)0,1(
)1,1(
)0,0(
![Page 20: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/20.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 20
39
Example 1
y
)1,0(
)4.0,1(
)0,0(
T(S)
yx
x
yxT
4.0
),()4.1,1(
x
40
Example 2
0.6
0.6
1( , )
0 1
xT x y
y
x y
y
y
Sx
)1,0(
)0,1(
)1,1(
)0,0(
![Page 21: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/21.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 21
41
Example 2
0.6( , )
x yT x y
y
x
y
S
)1,0(
)0,1(
)1,1(
)0,0(
42
Example 2
( , ) 0.6x y
T x yy
x
y
)1,0(
)0,1()0,0(
T(S)
(0.6,1) (1.6,1)
![Page 22: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/22.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 22
43
SummaryShear in x:
Shear in y:
y
ayx
y
xaShx 10
1
ybx
x
y
x
bShy 1
01
44
Double Shear: not commutative!
ab)(10
1
1
01
1
1
b
aa
b
1
1 ab)(
1
01
10
1
b
a
b
a
![Page 23: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/23.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 23
45
“Lazy 1”
1 1
1 0 0
0 1 0
0 0 1
x x
y y
46
Translation in x
1 0
0 1 0
1 10 0 1
x xx x
y
d
y
d
![Page 24: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/24.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 24
47
Translation in y
1
1 1
0 0
0 1
0 0 1y y
x x
y yd d
48
Homogeneous Coordinates
1 1
1 0 0
0 1 0
0 0 1
x x
y y
![Page 25: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/25.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 25
49
Homogeneous Coordinates
1
, for 0x
y
x x
y y
50
Homogeneous Coordinates
Homogeneous term affects overall scaling
0,For
1 1
1 0 0
0 1 0
0 10 1
x x xx
y y yy
![Page 26: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/26.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 26
51
Homogeneous CoordinatesAn infinite number of points correspond to (x,y,1).
They constitute the whole line (wx,wy,w).
x
w
y
w = 1
(wx,wy,w)
(x,y,1) = (wx/w, wy/w, w/w)
52
What does a shear do?
x
w
y
w = 1
Translation in w=1
1( , , )x y
1( , , )x y
(wx,wy,w) (wx,wy’,w)
![Page 27: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/27.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 27
53
Using Homogeneous Coord’s
• Shear in 3D
• Effects translation in 2D
• We have used a lineartransformation (shear) in 3D to effect a nonlinear transformation(translation) in 2D
54
Translation by : ( ) d T x x d
( ) ( )
( ) ( ) ( ) ( )
2
( )
( ) ( ) ( )
T u v u v d
T u T v u d v d
u v d
T u v d
T u v T u T v
![Page 28: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/28.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 28
55
Lots Going On Here!
We’ve got AffineTransformations:
Linear Map + Translation
56
Compound Transformations
• Build up compound transformations
by concatenating elementary ones
• Use for complicated motion
• Use for complicated modeling
![Page 29: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/29.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 29
57
Elementary Transformations
• Scale: Sx(v ), Sy
(v )
• Rotate: Rx(v ), Ry
(v )
• Translate: Tdx(v ), Tdy
(v )
• Shear: Shx(v ), Shy
(v )
• Reflect: Rfx(v ), Rfy(v )
58
Refection about y-axis
0
1
0
1
10
01
x x
![Page 30: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/30.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 30
59
Reflection about y-axis
x
y
),( yx),( yx
)0,1()0,1(
60
Reflection about x-axis
1 0 0 0
0 -1 1 1
y y
![Page 31: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/31.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 31
61
Reflection about x-axis
x
y
)1,0( ),( yx
),( yx )1,0(
62
Is Reflection “Elementary”?
• Can we effect reflection in an elementary way?
• (More elementary means scale, shear, rotation, translation.)
62
![Page 32: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/32.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 32
Reflection = Scale (-1)
64
x
),( ba
y
Ex: Advance clock hands
cos -sin cos -ysin
sin cos sin cos
x x
y x y
![Page 33: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/33.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 33
65
x
),( ba
y
Ex: Advance clock hands: 30mins
What to do?
cos -sin cos -ysin
sin cos sin cos
x x
y x y
66
x
),( ba
y
Ex: Advance clock hands: 30mins
Rotate hr hand by ?Rotate min hand by -180
cos -sin cos -ysin
sin cos sin cos
x x
y x y
![Page 34: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/34.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 34
67
x
),( ba
y
Ex: Advance clock hands: 30mins
Rotate hr hand by -15Rotate min hand by -180
cos -sin cos -ysin
sin cos sin cos
x x
y x y
68
x
),( ba
y
Ex: Advance clock hands: 30mins
Rotate hr hand by -15Rotate min hand by -180
cos -sin cos -ysin
sin cos sin cos
x x
y x y
![Page 35: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/35.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 35
69
x
),( ba
y
Ex: Advance clock hands: 30mins
Rotate hr hand by -15Rotate min hand by -180
cos -sin cos -ysin
sin cos sin cos
x x
y x y
70
x
),( ba
y
Ex: Advance clock hands: 30mins
Rotate hr hand by -15Rotate min hand by -180
cos -sin cos -ysin
sin cos sin cos
x x
y x y
![Page 36: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/36.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 36
Utah School of Computing 71
x
),( ba
y
Ex: Advance clock hands: 30mins
Utah School of Computing 72
Ex: Advance clock hands
),( ba
x
y
![Page 37: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/37.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 37
Utah School of Computing 73
),( ba
x
y
Ex: Advance clock hands
74
y
),( ba
x
Ex: Advance clock hands
![Page 38: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/38.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 38
75
y
),( ba
x
Ex: Advance clock hands
76
y
),( ba
x
Ex: Advance clock hands
![Page 39: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/39.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 39
77
Homogeneous Coordinates
1 1
1 0 0
0 1 0
0 0 1
x x
y y
78
Clock Transformations
• Translate to Origin
• Move hand with rotation
• Translate hand back to clock
• Do other hand
![Page 40: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/40.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 40
79
Clock Transformations
15
),(12),(
),()(),(
)(
twhere
baTtRbaTT
baTtRbaTT
b
s
80
Clock Transformations
Translate Back Rotate About Origin Translate to Origin
1 0 1 0
0 1 0 1
1 1 1 1
1
cos( ) sin( ) 0
sin( ) cos( ) 0
0 0 0 0 0 0
xa t t a
b t t b y
x
y
![Page 41: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/41.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 41
81
Rocket Revisited
82
Map: [a,b] [0,1]
0[ ]x
a b 1
x
![Page 42: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/42.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 42
83
Map: [a,b] [0,1]
• Translate to Origin
• Map x to translated interval
axx
ababaaba ,0,,
84
Map: [a,b] [0,1]
)( aT x
abS x1
1100
010
01
y
xa
1
yab
ax
100
010
001
ab
![Page 43: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/43.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 43
85
Map: [a,b] [0,1]
• Normalize the interval
• Map x to normalized interval
abaxx
1,0,1
,0
abaaab
ab
86
10
01
ab
This is a homogeneous form for 1D
)( aT x
abS x1
10
1 a
1
x
1
ab
ax
Map: [a,b] [0,1]
![Page 44: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/44.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 44
87
Map: [a,b] [-1,1]
0[ ]
-1 +1x
a b
2
ba
x
88
Map: [a,b] [-1,1]
• Translate center of interval to origin
• Normalize interval to [-1,1]
2
baxx
2
2 2
a b a bx x
b a
![Page 45: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/45.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 45
Utah School of Computing 89
Map: [a,b] [c,d]
• First map [a,b] to [0,1]–(We already did this)
• Then map [0,1] to [c,d]
Utah School of Computing 90
Map: [0,1] [c,d ]
• Scale [0,1] by [c,d ]
• Then translate by c
• That is, in 1D homogeneous form:
1)(
110
0
10
1 cxcdxcdc
![Page 46: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/46.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 46
Utah School of Computing 91
All Together: Map: [a,b] [c,d ]
110
1
10
01
10
0
10
1 xaab
cdc
110
1
10
010
1 xaab
cdc
92
Now Map Rectangles
),(minmin yx
),(maxmax vu
),(minmin vu
),(maxmax yx
![Page 47: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/47.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 47
93
Transformation in x and y
yyvv
xxuu
yx
vu
yx
y
x
y
x
minmax
minmax
minmax
minmax
min
min
min
min
,where
1100
10
01
100
00
00
100
10
01
,
94
This is Viewport Transformation
• Good for mapping objects from one
coordinate system to another
• This is what we do with windows and
viewports
• !
![Page 48: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/48.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 48
Example
Example
![Page 49: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/49.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 49
97
3D Transformations
• Scale
• Rotate
• Translate
• Shear
)(),(),( dT zdT ydT x
)(),(),( dSh zdSh ydSh x
)(),(),( S zS yS x
)(),(),( R zR yR x
98
3D Scale in x
1000
0100
0010
000
)(
S x
![Page 50: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/50.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 50
99
3D Scale in x
111000
0100
0010
000
z
y
x
z
y
x
S x
100
3D Scale in y
111000
0100
000
0001
)(z
y
x
z
y
x
S y
![Page 51: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/51.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 51
101
3D Scale in z
111000
000
0010
0001
)(z
y
x
z
y
x
S z
102
Overall 3D Scale
111000
000
000
000
)(z
y
x
z
y
x
S
![Page 52: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/52.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 52
103
Overall 3D Scale
Same in x,y and z:
z
y
x
z
y
x
z
y
x
11
104
Positive Rotation in 3D?
• Sit at end of given axis
• Look at Origin
• CC Rotation is in Positive direction
![Page 53: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/53.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 53
105
3D Positive Rotations
x
z
y
106
3D Rotation about z-axis by
We have already done this:
11000
0100
00cossin
00sincos
)(z
y
x
Rz
![Page 54: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/54.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 54
107
y
z
)0,1,0(
)1,0,0(
3D Rotation about x-axis by
108
3D Rotation about x-axis by
11000
0cossin0
0sincos0
0001
)(z
y
x
Rx
![Page 55: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/55.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 55
109
x
z
)0,0,1(
)1,0,0(
109
3D Rotation about y-axis by
110
11000
0cos0sin
0010
0sin0cos
)(z
y
x
R y
3D Rotation about y-axis by
![Page 56: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/56.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 56
Example
• Cubev.js
Fall 2014 Utah School of Computing 111
112
Elementary Transformations• Scale: Sx
(v ), Sy(v )
• Rotate: Rx(v ), Ry
(v )
• Translate: Tdx(v ), Tdy
(v )
• Shear: Shx(v ), Shy
(v )
• Reflect: Rfx(v ), Rfy(v )
![Page 57: Wk4 Basic Transf.pptcs4600/lectures/Wk4_Basic_Transf.pdf · Utah School of Computing 17 ... cos ,sin cos sin ... Computer Graphics CS4600 16 Utah School of Computing 31 Summary ofRotation](https://reader036.fdocuments.in/reader036/viewer/2022062507/5fd52b60f6a9125d6a6b41f3/html5/thumbnails/57.jpg)
Utah School of Computing Fall 2015
Computer Graphics CS4600 57
The End
Transformations I