2D-Transformations-Transformations are the operations applied to geometrical description of an object to change

Computer Graphics :
2D Transformations

Why Transformations?
 In graphics, once we have an object described,
transformations are used to move that object, scale it and
rotate it.

Vertices
 We have always represented vertices as (x,y)
 An alternate method is:
 Example:







y
x
y
x )
,
(







8
.
4
1
.
2
)
8
.
4
,
1
.
2
(

Matrix * Vector






























1
0
0
1
'
'
'
'
I
dy
cx
y
by
ax
x
y
x
d
c
b
a
y
x



















































1
0
0
0
1
0
0
0
1
'
'
'
'
'
'
I
iz
hy
gx
z
fz
ey
dx
y
cz
by
ax
x
z
y
x
i
h
g
f
e
d
c
b
a
z
y
x

Matrix * Matrix






































1
0
0
1
?
*
,
d
c
b
a
dw
cy
dz
cx
bw
ay
bz
ax
B
A
w
z
y
x
B
d
c
b
a
A Does A*B = B*A?
What does the identity do?

1. Translation
 A translation is applied to an object by
repositioning it from one coordinate location to
another.
 We can translate points in the (x,y) plane to new
positions by adding translation amounts to the
coordinates of the points.
 For each point P(x, y) to be moved by tx units
parallel to the x-axis and ty units parallel to the y-
axis to the new point pnew(xnew, ynew)

1. Translation…
 We can write,
xnew= x + tx ynew= y + ty
Suppose P= x,y
Pnew= xnew , ynew
T = tx, ty
Pnew= P + T
 The translation distance pair(tx,ty) is called translation
vector or shift vector.

1. Translation...
 Simply moves an object from one position to another
 xnew = x + tx ynew = y + ty
Note: House shifts position relative to origin
y
x
0
1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6

1. Translation Example
y
x
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(1, 1) (3, 1)
(2, 3)

1. Translation Example...
 Given:
 We want:
 Matrix form:
T
P
P
t
t
y
x
y
x
t
y
y
t
x
x
t
t
T
y
x
P
y
x
y
x
y
x




























'
'
'
'
'
)
,
(
)
,
(
1
.
4
'
4
.
3
'
2
.
8
1
.
7
1
.
4
7
.
3
'
'
2
.
8
1
.
4
'
1
.
7
7
.
3
'
)
2
.
8
,
1
.
7
(
)
1
.
4
,
7
.
3
(


































y
x
y
x
y
x
T
P

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

2. Rotation
 A 2D rotation is applied to an object by repositioning it along a circular
path in the xy plane.
 To generate a rotation, we specify a rotation angle θ and the position
(xr, yr) of the rotation point about which the object is to be rotated.
 If we rotate an object through an angle about the origin , then it can
θ
be defined as
Xnew = x .Cos - y.Sin Y
θ θ new = x. Sin + y.Cos
θ θ
Pnew = R.P

2. Rotation…
)
cos(
'
)
cos(
'
sin
cos
)
(
)
,
(















r
y
r
x
r
y
r
x
R
y
x
P
P
R
P
y
x
y
x
y
x
y
y
x
x
r
r
y
r
r
x













 















'
cos
sin
sin
cos
'
'
cos
sin
'
sin
cos
'
cos
sin
sin
cos
'
sin
sin
cos
cos
'

















2. Rotation…
 Rotates all coordinates by a specified angle
xnew = x cosθ – y sinθ
ynew = x sinθ + y cosθ
 Points are always rotated about the origin
6

 
y
x
0
1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6

2. Rotation Example
y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(3, 1) (5, 1)
(4, 3)

3. Scaling
 A scaling transformation changes the size of an object.
 This operation can be carried out by multiplying the
coordinate values (x, y) for each vertex by scaling
factors Sx and Sy to produce the transformed
coordinates (xnew, ynew).
xnew = x.Sx ynew = y.Sy
 Scaling factor Sx scales the objects in the x-direction,
while Sy scales in the y-direction.

3. Scaling…
 The transformation equations can be written in the
matrix form.
Xnew = Sx 0 x
ynew = 0 Sy y
or
Pnew = S.P
 Suppose we want to scale the triangle below 3 units in the x
direction and 2 units in the y direction.
 Then Sx = 3, Sy = 2.
 Scaling (note that scaling is non-uniform also, the triangle changes its position).

3. Scaling…
 Any positive numeric values can be assigned to the scaling factors
sx and sy.
 Values < 1 , reduce the size of objects;
 values > 1 , produce an enlargement.
 Specifying a value of 1 for both sx and sy [sx=sy=1] , leaves the size of
objects unchanged.
 When sx and sy are assigned the same value [sx=sy], a uniform scaling is
produced that maintains relative object proportions.
 Unequal values for sx and sy result [sx !=sy] in a differential scaling that
is often used in design applications, whew pictures are constructed
from a few basic shapes that can be adjusted by scaling and positioning
transformations

3. Scaling…
 Scalar multiplies all coordinates
 WATCH OUT: Objects grow and move!
 xnew = Sx × x ynew = Sy × y
Note: House shifts position relative to origin
y
x
0
1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6






1
2






1
3






3
6






3
9

3. Scaling Example
y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(1, 1) (3, 1)
(2, 3)

3. Scaling Example
• Given:
• We want:
• Matrix form:
P
S
P
y
x
s
s
y
x
y
s
y
x
s
x
s
s
S
y
x
P
y
x
y
x
y
x

























'
0
0
'
'
'
'
)
,
(
)
,
(
6
.
6
'
2
.
4
'
2
.
2
4
.
1
3
0
0
3
'
'
2
.
2
*
3
'
4
.
1
*
3
'
)
3
,
3
(
)
2
.
2
,
4
.
1
(

























y
x
y
x
y
x
S
P

4. SHEAR
 A transformation that distorts the shape of an object
such that the transformed shape appears as if the
object were composed of internal layers that had
been caused to slide over each other is called a shear.
 Two common shearing transformations are
 those that shift coordinate x values and
 those that shift y values.

4. SHEAR…
Original Data y Shear x Shear
1 0 0 1 a 0
b 1 0 0 1 0
0 0 1 0 0 1
GRAPHICS --> x shear --> GRAPHICS

4. SHEAR…
 The transformation matrix for an x-direction shear is
 Any real number can be assigned to shear parameter
shx.
xnew = x 1 shx 0
ynew = y 0 1 0
1 = 1 0 0 1

4. SHEAR…
 The transformation matrix for an y-direction shear is
 Any real number can be assigned to shear parameter
shx.
xnew = x 1 0 0
ynew = y shy 1 0
1 = 1 0 0 1

5. Reflections
• Reflection is the mirror image of original
object.
• In other words, we can say that it is a
rotation operation with 180°.
• In reflection transformation, the size of the
object does not change.

Why Homogeneous 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!

Homogeneous Coordinates
h
x
x h

 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:
 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)
h
y
y h


Homogeneous Translation
 The translation of a point by (dx, dy) can be written in
matrix form as:
 Representing the point as a homogeneous column vector we
perform the calculation as:










1
0
0
1
0
0
1
dy
dx



















































1
1
*
1
*
0
*
0
1
*
*
1
*
0
1
*
*
0
*
1
1
1
0
0
1
0
0
1
dy
y
dx
x
y
x
dy
y
x
dx
y
x
y
x
dy
dx

Remember Matrix Multiplication






































z
i
y
h
x
g
z
f
y
e
x
d
z
c
y
b
x
a
z
y
x
i
h
g
f
e
d
c
b
a
*
*
*
*
*
*
*
*
*
 Recall how matrix multiplication takes place:

Homogenous Coordinates
v
dy
dx
T
v
dy
y
dx
x
y
x
dy
dx
)
,
(
'
:
1
1
1
0
0
1
0
0
1



































 To make operations easier, 2-D points are written as
homogenous coordinate column vectors
v
s
s
S
v
y
s
x
s
y
x
s
s
y
x
y
x
y
x
)
,
(
'
:
1
1
1
0
0
0
0
0
0



































Translation:
Scaling:

Homogenous Coordinates (cont…)
v
R
v
y
x
y
x
y
x
)
(
'
:
1
cos
sin
sin
cos
1
1
0
0
0
cos
sin
0
sin
cos















































 
Rotation:

Inverse Transformations
 Transformations can easily be reversed using inverse
transformations














1
0
0
1
0
0
1
1
dy
dx
T


















1
0
0
0
1
0
0
0
1
1
y
x
s
s
S













1
0
0
0
cos
sin
0
sin
cos
1




R

Combining Transformations
 A number of transformations can be combined into one
matrix to make things easy.
 Allowed by the fact that we use homogenous
coordinates.
 Imagine rotating a polygon around a point other than
the origin.
 Transform to centre point to origin.
 Rotate around origin.
 Transform back to centre point.

Combining Transformations (cont…)
)
(H
House H
dy
dx
T )
,
(
H
dy
dx
T
R )
,
(
)
( H
dy
dx
T
R
dy
dx
T )
,
(
)
(
)
,
( 


1 2
3 4

Combining Transformations (cont…)
 The three transformation matrices are combined as follows































 













1
1
0
0
1
0
0
1
1
0
0
0
cos
sin
0
sin
cos
1
0
0
1
0
0
1
y
x
dy
dx
dy
dx




REMEMBER: Matrix multiplication is not
commutative so order matters
v
dy
dx
T
R
dy
dx
T
v )
,
(
)
(
)
,
(
' 




Composite transformation : Points to Ponder
 If a transformation of the plane T1 is followed by a second
plane transformation T2, then the result itself may be
represented by a single transformation T which is the
composition of T1 and T2 taken in that order.
 This is written as T = T1∙T2
 Composite transformation can be achieved by concatenation
of transformation matrices to obtain a combined
transformation matrix.

Composite transformation : Points to Ponder …
 A combined matrix :-
[T][X]=[X][T1][T2][T3][T4]….[Tn][T][X]=[X][T1][T2][T3][T4]….[Tn]
 Where [Ti][Ti] is any combination of
Translation
Scaling
Shearing
Rotation
Reflection

 The change in the order of transformation would lead to
different results, as in general matrix multiplication is
not cumulative, that is [A]. [B] ≠ [B]. [A] and the order
of multiplication.
 The basic purpose of composing transformations is to
gain efficiency by applying a single composed
transformation to a point, rather than applying a series
of transformation, one after another.

 For example, to rotate an object about an arbitrary point
(Xp, Yp), we have to carry out three steps:-
1)Translate point (Xp, Yp) to the origin.
2)Rotate it about the origin.
3)Finally, translate the center of rotation back
where it belonged.

Exercises 1
 Translate the shape below by (7, 2)
x
y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(2, 3)
(3, 2)
(1, 2)
(2, 1)

Exercises 2
 Scale the shape below by 3 in x and 2 in y
x
y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(2, 3)
(3, 2)
(1, 2)
(2, 1)

Exercises 3
 Rotate the shape below by 30° about the origin
x
y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(7, 3)
(8, 2)
(6, 2)
(7, 1)

Exercise 4
 Write out the homogeneous matrices for the previous
three transformations










__
__
__
__
__
__
__
__
__










__
__
__
__
__
__
__
__
__










__
__
__
__
__
__
__
__
__
Translation Scaling Rotation

Exercises 5
 Using matrix multiplication calculate the rotation
of the shape below by 45° about its centre (5, 3)
x
y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
(5, 4)
(6, 3)
(4, 3)
(5, 2)

Scratch
x
y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6

Equations
 Translation:
xnew = xold + dx ynew = yold + dy
 Scaling:
 xnew = Sx × xold ynew = Sy × yold
 Rotation
 xnew = xold × cosθ – yold × sinθ
 ynew = xold × sinθ + yold × cosθ

2D-Transformations-Transformations are the operations applied to geometrical description of an object to change

More Related Content

Similar to 2D-Transformations-Transformations are the operations applied to geometrical description of an object to change (20)

More from BINJAD1 (20)

Recently uploaded (20)

2D-Transformations-Transformations are the operations applied to geometrical description of an object to change

Editor's Notes