Computer Graphic
2 D Transformation
Outline
1. Why transformations ?
2. Basic 2D Transformations
Translation
Scaling
Rotation
3. Homogeneous Coordinate system
4. Composite Transformations
5. Reflection and Shearing
Why transformations ?
In graphics, once we have an object described,
transformations are used to move that object,
scale it and rotate it
Basic 2D Transformations
1. Translation
Simply moves an object from one position to another
x x Tx
y 6 y y Ty
5
4
x Tx x
y T y
3
1
y
0
1 2 3 4 5 6 7 8 9 10
x
Note: House shifts position relative to origin
2D Translation
Moving a polygon from position (a) to position (b) with
the translation vector (-5, 10), i.e.
5
T
10
y y
20 20
15 15
p3(15,10)
10 10
5 P1(10,5) P2(20,5) 5
5 10 15 20 x 5 10 15 20 x
(a) (b)
Basic 2D Transformations
2. Scaling
Scalar multiplies all coordinates
WATCH OUT: Objects grow and move!
y x S x x
6
5 y S y y
4
3 6 9
x S x 0 x
y 0
3 3
S y y
2
1 2
1
3
1
0
1 2 3 4 5 6 7 8 9 10
x
Note: House shifts position relative to origin
Example: Non- Uniform Scaling
(a)
(b)
Non-uniform scaling
Basic 2D Transformations
3. Rotation
x r cos ( x, y)T
y r sin
x r cos( ) ( x, y)T
r
x r cos cos r sin sin r
x x cos y sin
y ' r sin( )
sin(a+b) = sin(a)cos(b) + sin(b)cos(a)
Similarly, cos(a+b) = cos(a)cos(b) - sin(a)sin(b)
y y cos x sin
3. Rotation
( x, y)T x x cos y sin
y y cos x sin
( x, y)T
r
r x cos sin x
y sin
cos y
Homogenous Coordinates
A point (x, y) can be re-written in homogeneous
coordinates as (xh, yh, h)
The homogeneous parameter h is a non-
zero value such that:
xh yh
x y
h h
We can then write any point (x, y) as (hx, hy, h)
We can conveniently choose h = 1 so that
(x, y) becomes (x, y, 1)
Why Homogenous Coordinates?
Mathematicians commonly use homogeneous
coordinates as they allow scaling factors to be
removed from equations
We will see in a moment that all of the
transformations we discussed previously can be
represented as 3*3 matrices
Using homogeneous coordinates allows us use
matrix multiplication to calculate transformations
– extremely efficient!
Example: Rotate a polygonal object defined by vertices
A(0,0),B(1,0) ,C(1,1) and D(0,1) by 45 about the origin
0 1 1 0
v [A B C D] 0 0 1 1
1 1 1 1
1 1
2 - 2 0
cos 45 sin 45 0
1 1
TRotate sin 45 cos 45 0 0
2 2
0 0 1
0 0 1
1 1 1 1
2 - 2 0 0 2
0 -
2
0 1 1 0
1 1 1 2 1
v 0 0 0 1 1 0
2 2 2 2 2
1 1 1 1
0 0 1 1 1 1 1
3. Rotation
Points are always rotated about the origin
y
6
2
1 6
0
1 2 3 4 5 6 7 8 9 10
x
2D Transformations in Homogenous Notation
x' cos sin 0 x
1. Rotation y' sin cos 0 y
1 0 0 1 1
x' S x 0 0 x
2. Scaling y ' 0 Sy 0 y
1 0 0 1 1
x' 1 0 Tx x
y ' 0 1 T y
3. Translation y
1 0 0 1 1
Inverse Transformations
cos sin 0
T 1rotation sin cos 0
1. Inverse of Rotation
0 0 1
1
S 0 0
x
1
T 1Scale 0 0
2. Inverse of Scaling Sy
0 0 1
1 0 Tx
T 1Translate 0 1 Ty
3. Inverse of Translation
0 0 1
Example
Consider the line with endpoints (10, 10) and (30, 25).
Translate it by tx = -20, ty = -10 and then rotate it by θ = 90º.
y
(30, 25)
(10, 10)
x
Right-to-left
x cos 90 sin 90 0 1 0 20 x
y
sin 90 cos 90 0 0 1 10 y
1 0 0 0 1 1
0 1
Solution
x cos 90 sin 90 0 1 0 20 x
y
sin 90 cos 90 0 0 1 10 y
1 0 1
0 0 0 1 1
0 1 0 1 0 20 x
1 0 0 0 1 10 y
0 0 1 0 0 1 1
0 1 10 x y
1 0 20 y (30, 25)
0 0 1
1
(10, 10)
x
Solution (continue)
y
x 0 1 10 x (30, 25)
(-15, 10)
y
1 0 20 y (10, 10)
x
1 0 0 1
1 (0, -10)
x 0 1 10 10 0
Point (10, 10) y
1 0 20 10
10
1 0 0 1 1
1
x 0 1 10 30 15
Point (30, 25) y
1 0 20 25
10
1 0 0 1
1 1
Exercises
Consider the following object:
25
10
10 45 x
1. Apply a rotation by 145º then scale it by Sx=2 and Sy=1.5
and then translate it by tx=20 and ty=-30.
2. Scale it by Sx=½ and Sy=2 and then rotate it by 30º.
3. Apply a rotation by 90º and then another rotation by 45º.
4. Apply a rotation by 135º.
Scaling about a Reference Point
If the center of the object is not at the origin, in this case
we should consider a scaling as a composite
transformation which involves the following steps.
1. Translation of the reference (xc,yc) to the origin
2. Scale the object by scale factor by (Sx,Sy)
3. Translation of the reference point back to its original
position
(xc, yc)T [Tr ] 1 0 xr
TTranslate 0 1 yr
0 0 1
(a) Original position of (b) Translate object so that
object and fixed point fixed point (xr, yr) is at origin
[ Sc ]
S x 0 0 [Tr ]1 (xc, yc)T
TScale 0 Sy 0
1 0 xr
0 1
T 1Translate 0 1 yr
0
0 0 1
(c) Scale object with (d) Translate object so that
respect to origin fixed point is returned to position (xr, yr)T
Combining the Transformation
The three transformation matrices are combined as follows
1
Tcomposite T T
trans Scale Trans T
1 0 xr S x 0 0 1 0 xr
TComposite 0 1 yr 0 Sy 0 0 1 yr
0 0 1 0 0 1 0 0 1
S x 0 xr ( S x 1)
TComposite 0 S y yr ( S y 1)
0 0 1
x x
y [T ] y
composite
1 1
Example1:
Consider a triangle having a vertices at A(0,0), B(5,1), and
C(3,4) scale this triangle using scaling factors Sx=2 and
Sy=1 about a) the origin b) about the reference point (2,3)
a) At origin ( xr=0, yr=0)
S x 0 xr ( S x 1) 2 0 0
TComposite 0 Sy yr ( S y 1) 0 1 0
0 0 1 0 0 1
0 5 3
v [A B
C ] 0 1 4
1 1 1
2 0 0 0 5 3 0 10 6
v Tcomposite *v 0 1 0 * 0 1 4 0 0 4
0 0 1 1 1 1 1 1 1
b) Scaling about the reference point (2,3) : Here, the transformation matrix
S x 0 xr ( S x 1) 2 0 2
TComposite 0 Sy yr ( S y 1) 0 1 0
0 0 1 0 0 1
2 0 2 0 5 3 2 12 8
v Tcomposite *v 0 1 0 * 0 1 4 0 1 4
0 0 1 1 1 1 1 1 1
Rotation about an Arbitrary Point
Rotation about an arbitrary point is composite
transformation . This operation involve s three basic
transformations:
1. Translation of the object center (xc,yc) to the origin
2. Rotation of the object about the origin by angle θ
in.say, the anticlockwise direction
3. Translation of the rotated object back to its original
position 1
Tcomposite TtransTRotTTrans
x x
y [T ] y
composite
1 1
House (H ) T (Tx, Ty ) H
1 2 1 0 xr
TTranslate 0 1 yr
0 0 1
R( )T (Tx, Ty ) H T (Tx,Ty ) R( )T (Tx, Ty ) H
cos sin 0 1 0 xr
TRotate sin cos 0 T 1Translate 0 1 yr
3
0 0 1 4 0 0
1
Example: Consider a triangle having a vertices at A(0,0),
B(5,1), and C(3,4) scale this triangle. Rotate the triangle by
90 about a) the origin b) about the reference point (2,3)
Solution: a) about the origin
0 5 3
v [ A B C ] 0 1 4
1 1 1
The transformation matrix for rotation about the origin :
cos 90 sin 90 0 0 - 1 0
TRotate sin 90 cos 90 0 1 0 0
0 0 1 0 0 1
v TRot v
0 - 1 0 0 5 3 0 - 1 - 4
v 1 0 0 0 1 4 0 5 3
0 0 1 1 1 1 1 1 1
b) Rotation about point (2,3 )
1
Tcomposite T T T
trans Rot Trans
1 0 - 2 0 - 1 0 1 0 2
Tcomposite 0 1 - 3 1 0 0 0 1 3
0 0 1 0 0 1 0 0 1
1 0 - 2 0 - 1 - 3 0 - 1 - 5
Tcomposite 0
1 - 3 1 0 - 2 1 0 - 5
0 0 1 0 0 1 0 0 1
v TComposite v
0 - 1 - 5 0 5 3 - 5 - 6 - 9
v 1 0 - 5 0 1 4 - 5 0 - 2
0 0 1 1 1 1 1 1 1
Exercises
Consider the following object:
y
25
10
10 45 x
1. Apply a rotation by 60° on the Pivot Point (-10, 10) and
display it.
2. Apply a rotation by 30° on the Pivot Point (45, 10) and
display it.
3. Apply a rotation by 270° on the Pivot Point (10, 0) and then
translate it by tx = -20 and ty = 5. Display the final result.
Reflection
About the x axis y
x 1 0 0 x
y
0 1 0 y
x
1 0 0 1 1
Reflection of an object about the x axis
About the y axis
y
x 1 0 0 x
y
0 1 0 y
1 0 0 1 1
x
Reflection of an object about the y axis
Reflection
Relative to the coordinate origin
y
x 1 0 0 x
y
0 1 0 y
1 0 0 1 1 x
Same as a rotation with 180º
With respect to the line y = x
y y=x
x 0 1 0 x
y
1 0 0 y
1 0 0 1 1
x
Reflection about x=-y line : the x and y coordinates are
interchanged and their values are negated after reflection
Original 3 y
y = -x
position
0 - 1 0
Reflected 1 2 Trefx y - 1 0 0
1’
position
0 0 1
3’ 2’
x
Reflection about any arbitrary line: y=mx+b
This kind of reflection can be implemented by a sequence of the following
steps:
I. Translate the line, along the y-axis so that it pass the origin
II. Rotate through an angle θ =tan-1(m) in clockwise so that the line is
aligned with x-axis
III. Reflect the object about x-axis
IV. Perform inverse Rotation and Translation
1 1
Tcomposite TtransTRotTref T T Rot trans
Example: Consider a triangle whose vertices are (2 2), (4 2) and (4
4). Find the concatenated transformation matrix and the
transformed vertices for rotation of 90 about the origin followed
by reflection through the line y = -x. Comment on the sequence of
transformations.
0 1 0
Trot90 1 0 0
0 0 1
0 1 0
Tref y x 1 0 0
0 0 1
Ex: Reflect triangle (2,4),(4,6),(2,6) about line
y=0.5(x+4)
1. Translate (0, -2) so that the line
y mx b
passes through the origin
b
1 0 0
TTr 0 1 2
ϴ
0 0 1
2. Rotate the line about the x axis by -θo
tan 1 m tan 1 (0.5) 26.565
sin( 26.565) 0.44721
cos(26.565) 0.894
0.894 0.44721 0
TTr ( ) 0.44721 0.894 0
0 0 1
3. Reflect object about the x axis 1 0 0
TTr 0 1 0
0 0 1
4. Rotate back the line by θo
0.894 0.44721 0
TTr ( ) 0.44721 0.894 0
0 0 1
5. Translate back (0,2) 1 0 0
TTr 0 1 2
0 0 1
[T ] [Ttr ][Trot ][Tref ][Trot ]1[Ttr ]1
1 0 0 0.894 0.44721 0 1 0 0 0.894 0.44721 0 1 0 0
[T ] 0 1 2 0.44721 0.894 0 0 1 0 0.44721 0.894 0 0 1 2
0 0 1 0 0 1 0 0 1 0 0 1 0 0 1
0.6 0.8 1.6
T 0.8 0.6 3.2
0 0 1
The final position of line after reflection about the line is
[v' ] [T ][v]
0.6 0.8 1.6 2 4 2 2.8 5.6 4.4
[v' ] 0.8 0.6 3.2 4 6 6 2.4 2.8 1.2
0 0 1 1 1 1 1 1 1
Shearing about the origin
y y y
(1, 3)
(1, 2)
(1, 1) (2, 1) (3, 1)
(0, 1) (0, 1)
x x x
(0, 0) (1, 0) (0, 0) (1, 0) (0, 0)
(a) (b) (c)
SHy=2
SHx=2 1 SH x 0 1 0 0
Tshearx 0 1 0 Tsheary SH y 1 0
0 0 1 0 0 1
Shearing about the a reference point ( xr,yr)
1 SH x SH x yref
Tshearx 0 1 0
0 0 1
1 0 0
Tsheary SH y 1 SH y xref
0 0 1
Shear Example
