CAP4730: Computational Structures in Computer Graphics

2D Transformations

2D Transformations

• World Coordinates

• Translate

• Rotate

• Scale

• Viewport Transforms

• Putting it all together

Transformations

• Rigid Body Transformations - transformations that do not change the object.

• Translate– If you translate a rectangle, it is still a rectangle

• Scale

– If you scale a rectangle, it is still a rectangle• Rotate

– If you rotate a rectangle, it is still a rectangle

Vertices

• We have always represented vertices as (x,y)

• An alternate method is:

• Example:

=y

xyx ),(

=

8.4

1.2)8.4,1.2(

Matrix * Vector

=

+=+=

=

10

01

'

'

'

'

I

dycxy

byaxx

y

x

dc

ba

y

x

=

++=++=++=

=

100

010

001

'

'

'

'

'

'

I

izhygxz

fzeydxy

czbyaxx

z

y

x

ihg

fed

cba

z

y

x

Matrix * Matrix

=

++++

=

=

=

10

01?

*

,

dc

ba

dwcydzcx

bwaybzaxBA

wz

yxB

dc

baA

Does A*B = B*A?

What does the identity do?

Practice

?*

?*

5.23

15.0,

51

32

?

3

2,

51

32

==

−=

−=

=

−

=

−=

IA

BA

BA

AX

XA

Translation

• Translation - repositioning an object along a straight-line path (the translation distances) from one coordinate location to another.

(x,y)

(x’,y’)

(tx,ty)

Translation

• Given:

• We want:

• Matrix form:TPP

t

t

y

x

y

x

tyy

txx

ttT

yxP

y

x

y

x

yx

+=

+

=

+=+=

==

'

'

'

'

'

),(

),(

1.4'

4.3'

2.8

1.7

1.4

7.3

'

'

2.81.4'

1.77.3'

)2.8,1.7(

)1.4,7.3(

==

+

−−

=

+−=+−=

=−−=

y

x

y

x

y

x

T

P

Translation Examples

• P=(2,4), T=(-1,14), P’=(?,?)

• P=(8.6,-1), T=(0.4,-0.2), P’=(?,?)

• P=(0,0), T=(1,0), P’=(?,?)

Which one is it?

(x,y)

(x’,y’)

(tx,ty)

(x,y)

(tx,ty)

Recall

• A point is a position specified with coordinate values in some reference frame.

• We usually label a point in this reference point as the origin.

• All points in the reference frame are given with respect to the origin.

Applying to Triangles

(tx,ty)

What do we have here?

• You know how to:

Scale

• Scale - Alters the size of an object.

• Scales about a fixed point

(x,y)

(x’,y’)

Scale

• Given:

• We want:

• Matrix form:PSP

y

x

s

s

y

x

ysy

xsx

ssS

yxP

y

x

y

x

yx

⋅=

=

==

==

'

0

0

'

'

'

'

),(

),(

6.6'

2.4'

2.2

4.1

30

03

'

'

2.2*3'

4.1*3'

)3,3(

)2.2,4.1(

==

=

==

==

y

x

y

x

y

x

S

P

Non-Uniform/Differential Scalin’

(x,y)

(x’,y’)

S=(1,2)

Rotation

• Rotation - repositions an object along a circular path.

• Rotation requires an Θ and a pivot point

Rotation

)cos('

)cos('

sin

cos

)(

),(

Θ+=Θ+=

====

φφ

φφ

θ

ry

rx

ry

rx

R

yxP

PRP

y

x

y

x

yxy

yxx

rry

rrx

⋅=

−=

+=−=

+=−=

'

cossin

sincos

'

'

cossin'

sincos'

cossinsincos'

sinsincoscos'

θθθθ

θθθθ

θφθφθφθφ

Example

• P=(4,4)

∀ Θ=45 degrees

What is the difference? RevisitedV(-0.6,0) V(0,-0.6) V(0.6,0.6)

Translate (1.2,0.3)

V(0,0.6) V(0.3,0.9) V(0,1.2)

Translate (1.2,0.3)

V(0.6,0.3) V(1.2,-0.3) V(1.8,0.9)

V(0,0.6) V(0.3,0.9) V(0,1.2)

RotationsV(-0.6,0) V(0,-0.6) V(0.6,0.6)Rotate -30 degrees

V(0,0.6) V(0.3,0.9) V(0,1.2)

Combining Transformations

Q: How do we specify each transformation?

Specifying 2D Transformations

• Translation– T(tx, ty)

– Translation distances

• Scale– S(sx,sy)

– Scale factors

• Rotation– R(θ)– Rotation angle

Combining Transformations

• Using translate, rotation, and scale, how do we get:

Combining Transformations• Note there are two ways to combine

rotation and translation. Why?

Let’s look at the equations

θθθθ

θ

cos'sin'"

sin'cos'"

'

'

'''

'

)(

),(

),(

yxy

yxx

tyy

txx

PRP

TPP

R

ttT

yxP

y

x

yx

+=−=

+=+=

•=+=

( ) ( )( ) ( )

( )( ) y

x

yx

yx

tyxy

tyxx

yxy

yxx

TPP

PRP

tytxy

tytxx

++=+−=

+=−=

+=•=

+++=

+−+=

θθθθ

θθθθ

θθθθ

cossin"

sincos"

cossin'

sincos'

'"

'

cos'sin"

sin'cos"

Combining them

• We must do each step in turn. First we rotate the points, then we translate, etc.

• Since we can represent the transformations by matrices, why don’t we just combine them?

PSP

PRP

TPP

•=•=+=

'

'

'

2x2 -> 3x3 Matrices

• We can combine transformations by expanding from 2x2 to 3x3 matrices.

( )

( )

( )

−=

−=

=

=

=

+

=

100

0cossin

0sincos

cossin

sincos

100

00

00

0

0,

100

10

01

,

θθθθ

θθθθ

θR

s

s

s

sssS

t

t

t

t

y

xttT

y

x

y

x

yx

y

x

y

xyx

Homogenous Coordinates

• We need to do something to the vertices

• By increasing the dimensionality of the problem we can transform the addition component of Translation into multiplication.

=

=

=

→

→

=

=

=

→

=

2

22

147

2

63

2

14

6

7

3.,

1

2

4

2

4. ExEx

h

hh

yy

h

xx

h

y

x

y

xP h

h

h

h

Homogenous Coordinates

• Homogenous Coordinates - term used in mathematics to refer to the effect of this representation on Cartesian equations. Converting a pt(x,y) and f(x,y)=0 -> (xh,yh,h) then in homogenous equations mean (v*xh,v*yh,v*h) can be factored out.

• What you should get: By expressing the transformations with homogenous equations and coordinates, all transformations can be expressed as matrix multiplications.

Final Transformations - Compare Equations

( )

( ) ( )

( )

( ) ( )

( )

( ) ( ) PRPPRP

y

x

y

x

y

x

y

xR

PssSPPssSP

y

x

s

s

y

x

y

x

s

s

y

xssS

PttTPPttTP

y

x

t

t

y

x

y

x

t

t

y

xttT

yxyx

y

x

y

xyx

yxyx

y

x

y

xyx

•=→•=

−=

→

−=

=

•=→•=

=

→

=

=

•=→+=

=

→

+

=

=

θθ

θθθθ

θθθθ

θ1100

0cossin

0sincos

1

'

'

cossin

sincos

'

'

,,

1100

00

00

1

'

'

0

0

'

',

,,

1100

10

01

1

'

'

'

',

Combining Transformations

−=

−=

=

−••=→•=•=

1

'

'

100

10

01

100

0cossin

0sincos

1

"

"

1

'

'

100

0cossin

0sincos

1

"

"

1100

10

01

1

'

'

)60(),2,4641.0(),4,3(

"'",'

y

x

t

t

y

x

y

x

y

x

y

x

t

t

y

x

RTP

PBAPPBPPAP

y

x

y

x

θθθθ

θθθθ

−=

−

=

+−−

=

1100

cossin

sincos

1

"

"

1100

0cossin

0sincos

100

10

01

1

"

"

1100

cossincossin

sincossincos

1

"

"

y

x

t

t

y

x

y

x

t

t

y

x

y

x

tt

tt

y

x

y

x

y

x

yx

yx

θθθθ

θθθθ

θθθθθθθθ

How would we get:

How would we get:

Coordinate Systems

• Object Coordinates

• World Coordinates

• Eye Coordinates

Object Coordinates

World Coordinates

Screen Coordinates

Coordinate Hierarchy

O b j e c t # 1O b j e c t C o o r d i n a t e s

T r a n s f o r m a t i o nO b j e c t # 1 - >

W o r l d

O b j e c t # 2O b j e c t C o o r d i n a t e s

T r a n s f o r m a t i o nO b j e c t # 2 - >

W o r l d

O b j e c t # 3O b j e c t C o o r d i n a t e s

T r a n s f o r m a t i o nO b j e c t # 3 - >

W o r l d

W o r l d C o o r d i n a t e s

T r a n s f o r m a t i o nW o r l d - > S c r e e n

S c r e e n C o o r d i n a t e s

Let’s reexamine assignment 2b

Transformation Hierarchies

• For example:

Transformation Hierarchies

• Let’s examine:

Transformation Hierarchies

• What is a better way?

Transformation Hierarchies

• What is a better way?

Transformation Hierarchies

• We can have transformations be in relation to each other

B l u eO b j e c t C o o r d i n a t e s

T r a n s f o r m a t i o nB l u e - > R e d

R e dO b j e c t C o o r d i n a t e s

T r a n s f o r m a t i o nR e d - > G r e e n

G r e e nO b j e c t ' s C o o r d i n a t e s

T r a n s f o r m a t i o nG r e e n - > W o r ld

W o r l d C o o r d i n a t e s

More Complex Models