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

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.





rotate(angle)Rotates the canvas clockwise around the current origin by the angle number of radians.



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.





Order mattersConsider:translate (5,0);scale(2,2);



Order mattersConsider:scale(2,2);translate (5,0);



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


Rocket

How to form a rocket?Model with triangles




Rocket

How to form (model) a rocket?

How to move a rocket?


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




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


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



Example:

Scale in x by S2x(v )

What is the graphical view?


), 00( yx ), 002( yx

), 11( yx ), 112( yx

y

x

Scale in x by 2: S2x(v )




x

y

), 002( yx

), 112( yx

yyxx 1010 ,22

yyxx 1010 ,22


), 00( yx

), 11( yx

yyxx 1010 ),(2

yyxx 1010 ),(2

x

y yyxx 1010 ),(




yyxx 1010 ),(2

yyxx 1010 ),(

yyxx 1010 ),(2

x

y


Summary on Scale

• “Scale then add,” is same as

• “Add then scale”

Same results




Matrix Representation

2 0 2

0 1

x x

y y


Matrix Representation of S2y(v )

1 0

0 2 2

x x

y y

Scale in y by 2: S2y(v )




Matrix Representation S2(v)

2 0 22

0 2 2

x x x

y y y

Overall Scale by 2: S2(v)


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



What about Rotation?

Is it linear?


Rotate by

x

y

)0,1(

)1,0(




Rotate by : 1st Quadrant

x

y

)0,1(

cos ,sin

cos

sin


Rotate by : 1st Quadrant

)sin,(cos)0,1(




Rotate by : 2nd Quadrant

x

y

)1,0(

)0,1(



x

y

cos

sin

)1,0(





x

y

cos

sin

)1,0(



)cos,sin()1,0(




Summary of Rotation by

(1,0) (cos ,sin )

)cos,sin()1,0(


Summary (Column Form)

cos

sin

1

0

sin

cos

0

1




Using Matrix Notation

sin

cos

0

1

cossin

sin-cos

cos

sin-

1

0

cossin

sin-cos

(Note that unit vectors simply copy columns)


General Rotation by Matrix

cos -sin cos -ysin

sin cos sin cos

x x

y x y



What do the off diagonal elements do?


Off Diagonal Elements

1 0

1

x x

y xb b y

1

0 1

x x y

y y

a a



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(



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(



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)



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



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



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



49


1

, for 0x

y

x x

y y

50


Homogeneous term affects overall scaling

0,For

1 1

1 0 0

0 1 0

0 10 1

x x xx

y y yy



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)



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



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



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



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



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



Reflection = Scale (-1)

64

x

),( ba

y

Ex: Advance clock hands

cos -sin cos -ysin

sin cos sin cos

x x

y x y



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


Rotate hr hand by ?Rotate min hand by -180

cos -sin cos -ysin

sin cos sin cos

x x

y x y



67

x

),( ba

y


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



cos -sin cos -ysin

sin cos sin cos

x x

y x y



69

x

),( ba

y



cos -sin cos -ysin

sin cos sin cos

x x

y x y

70

x

),( ba

y



cos -sin cos -ysin

sin cos sin cos

x x

y x y




x

),( ba

y




),( ba

x

y




),( ba

x

y


74

y

),( ba

x




75

y

),( ba

x


76

y

),( ba

x




77


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



79


15

),(12),(

),()(),(

)(

twhere

baTtRbaTT

baTtRbaTT

b

s

80


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



81

Rocket Revisited

82

Map: [a,b] [0,1]

0[ ]x

a b 1

x



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



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]



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




Map: [a,b] [c,d]

• First map [a,b] to [0,1]–(We already did this)

• Then map [0,1] to [c,d]


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




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



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

• !



Example

Example



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



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



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



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



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



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



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



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 )



The End

Transformations I

Documents

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