notes

1. CAP4730: Computational
Structures in Computer Graphics
2D Transformations

2. 2D Transformations
• World Coordinates
• Translate
• Rotate
• Scale
• Viewport Transforms
• Putting it all together

3. 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

4. Vertices
• We have always represented vertices as
(x,y)
• An alternate method is:
• Example:
ù
úû
é
=
y
êë
x
(x, y)
ù
úû
é
=
4.8
êë
2.1
(2.1,4.8)

5. Matrix * Vector
a b
x
x ax by
y cx dy
ù
úû
é
= úû
'
= +
= +
1 0
é
=
êë
ù
úû
é
êë
ù
úû
êë
ù
é
êë
0 1
'
'
'
I
x
y
c d
y
a b c
d e f
x
y
x ax by cz
y dx ey fz
z gx hy iz
ù
ú ú ú
û
é
=
ù
'
'
= + +
= + +
= + +
'
'
é
=
ê ê ê
ë
ù
ú ú ú
û
é
ê ê ê
ë
ù
ú ú ú
û
ê ê ê
ë
ú ú ú
û
é
ê ê ê
ë
1 0 0
0 1 0
0 0 1
'
'
I
x
y
z
g h i
z

6. Matrix * Matrix
é
= úû
x y
a b
ax + bz ay +
bw
cx dz cy dw
ù
úû
1 0
é
êë
ù
úû
é
=
A B
é
=
êë
ù
úû
é
êë
+ +
=
úû ù
êë
ù
êë
0 1
?
*
,
a b
c d
z w
B
c d
A
Does A*B = B*A?
What does the identity do?

7. Practice
é -
=
2 3
A X
?
é
-
ù
é-
= úû
=
AX
é -
=
2 3
A B
=
A B
* ?
* ?
2
ù
0.5 1
ù
3 2.5
,
1 5
3
,
1 5
=
úû
êë
ù
êë
úû
êë
= úû
êë
A I

8. 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)

9. Translation
• Given:
• We want:
• Matrix form:
P =
x y
( , )
T t t
x y
=
x x t
x
= +
'
y y t
x
x
é
+ úû
é
= úû
é
'
P P T
t
t
y
y
x
y
y
= +
ù
úû
êë
ù
êë
ù
êë
= +
'
'
'
( , )
= - -
( 3.7, 4.1)
=
= - +
P
' 3.7 7.1
' 4.1 8.2
'
-
= úû
T
x
y
x
y
=
é
-
' 3.4
' 4.1
7.1
é
+ úû
8.2
3.7
4.1
'
(7.1,8.2)
=
ù
úû
êë
ù
êë
ù
é
êë
= - +
x
y

10. 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’=(?,?)

11. Which one is it?
(x,y)
(x’,y’)
(tx,ty)
(tx,ty)
(x,y)

12. 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.

13. Applying to Triangles
(tx,ty)

14. What do we have here?
• You know how to:

15. Scale
• Scale - Alters the size of an object.
• Scales about a fixed point
(x,y)
(x’,y’)

16. Scale
• Given:
• We want:
• Matrix form:
P =
x y
( , )
S =
s s
x s x
x
=
'
y s y
x
é
= úû
é
'
P S P
x
y
s
s
y
y
x
y
x y
= ×
ù
úû
é
êë
ù
úû
êë
ù
êë
=
'
0
0
'
'
( , )
(1.4,2.2)
=
=
=
P
S
' 3*1.4
' 3*2.2
'
é
= úû
x
y
x
y
=
' 4.2
' 6.6
1.4
2.2
3 0
0 3
'
(3,3)
=
ù
úû
é
êë
ù
úû
êë
ù
é
êë
=
x
y

17. Non-Uniform/Differential Scalin’
(x,y)
(x’,y’)
S=(1,2)

18. Rotation
• Rotation - repositions an object along a
circular path.
• Rotation requires an Q and a pivot point

19. Rotation
P x y
( , )
q
( )
f
cos
sin
=
=
R
x =
r
y =
r
f
x r
= f
+Q
' cos( )
y r
= f
+Q
' cos( )
x = r -
r
f q f q
' cos cos sin sin
y = r +
r
f q f q
' cos sin sin cos
x = x -
y
q q
' cos sin
y x y
q q
' sin cos
x
é -
= úû
é
q q
cos sin
'
P R P
x
y
y
= ×
ù
úû
é
êë
ù
úû
êë
ù
êë
= +
'
sin cos
'
q q

20. Example
• P=(4,4)
"Q=45 degrees

21. What is the difference? Revisited
V(-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)

22. Rotations
V(-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)

23. Combining Transformations
Q: How do we
specify each
transformation?

24. Specifying 2D Transformations
• Translation
– T(tx, ty)
– Translation distances
• Scale
– S(sx,sy)
– Scale factors
• Rotation
– R(q)
– Rotation angle

25. Combining Transformations
• Using translate, rotation, and scale, how do
we get:

26. Combining Transformations
• Note there are two ways to combine
rotation and translation. Why?

27. Let’s look at the equations
P x y
( , )
T t t
( , )
x y
( )
R
P '
= P +
T
P = R ·
P
'' '
x x t
x
= +
y y t
y
= +
x = x -
y
q q
'
'
" 'cos 'sin
y = x +
y
q q
q
" 'sin 'cos
( ) ( )
( ) ( )
x = x + t - y +
t
q q
" cos 'sin
x y
y = x + t + y +
t
q q
" sin 'cos
x y
P '
= R ·
P
P " = P '
+
T
x = x -
y
q q
' cos sin
y = x +
y
q q
' sin cos
( )
x
( ) y
x " = x cos q - y sin
q
+
t
y " = x sin q + y cos
q
+
t

28. 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?
P '
= P +
T
P '
= R ·
P
P '
= S ·
P

29. 2x2 -> 3x3 Matrices
• We can combine transformations by
expanding from 2x2 to 3x3 matrices.
( )
é
=
( )
( )
ù
ú ú ú
û
ù
ù
é
= úû
x
é
= úû
1 0
0 1
t
x
0 0
0 0
é -
= úû
ê ê ê
ë
t
x
q q
ù
é
+ úû
é -
=
êë
ú ú ú
û
ê ê ê
ë
ù
êë é
=
ú ú ú
û
ê ê ê
ë
ù
êë
ù
êë
q q
cos sin 0
sin cos 0
0 0 1
cos sin
sin cos
0 0 1
0
0
,
0 0 1
,
q q
q q
Rq
s
s
s
s
S s s
t
t
y
T t t
y
x
y
x
x y
y
y
x y

30. 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.
ù
ú ú ú ú ú ú
û
é
ê ê ê ê ê ê
ë
3 =
6
2
7 =
14
=
ù
ú ú ú
û
é
® úû
ê ê ê
6
14
ë
ù
é
êë
ù
ú ú ú
Ex. Ex
û
é
® úû
ê ê ê
ë
ù
é
êë
ù
ú ú ú ú ú ú
û
é
ê ê ê ê ê ê
h
P h
ë
x =
x
h
y =
y
=
ù
ú ú ú
û
é
® úû
ê ê ê
ë
ù
êë é
=
2
2
2
2
3
7
4
2
, .
1
4
2
h
h
h
x
y
h
x
y
h
h

31. 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.

32. úû
úû
úû
Final Transformations -
Compare Equations
é
x
'
ù
é
( )
é
x
'
é
t
é
x
=
= x
+ ® '
=
( ) ( )
x
( )
( ) ( )
( )
P = T t t + P ® P = T t t ·
P
x
x
é
® úû
é
ù
ù
é
=
'
P = S s , s · P ® P = S s ,
s ·
P
x
é -
= úû
é
=
q q
cos sin
'
P R( ) P P R( ) P
x
y
1 0
0 1
é
=
x
y
x
y
y
R
x
y
t
x
0 0
s
s
y
y
s
s
y
S s s
x
y
t
y
y
t
y
T t t
x y x y
ù
0 0
y
x
y
x
x y
x y x y
y
y
x y
= · ® = ·
ù
ú ú ú
û
é
ê ê ê
ë
ù
ú ú ú
û
é
ù
ù
é
é -
=
ê ê ê
ë
ù
ú ú ú
'
'
û
ù
'
'
é
® úû
ê ê ê
ë
ù
é
êë
ù
úû
êë
ù
êë
ù
ú ú ú
û
ê ê ê
ë
ú ú ú
û
ê ê ê
ë
ú ú ú
û
ê ê ê
ë
ù
êë
úû
êë é
= úû
êë
ú ú ú
û
ê ê ê
ë
ú ú ú
û
ê ê ê
ë
ú ú ú
û
ê ê ê
ë
ù
êë
ù
êë
ù
êë
q q
q q
cos sin 0
q q
q q
q
sin cos 0
0 0 1 1
1
sin cos
'
0 0 1 1
1
0
0
'
,
, ,
0 0 1 1
1
'
,

33. Combining Transformations
ù
ú ú ú
'
'
û
é
ê ê ê
ë
P A P P B P P A B P
ù
ú ú ú
û
= · = · ® = · ·
' , " ' "
P T R
(3,4), (0.4641, 2), (60)
é
é
ê ê ê
ë
ù
ù
ú ú ú
û
ù
é
=
1 0
0 1
t
x
é -
=
x
q q
cos sin 0
q q
sin cos 0
é -
=
ê ê ê
ë
ù
'
'
x
x
"
ù
"
x
"
ù
ú ú ú
"
û
é
é
é
ê ê ê
ë
ù
ú ú ú
'
'
û
ê ê ê
ë
ú ú ú
û
ê ê ê
ë
ú ú ú
û
ê ê ê
ë
ù
ú ú ú
û
é
ê ê ê
ë
ú ú ú
û
ê ê ê
ë
ú ú ú
û
ê ê ê
ë
-
x
1
x
1 0
0 1
t
x
0 0 1
q q
cos sin 0
sin cos 0
0 0 1
1
1
0 0 1
1
0 0 1 1
1
y
t
y
y
y
y
t
y
y
y
q q
t t
q - q q -
q
cos sin cos sin
x y
q q q q
sin cos sin cos
q q
cos sin 0
sin cos 0
ù
ú ú ú
û
é -
é
ê ê ê
ë
ù
ú ú ú
û
é
é
=
1 0
0 1
t
x
é -
=
ê ê ê
ë
ù
x
"
"
ù
x
"
"
ù
ú ú ú
x
"
"
û
é
é
é
ê ê ê
ë
ù
ù
ú ú ú
û
é
ê ê ê
ë
ù
ú ú ú
û
ê ê ê
ë
ù
ú ú ú
û
ê ê ê
ë
ú ú ú
û
ê ê ê
ë
ù
ú ú ú
û
é
ê ê ê
ë
ú ú ú
û
ê ê ê
ë
+
=
ú ú ú
û
ê ê ê
ë
q q
cos sin
sin cos
x
t
x
0 0 1 1
1
x
0 0 1 1
0 0 1
1
x
0 0 1 1
1
y
t
y
y
t
y
y
t t
y
y
y
x y
q q
q q

34. How would we get:

35. How would we get:

36. Coordinate Systems
• Object Coordinates
• World Coordinates
• Eye Coordinates

37. Object Coordinates

38. World Coordinates

39. Screen Coordinates

40. Coordinate Hierarchy
T r a n s f o r m a t i o n
O b j e c t # 1 - >
W o r l d
O b j e c t # 1
O b j e c t C o o r d in a t e s
S c r e e n C o o r d in a t e s
T r a n s f o r m a t i o n
W o r l d - > S c r e e n
T r a n s f o r m a t i o n
O b j e c t # 2 - >
W o r l d
O b j e c t # 2
O b j e c t C o o r d in a t e s
T r a n s f o r m a t i o n
O b j e c t # 3 - >
W o r l d
O b j e c t # 3
O b j e c t C o o r d in a t e s
W o r l d C o o r d i n a t e s

41. Let’s reexamine assignment 2b

42. Transformation Hierarchies
• For example:

43. Transformation Hierarchies
• Let’s examine:

44. Transformation Hierarchies
• What is a better way?

45. Transformation Hierarchies
• What is a better way?

46. Transformation Hierarchies
• We can have transformations be
in relation to each other
W o r ld C o o r d in a t e s
T r a n s f o r m a t io n
G r e e n - > W o r ld
G r e e n
O b je c t 's C o o r d in a t e s
T r a n s f o r m a t io n
R e d - > G r e e n
R e d
O b je c t C o o r d in a t e s
T r a n s f o r m a t io n
B lu e - > R e d
B lu e
O b je c t C o o r d in a t e s

47. More Complex Models