Jinxiang Chai CSCE441: Computer Graphics Coordinate & Composite Transformations 0

Jinxiang Chai

CSCE441: Computer GraphicsCoordinate & Composite

Transformations

1

Outline

2D/3D Coordinate transformation

2D/3D Composite transformation

Required readings: HB 7-8, 9-6

2

Image space

Coordinate Transform: 3D Geometry Pipeline

3

Normalized project

space

View spaceWorld spaceObject space

Aspect ratio &

resolution

Focal length

Rotate and translate the

camera

Coordinate Transformation: 3D Modeling/Design

Coordinate transformation from one reference frame to another

4

Coordinate Transformation: Animation/Robotics

How to model 2D movement of animated characters or robots?

5

Click here

Coordinate Transformation

Coordinate transformation from one reference frame to another

6

Coordinate Transformation

Coordinate transformation from one reference frame to another

7

Local reference frame

Coordinate Transformation

Coordinate transformation from one reference frame to another

8

Local reference frame

Global reference frame

Coordinate Transformation

Coordinate transformation from one reference frame to another

?

9

Local reference frame

Global reference frame

Review – Vector Operations

Dot Product

v w

10

Review – Vector Operations

Dot Product: measuring similarity between two vectors

v w

)cos(|||| wvwv

11

Review – Vector Operations

Dot Product: measuring similarity between two vectors

v w

)cos(|||| wvvw

12

Review – Vector Operations

Dot Product: measuring similarity between two vectors

v w

1vvUnit vector:

13

Review – Vector Operations

Dot Product: measuring similarity between two vectors

v w

)cos(|||| wvwv

14

Review – Vector Operations

Dot Product: measuring similarity between two vectors

v w

0wv

15

Review – Vector Operations

Cross Product: measuring the area determined by two vectors

16

v w

Review – Vector Operations

Cross Product: measuring the area determined by two vectors

sin 2*v w v w u area u

17

v w

u

2D Coordinates

2D Cartesian coordinate system:

i

j

o

18

2D Coordinate Transformation

2D Cartesian coordinate system:

i

j

o

1 ii

1 jj

0 ji

19

2D Coordinate Transformation

2D Cartesian coordinate system: any 2D vector can be represented as

i

j

o

1 ii

1 jj

0 ji

20

jyix

2D Coordinate Transformation

2D Cartesian coordinate system:

P: (x,y)

i

j

o x

y

1 ii

1 jj

0 ji

21

jyixop

2D Coordinate Transformation

2D Cartesian coordinate system:

P: (x,y)

i

j

o x

y

22

jyixop

xi

op

op yj

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

23

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

24

Given the coordinates (x’,y’) in i’j’

- how to compute the coordinates (x,y) in ij?

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

25

Given the coordinates (x’,y’) in i’j’

- how to compute the coordinates (x,y) in ij?

0x

0y

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

),( 00 yx

26

Given the coordinates (x’,y’) in i’j’

- how to compute the coordinates (x,y) in ij?

1100

cossin

sincos

10

0

y

x

y

x

y

x

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

jyixop

ji ij

),( 00 yx

27

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

jyixop

jyixpo

ji ij

),( 00 yx

28

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

jyixop

jyixpo

jyixoo

00

ji ij

),( 00 yx

29

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

poooop

ji ij

),( 00 yx

30

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

poooop

jyixop

jyixpo

jyixoo

00

ji ij

),( 00 yx

31

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

poooop

ji ij

jyixjyixjyix

00

),( 00 yx

32

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

poooop

ji ij

jyixjyixjyix

00

jyixjyyixx

)()( 00

),( 00 yx

33

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

poooop

ji ij

jyixjyixjyix

00

jyixjyyixx

)()( 00

y

xji

yy

xxji

0

0),( 00 yx

34

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

y

xji

yy

xxji

0

0

),( 00 yx

35

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

y

xji

yy

xxji

0

0

y

xjiji

yy

xx 1

0

0

),( 00 yx

36

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

y

xji

yy

xxji

0

0

y

xjiji

yy

xx 1

0

0

y

xji

j

i

yy

xxT

T

0

0

),( 00 yx

37

10

01

jjij

jiii

j

iji

T

T

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

y

xji

j

i

yy

xxT

T

0

0

110010

0

y

x

yjjij

xjiii

y

xTT

TT

),( 00 yx

38

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

y

xji

j

i

yy

xxT

T

0

0

),( 00 yx

39

110010

0

y

x

yjjij

xjiii

y

xTT

TT

2D Coordinate Transformation

pj

i

i

j

o

o

ji ij

y

xji

j

i

yy

xxT

T

0

0

110010

0

y

x

yjjij

xjiii

y

xTT

TT

),( 00 yx

40

What does this column vector mean?

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

y

xji

j

i

yy

xxT

T

0

0

110010

0

y

x

yjjij

xjiii

y

xTT

TT

),( 00 yx

41

What does this column vector mean? Vector i’ in the new reference system

ii T

ij T

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

y

xji

j

i

yy

xxT

T

0

0

110010

0

y

x

yjjij

xjiii

y

xTT

TT

),( 00 yx

42

What does this column vector mean?

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

y

xji

j

i

yy

xxT

T

0

0

110010

0

y

x

yjjij

xjiii

y

xTT

TT

),( 00 yx

43

What does this column vector mean? Vector j’ in the new reference system

ji T

jj T

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

y

xji

j

i

yy

xxT

T

0

0

110010

0

y

x

yjjij

xjiii

y

xTT

TT

),( 00 yx

44

What does this column vector mean?

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

y

xji

j

i

yy

xxT

T

0

0

110010

0

y

x

yjjij

xjiii

y

xTT

TT

),( 00 yx

45

What does this column vector mean? The old origin in the new reference system

2D Coordinate Transformation

2D translation

pj

i

i

j

o

o

110010

0

y

x

yjjij

xjiii

y

xTT

TT

),( 00 yx

46

2D Coordinate Transformation

2D translation

pj

i

i

j

o

o

110010

0

y

x

yjjij

xjiii

y

xTT

TT

),( 00 yx

?

? ?

?

47

2D Coordinate Transformation

2D translation

pj

i

i

j

o

o

110010

0

y

x

yjjij

xjiii

y

xTT

TT

1

0

0

1

),( 00 yx

48

2D Coordinate Transformation

2D translation&rotation

pj

i

i

j

o

o

110010

0

y

x

yjjij

xjiii

y

xTT

TT

),( 00 yx

?

49

2D Coordinate Transformation

2D translation&rotation

pj

i

i

j

o

o

1100

cos

10

0

y

x

yjjij

xji

y

xTT

T

),( 00 yx

?

50

2D Coordinate Transformation

2D translation&rotation

pj

i

i

j

o

o

1100

sin

cos

10

0

y

x

yjj

xji

y

xT

T

),( 00 yx

51

2D Coordinate Transformation

2D translation&rotation

pj

i

i

j

o

o

1100

sin

cos

10

0

y

x

yjj

xji

y

xT

T

),( 00 yx

?

52

2D Coordinate Transformation

2D translation&rotation

pj

i

i

j

o

o

1100

sin

sincos

10

0

y

x

yjj

x

y

xT

),( 00 yx

53

2D Coordinate Transformation

2D translation&rotation

pj

i

i

j

o

o

1100

sin

sincos

10

0

y

x

yjj

x

y

xT

),( 00 yx

?

54

2D Coordinate Transformation

2D translation&rotation

pj

i

i

j

o

o

1100

cossin

sincos

10

0

y

x

y

x

y

x

),( 00 yx

55

2D Coordinate Transformation

An alternative way to look at the problem

i

j

o

P=[x,y]j

i

o ),( 00 yx

56

- set up a transformation that superimposes the x’y’ axes onto the xy axis

1

y

x

2D Coordinate Transformation

An alternative way to look at the problem

i

j

o

P=[x,y]j

i

o ),( 00 yx

57

- set up a transformation that superimposes the x’y’ axes onto the xy axis

1100

10

01

0

0

y

x

y

x

2D Coordinate Transformation

An alternative way to look at the problem

i

j

o

P=[x,y]

j

io ),( 00 yx

58

- set up a transformation that superimposes the x’y’ axes onto the xy axis

1100

10

01

100

0cossin

0sincos

0

0

y

x

y

x

2D Coordinate Transformation

An alternative way to look at the problem This transforms the point from (x,y) to (x’,y’)

i

j

o

p

j

io ),( 00 yx

59

1100

10

01

100

0cossin

0sincos

10

0

y

x

y

x

y

x

2D Coordinate Transformation

An alternative way to look at the problem This transforms the point from (x,y) to (x’,y’) How to transform the point from (x’,y’) to

(x,y)?

i

j

o

p

j

io ),( 00 yx

60

1100

10

01

100

0cossin

0sincos

10

0

y

x

y

x

y

x

2D Coordinate Transformation

An alternative way to look at the problem This transforms the point from (x,y) to (x’,y’) How to transform the point from (x’,y’) to

(x,y)? Invert the matrix!

i

j

o

p

j

io ),( 00 yx

61

1100

0cossin

0sincos

100

10

01

1

11

0

0

y

x

y

x

y

x

2D Coordinate Transformation

An alternative way to look at the problem This transforms the point from (x,y) to (x’,y’) How to transform the point from (x’,y’) to

(x,y)? Invert the matrix!

i

j

o

p

j

io ),( 00 yx

62

1100

0cossin

0sincos

100

10

01

1

11

0

0

y

x

y

x

y

x

2D Coordinate Transformation

An alternative way to look at the problem This transforms the point from (x,y) to (x’,y’) How to transform the point from (x’,y’) to

(x,y)? Invert the matrix!

i

j

o

p

j

io ),( 00 yx

63

1100

0cossin

0sincos

100

10

01

1

11

0

0

y

x

y

x

y

x

100

10

01

0

0

y

x

2D Coordinate Transformation

An alternative way to look at the problem This transforms the point from (x,y) to (x’,y’) How to transform the point from (x’,y’) to

(x,y)? Invert the matrix!

i

j

o

p

j

io ),( 00 yx

64

1100

0cossin

0sincos

100

10

01

1

11

0

0

y

x

y

x

y

x

100

10

01

0

0

y

x

2D Coordinate Transformation

An alternative way to look at the problem This transforms the point from (x,y) to (x’,y’) How to transform the point from (x’,y’) to

(x,y)? Invert the matrix!

i

j

o

p

j

io ),( 00 yx

65

1100

0cossin

0sincos

100

10

01

1

11

0

0

y

x

y

x

y

x

100

10

01

0

0

y

x

100

0cossin

0sincos

2D Coordinate Transformation

Same results!

pj

i

i

j

o

o

1100

cossin

sincos

10

0

y

x

y

x

y

x

),( 00 yx

66

2D Coordinate Transformation

2D translation&rotation

pj

i

i

j

o o

1???

???

???

1

y

x

y

x

30

67

2D Coordinate Transformation

2D translation&rotation

pj

i

i

j

o o

1100

030cos30sin

030sin30cos

1

y

x

y

x

30

68

2D Coordinate Transformation

2D translation&rotation

p

j

i

i

j

oo

1???

???

???

1

y

x

y

x

45

69

2D Coordinate Transformation

2D translation&rotation

p

j

i

i

j

oo

1100

045cos45sin

045sin45cos

1

y

x

y

x

45

70

2D Coordinate Transformation

2D translation&rotation

p

j

i

i

j

o

)2,4( o

1???

???

???

1

y

x

y

x

45

71

2D Coordinate Transformation

2D translation&rotation

p

j

i

i

j

o

)2,4( o

1100

245cos45sin

445sin45cos

1

y

x

y

x

45

72

3D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

),,( 000 zyx

k

'k

73

2D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

110010

0

y

x

yjjij

xjiii

y

xTT

TT

),( 00 yx

poooop

74

3D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

1

'

'

'

1000

'

'

'

10

0

0

z

y

x

zkkjkik

ykjjjij

xkijiii

z

y

x

TTT

TTT

TTT

),,( 000 zyx

k

'k

poooop

75

3D Coordinate Transformation

Transform object description from to

pj

i

i

j

o

o

ji ij

1

'

'

'

1000

'

'

'

10

0

0

z

y

x

zkkjkik

ykjjjij

xkijiii

z

y

x

TTT

TTT

TTT

),,( 000 zyx

k

'k

poooop

76

3D Coordinate Transformation

Transform object description from to

i

i

j

o

ji ij

1

'

'

'

1000

'

'

'

10

0

0

z

y

x

zkkjkik

ykjjjij

xkijiii

z

y

x

TTT

TTT

TTT

k

77

p'i

'j

3D Coordinate Transformation

Transform object description from toji ij

78

'i

11000

0cos0sin

0010

0sin0cos

1

z

y

x

z

y

x

x

y

z

Composite 2D Transformation

How to model 2D movement of characters or robots?

79

Click here

Composite 2D Transformation

A 2D lamp character

1

2

3

),,( 0yx

3c

2c

1c

0c

A

80

0

Composite 2D Transformation

A 2D lamp character – skeleton size3l

A2l

1l

0l

81

Composite 2D Transformation

How can we draw the character given the pose ?

1

2

3

),,( 0yx

3c

2c

1c

0c

A

82

),,,,,( 3210 yx

Composite 2D Transformation

How can we draw the character given the pose ?

1

2

3

),,( 0yx

3c

2c

1c

0c

A

83

),,,,,( 3210 yx

- This requires computing the global coordinates for any point on the character.

- But we only have local coordinates of points.

- So how can we map the local coordinates to the global coordinates?

),,( 0yx

3c2c

0c

A1c

Articulated Character

Local reference frames with a default pose (0,0,0,0,0,0)

Composite 2D Transformation

What’s the pose?

)1,5(

85

?)?,?,?,,1,5(

300

Composite 2D Transformation

What’s the pose?

)1,5(

86

)90,0,90,30,1,5(

300

Composite 2D Transformation

A 2D lamp character

1

2

3

3c

2c

1c

A

Given , , how to compute the global position of a point (e.g., A) based on its local coordinates?

),,,,,( 3210 yx

?

),,( 0yx0c

87

Composite 2D Transformation

What’s local coordinate ?

1

2

3

3c

2c

1c

A

?

A

),,( 0yx0c

88

Composite 2D Transformation

What’s local coordinate ?

1

2

3

3c

2c

1c

A

?

A

1

03

0

l

p

),,( 0yx0c

03221100 )()0,()()0,()()0,()(),( pRlTRlTRlTRyxTp 89

Composite 2D Transformation

What’s the current coordinate A ?

1

2

3

3c

2c

1c

A

?

),,( 0yx0c

1

00

l

p

03221100 )()0,()()0,()()0,()(),( pRlTRlTRlTRyxTp

100

010

01

)0,(2

2

l

lT

90

100

0cossin

0sincos

)( 33

33

3

R

Composite 2D Transformation

What’s the current coordinate A ?

1

2

3

3c

2c

1c

A

?

),,( 0yx0c

1

00

l

p

03221100 )()0,()()0,()()0,()(),( pRlTRlTRlTRyxTp

100

010

01

)0,(2

2

l

lT

91

100

0cossin

0sincos

)( 33

33

3

R

Composite 2D Transformation

What’s the current coordinate A ?

1

2

3

3c

2c

1c

A

?

),,( 0yx0c

1

00

l

p

03221100 )()0,()()0,()()0,()(),( pRlTRlTRlTRyxTp

100

010

01

)0,(1

1

l

lT

92

100

0cossin

0sincos

)( 22

22

2

R

Composite 2D Transformation

What’s the current coordinate A ?

1

2

3

3c

2c

1c

A

?

),,( 0yx0c

1

00

l

p

03221100 )()0,()()0,()(),0()(),( pRlTRlTRlTRyxTp

100

10

001

),0( 00 llT

93

100

0cossin

0sincos

)( 11

11

1

R

Composite 2D Transformation

What’s the current coordinate A ?

1

2

3

3c

2c

1c

A

?

03221100 )()0,()()0,()(),0()(),( pRlTRlTRlTRyxTp

),,( 0yx0c

1

00

l

p

100

cossin

sincos

)(),( 00

00

0 y

x

RyxT

94

Composite 2D Transformation

What’s the current coordinate A ?

1

2

3

3c

2c

1c

A

03221100 )()0,()()0,()(),0()(),( pRlTRlTRlTRyxTp

),,( 0yx0c

95

How to Animate the Character?

A 2D lamp character

1

2

3

),,( 0yx

3c

2c

1c

0c

A

96

How to Animate the Character?

Keyframe animation

- Manually pose the character by choosing appropriate values for

- Linearly interpolate the inbetween poses.

- Works for any types of articulated characters!

97

),,,,,( 3210 yx

Composite 3D Transformation

Similarly, we can easily extend composite transformation from 2D to 3D

1

2

3

),,( 0yx

3c

2c

1c

0c

A

98

Composite 3D Transformation

xRRhTRhTRRRhTRRRzyxTp )()()0,,0()()0,,0()()()()0,,0()()()(),,( 332211110000000

99