Lesson 5
GEOMETRIC TRANSFORMATIONS
2D Geometric Transformations
• What are geometric transformations?
• Operations that are applied to the geometric description of an object to change
its position, orientation, or size.
• Why the transformation is needed?
• To manipulate the initially created object and to display the modified object
without having to redraw it.
• Two ways:
1. Object Transformation
• Alter the coordinates descriptions of an object
• Translation, rotation, scaling etc.
• Coordinate system unchanged
2. Coordinate transformation
• Produce a different coordinate system
2D Geometric Transformations
• Basic Transformations
• Translation
• Rotation
• Scaling
• Other transformations
• Reflection
• Shear
Translation
• A translation moves all points in
an object along the same
straight-line path to new
positions.
• The path is represented by a ?
vector, called the translation or
shift vector.
• We can write the components: ty=4
p'x = px + tx
(2, 2) tx = 6
p'y = py + ty
• or in matrix form:
P' = P + T Adding or subtracting a value to or
x’ x tx from a coordinate translates it in
y’ = y + ty space.
Translation (55,60)
x x tx
y y t y
(20,35)
(45,30)
(65,30)
x’ 10 35 45
y’ = 5 + 25 = 30
(10,5) (30,5)
Specifying a 2D-Translation in OpenGL:
glTranslatef(tx, ty, 0.0);
(The z component is set to 0 in 2D translation
Rotation
• A rotation repositions all points
in an object along a circular path
in the plane centered at the pivot
point.
• Parameters for the 2D rotation
are the rotation angle θ and a
position (xr , yr ), called the
rotation point (or pivot point.
Rotation
• Review Trigonometry
=> cos = x/r , sin = y/r
• x = r. cos , y = r.sin
=> cos (+ ) = x’/r
• x’ = r. cos (+ )
• x’ = r.coscos - r.sinsin y’
• x’ = x.cos – y.sin
y
=>sin (+ ) = y’/r
y’ = r. sin (+ ) x
• y’ = r.cossin + r.sincos x’
• y’ = x.sin + y.cos
Rotation
• We can write the components:
p'x = px cos – py sin
p'y = px sin + py cos
• or in matrix form:
P' = R • P
• A positive value for the angle θ defines a counterclockwise
rotation about the pivot point, as in our example, and a
negative value rotates objects in the clockwise direction
• Rotation matrix
cos sin
R
sin cos
Rotation
• Example
• Find the transformed point, P’, caused by rotating
P= (5, 1) about the origin through an angle of 90.
Rotation
• Example (Solution)
• Find the transformed point, P’, caused by rotating
P= (5, 1) about the origin through an angle of 90.
cos sin x x cos y sin
sin
cos y x sin y cos
5 cos 90 1 sin 90
5 sin 90 1 cos 90
5 0 1 1
5 1 1 0
1
5
Scaling
• Scaling changes the size of an object
and involves two scale factors, Sx and
P’
Sy for the x and y coordinates
respectively.
• Scales are about the origin.
• We can write the components:
p'x = sx • px P
p'y = sy • py
or in matrix form: P' = S • P
sx 0
Scale matrix as: S
0 sy
Scaling
• If the scale factors are in between P’
0 and 1, the points will be moved
closer to the origin the object
will be smaller.
• Example : P(2, 5)
• P(2, 5), Sx = 0.5, Sy = 0.5
• Find P’ ?
• If the scale factors are larger than 1,
the points will be moved away from P’
the origin the object will be larger.
• Example :
• P(2, 5), Sx = 2, Sy = 2
• Find P’ ?
Scaling
• If the scale factors are the same, Sx = Sy uniform scaling which
maintains relative object proportions. Only change in size.
• If Sx Sy differential scaling. Change in size and shape
• Example : square rectangle
• P(1, 3), Sx = 2, Sy = 5 , P’ ?
• In some systems, negative values can also be specified for the
scaling parameters. This not only resizes an object, it reflects it
about one or more of the coordinate axes
Reflection
• A transformation that produces a mirror image of an object.
• Axis of reflection
• A line in the xy plane
• A line perpendicular to the xy plane
• The mirror image is obtained by rotating the object 1800
about the reflection axis.
• Rotation path
• Axis in xy plane: the rotation path about this axis is in a plane
perpendicular to the xy plane.
• Axis perpendicular to xy plane:the rotation path about this
axis is in the xy plane.
Reflection
• Reflection about the x axis
• Reflection about the line y = 0
• It retains x values, but “flips” the y values of coordinate positions
y = y
Reflection
• Reflection about the y axis
• A reflection about the line x = 0 (the y axis)
• It flips x coordinates while keeping y coordinates the same
x = x
Reflection
• Reflection relative to the coordinate origin
• We flip both the x and y coordinates of a point by reflecting relative to an
axis that is perpendicular to the xy plane and that passes through the
coordinate origin
x = x
y = y
Reflection
• Reflection of an object relative to an axis perpendicular to
the xy plane through Preflect
Reflection
• Reflection about the line y = x
Reflections
Reflection about x: glScalef(1, -1, 1);
Reflection about y: glScalef(-1, 1, 1);
Reflection about origin: glScalef(-1, -1, 1);
Shear
x x hx y
y y
•A shear transformation in the x-direction (along x) shifts the points
in the x-direction proportional to the y-coordinate.
•The y-coordinate of each point is unaffected.
Shear
• The x-direction shear relative to x axis
1 shx 0 x ' x shx y
0 1 0
y' y
0 0 1
If shx = 2:
General Properties
Preserved Attributes
Line Angle Distance Area
Translation Yes Yes Yes Yes
Rotation Yes Yes Yes Yes
Scaling Yes No No No
Reflection Yes Yes Yes Yes
Shear Yes No No Yes
Order of Transformations
In composite transformations, the order of transformations is
very important.
Rotation followed by Translation:
Translation followed by Rotation: