CSE 411

Computer Graphics

Lecture #6 2D Geometric Transformations

Prepared & Presented by Asst. Prof. Dr. Samsun M. BAŞARICI

Objectives
 HB Ch. 7, GVS Ch. 3
 Basic 2D Transformations (rigid-body
transformations):
 Translation
 Rotation
 Scaling
 Homogenenous Representations and
Coordinates
 2D Composite Transformations

2D Geometric Transformations 2
Objectives (cont.)
 Other Transformations:
 Reflection
 Shearing
 Raster Methods for Transformations and
OpenGL
 Transformations between 2D Coordinate
Systems and OpenGL

2D Geometric Transformations 3
Geometric Transformations

 Sometimes also called modeling

transformations
 Geometric transformations: Changing an object’s
position (translation), orientation (rotation) or size
(scaling)
 Modeling transformations: Constructing a scene
or hierarchical description of a complex object
 Others transformations: reflection and
shearing operations

2D Geometric Transformations 4
Basic 2D Geometric
Transformations
 2D Translation
P’
T

 x’ = x + tx , y’ = y + tty
 x  x'  x
P   , P '   , T   
 y  y ' t y 

 P’=P+T 2D Geometric Transformations 5

Basic 2D Geometric
Transformations (cont.)
 2D Translation
 To move a line segment, apply the transformation
equation to each of the two line endpoints and
redraw the line between new endpoints
 To move a polygon, apply the transformation
equation to coordinates of each vertex and
regenerate the polygon using the new set of vertex
coordinates

2D Geometric Transformations 6
2D Translation Routine
class wcPt2D {
public:
GLfloat x, y;
};

void translatePolygon (wcPt2D * verts, GLint nVerts, GLfloat tx, GLfloat ty)
{
GLint k;

for (k = 0; k < nVerts; k++) {

verts [k].x = verts [k].x + tx;
verts [k].y = verts [k].y + ty;
}
glBegin (GL_POLYGON);
for (k = 0; k < nVerts; k++)
glVertex2f (verts [k].x, verts [k].y);
glEnd ( );
}

2D Geometric Transformations 7
Basic 2D Geometric
Transformations (cont.)
 2D Rotation
 Rotation axis
 Rotation angle
 rotation point or pivot point (xr,yr)

yr θ

xr

2D Geometric Transformations 8
Basic 2D Geometric
Transformations (cont.)
 2D Rotation
 If θ is positive  counterclockwise rotation
 If θ is negative  clockwise rotation
 Remember:
 cos(a + b) = cos a cos b - sin a sin b
 cos(a - b) = cos a sin b + sin a cos b

2D Geometric Transformations 9
Basic 2D Geometric
Transformations (cont.)
 2D Rotation
 At first, suppose the pivot point is at the origin
 x’=r cos(θ+Φ) = r cos θ cos Φ - r sin θ sin Φ
y’=r sin(θ+Φ) = r cos θ sin Φ + r sin θ cos Φ
 x = r cos Φ, y = r sin Φ
 x’=x cos θ - y sin θ
y’=x sin θ + y cos θ
(x’,y’)

r θ
r (x,y)
Φ
2D Geometric Transformations 10
Basic 2D Geometric
Transformations
 2D Rotation
 P’=R·P

cos   sin 
R
 sin  cos  

(x’,y’)

r θ
r (x,y)
Φ
2D Geometric Transformations 11
Basic 2D Geometric
Transformations (cont.)
 2D Rotation
 Rotation of a point about any specified position
(xr,yr)
x’=xr+(x - xr) cos θ – (y - yr) sin θ
y’=yr+(x - xr) sin θ + (y - yr) cos θ
 Rotations also move objects without deformation
 A line is rotated by applying the rotation formula to
each of the endpoints and redrawing the line
between the new end points
 A polygon is rotated by applying the rotation
formula to each of the vertices and redrawing the
polygon using new vertex coordinates
2D Geometric Transformations 12
2D Rotation Routine
class wcPt2D {
public:
GLfloat x, y;
};

void rotatePolygon (wcPt2D * verts, GLint nVerts, wcPt2D pivPt, GLdouble theta)
{
wcPt2D * vertsRot;
GLint k;

for (k = 0; k < nVerts; k++) {

vertsRot [k].x = pivPt.x + (verts [k].x - pivPt.x) * cos (theta) - (verts [k].y - pivPt.y) *
sin (theta);
vertsRot [k].y = pivPt.y + (verts [k].x - pivPt.x) * sin (theta) + (verts [k].y - pivPt.y) *
cos (theta);
}

glBegin (GL_POLYGON);
for (k = 0; k < nVerts; k++)
glVertex2f (vertsRot [k].x, vertsRot [k].y);
glEnd ( );
}
2D Geometric Transformations 13
Basic 2D Geometric
Transformations (cont.)
 2D Scaling
 Scaling is used to alter the size of an object
 Simple 2D scaling is performed by multiplying
object positions (x, y) by scaling factors sx and sy
x’ = x · sx
y’ = y · sx
 x'  s x 0   x
 y '   0   
sy   y
  

2D Geometric Transformations 14
Basic 2D Geometric
Transformations (cont.)
 2D Scaling
 Any positive value can be used as scaling factor
 Values less than 1 reduce the size of the object
 Values greater than 1 enlarge the object
 If scaling factor is 1 then the object stays unchanged
 If sx = sy , we call it uniform scaling
 If scaling factor <1, then the object moves closer to the
origin and If scaling factor >1, then the object moves
farther from the origin

x’ x
2D Geometric Transformations 15
Basic 2D Geometric
Transformations (cont.)
  2D Scaling
 Why does scaling also reposition object?
 Answer: See the matrix (multiplication)
 Still no clue?

2D Geometric Transformations 16
Basic 2D Geometric
Transformations (cont.)
 2D Scaling
 We can control the location of the scaled object by
choosing a position called the fixed point (xf,yf)
x’ – xf = (x – xf) sx y’ – yf = (y – yf) sy

x’=x · sx + xf (1 – sx)
y’=y · sy + yf (1 – sy)
 Polygons are scaled by applying the above formula
to each vertex, then regenerating the polygon using
the transformed vertices

2D Geometric Transformations 17
2D Scaling Routine
class wcPt2D {
public:
GLfloat x, y;
};
void scalePolygon (wcPt2D * verts, GLint nVerts, wcPt2D fixedPt, GLfloat sx,
GLfloat sy)
{
wcPt2D vertsNew;
GLint k;

for (k = 0; k < n; k++) {

vertsNew [k].x = verts [k].x * sx + fixedPt.x * (1 - sx);
vertsNew [k].y = verts [k].y * sy + fixedPt.y * (1 - sy);
}
glBegin (GL_POLYGON);
for (k = 0; k < n; k++)
glVertex2v (vertsNew [k].x, vertsNew [k].y);
glEnd ( );
}
2D Geometric Transformations 18
Matrix Representations and
Homogeneous Coordinates
 Many graphics applications involve
sequences of geometric transformations
 Animations
 Design and picture construction applications
 We will now consider matrix representations
of these operations
 Sequences of transformations can be efficiently
processed using matrices

2D Geometric Transformations 19
Matrix Representations and
Homogeneous Coordinates (cont.)
 P’ = M1 · P + M2
 P and P’ are column vectors
 M1 is a 2 by 2 array containing multiplicative
factors
 M2 is a 2 element column matrix containing
translational terms
 For translation M1 is the identity matrix
 For rotation or scaling, M2 contains the
translational terms associated with the pivot point
or scaling fixed point
2D Geometric Transformations 20
Matrix Representations and
Homogeneous Coordinates (cont.)
 To produce a sequence of operations, such
as scaling followed by rotation then
translation, we could calculate the
transformed coordinates one step at a time
 A more efficient approach is to combine
transformations, without calculating
intermediate coordinate values

2D Geometric Transformations 21
Matrix Representations and
Homogeneous Coordinates (cont.)
 Multiplicative and translational terms for a 2D
geometric transformation can be combined
into a single matrix if we expand the
representations to 3 by 3 matrices
 We can use the third column for translation terms,
and all transformation equations can be
expressed as matrix multiplications

2D Geometric Transformations 22
Matrix Representations and
Homogeneous Coordinates (cont.)
 Expand each 2D coordinate (x,y) to three
element representation (xh,yh,h) called
homogeneous coordinates
 h is the homogeneous parameter such that
x = xh/h, y = yh/h,
  infinite homogeneous representations for a
point
 A convenient choice is to choose h = 1

2D Geometric Transformations 23
Matrix Representations and
Homogeneous Coordinates (cont.)
 2D Translation Matrix
 x '  1 0 tx   x
 y '  0 1   
t y    y
  
 1  0 0 1   1 

or, P’ = T(tx,ty)·P

2D Geometric Transformations 24
Matrix Representations and
Homogeneous Coordinates (cont.)
 2D Rotation Matrix

 x' cos   sin  0  x 

 y '   sin  cos  0   y 
  
 1   0 0 1  1 

or, P’ = R(θ)·P

2D Geometric Transformations 25
Matrix Representations and
Homogeneous Coordinates (cont.)
 2D Scaling Matrix
 x'  s x 0 0  x 
 y '   0 sy 0   y 
  
 1   0 0 1  1 

or, P’ = S(sx,sy)·P

2D Geometric Transformations 26
Inverse Transformations

 2D Inverse Translation Matrix

1 0  tx 
T 1 
 0 1 
 ty 
0 0 1 
 By the way:
1
T *T  I

2D Geometric Transformations 27
Inverse Transformations (cont.)

 2D Inverse Rotation Matrix

 cos  sin  0
R 1 
  sin  cos  0
 0 0 1

 And also:

1
R *R  I

2D Geometric Transformations 28
Inverse Transformations (cont.)

 2D Inverse Rotation Matrix:

 If θ is negative  clockwise
 In
1
R *R  I
 Only sine function is affected
 Therefore we can say
R 1  R T

 Is that true?
 Proof: It’s up to2Dyou 
Geometric Transformations 29
Inverse Transformations (cont.)

 2D Inverse Scaling Matrix

1 
s 0 0
 x 
1
S 1
0 0
 sy 
0 0 1
 
 
 Of course:
1
S *S  I
2D Geometric Transformations 30
2D Composite Transformations

 We can setup a sequence of transformations

as a composite transformation matrix by
calculating the product of the individual
transformations
 P’=M2·M1·P
=M·P

2D Geometric Transformations 31
2D Composite Transformations
(cont.)
 Composite 2D Translations
 If two successive translation are applied to a point P,
then the final transformed location P' is calculated as

P '  T(t x2 , t y2 )  T(t x1 , t y1 )  P  T(t x1  t x2 , t y1  t y2 )  P

1 0 t 2 x  1 0 t1x  1 0 t1x  t 2 x 
 0 1 t   0 1 t    0 1 t  t 
 2y   1y   1y 2y 

0 0 1  0 0 1  0 0 1 

2D Geometric Transformations 32
 2D Composite Transformations
(cont.)
 Composite 2D Rotations

P '  R (1   2 )  P

cos  2  sin  2 0 cos 1  sin 1 0 cos(1   2 )  sin(1   2 ) 0

 sin  cos  0    sin  cos  0    sin(   ) cos(   ) 0
 2 2   1 1   1 2 1 2 
 0 0 1  0 0 1  0 0 1

2D Geometric Transformations 33
 2D Composite Transformations
(cont.)
 Composite 2D Scaling

S (sx2 , s y2 )  S (sx1 , s y1 )  S (sx1  sx2 , s y1  s y2 )

 s2 x 0 0  s1x 0 0  s1x  s2 x 0 0
0 s2 y 0   0 s1 y 0   0 s1 y  s2 y 0

 0 0 1  0 0 1  0 0 1

2D Geometric Transformations 34
2D Composite Transformations
(cont.)
 Don’t forget:
 Successive translations are additive
 Successive scalings are multiplicative
 For example: If we triple the size of an object
twice, the final size is nine (9) times the original
 9 times?
 Why?
 Proof: Again up to you 

2D Geometric Transformations 35
General Pivot Point Rotation

 Steps:
1. Translate the object so that the pivot point is
moved to the coordinate origin.
2. Rotate the object about the origin.
3. Translate the object so that the pivot point is
returned to its original position.

2D Geometric Transformations 36
General Pivot Point Rotation

2D Geometric Transformations 37
2D Composite Transformations
(cont.)
 General 2D Pivot-Point Rotation
1 0 xr  cos   sin  0 1 0  xr 
0 1 yr    sin  cos  0  0 1  yr 

0 0 1   0 0 1 0 0 1 

cos   sin  xr (1  cos )  yr sin 

 
  sin  cos  yr (1  cos )  xr sin  
 0 0 1 

2D Geometric Transformations 38
 General Fixed Point Scaling

 Steps:
1. Translate the object so that the fixed point
coincides with the coordinate origin.
2. Scale the object about the origin.
3. Translate the object so that the pivot point is
returned to its original position.

2D Geometric Transformations 39
General Fixed Point Scaling
(cont.)

(x yr)
r, (xr, yr)

2D Geometric Transformations 40
 General Fixed Point Scaling
(cont.)
• General 2D Fixed-Point Scaling:
 
¿ 1 0 𝑥 𝑓 ¿ 𝑠 𝑥 00 ¿ 1 0 − 𝑥 𝑓 ¿ 𝑠 𝑥 0 𝑥 𝑓 (1− 𝑠 𝑥 )

[ ][ ][ ] [
¿ 0 1 𝑦 𝑓 . ¿ 0 𝑠 𝑦 0 . ¿ 0 1− 𝑦 𝑓 = ¿ 0 𝑠 𝑦 𝑦 𝑓 (1 − 𝑠 𝑦 )
¿0 0 1 ¿ 0 01 ¿001 ¿ 0 01
]
𝐓 (𝑥 𝑓 , 𝑦 𝑓 )⋅ 𝐒(𝑠 𝑥 , 𝑠 𝑦 )⋅𝐓 (− 𝑥 𝑓 , − 𝑦 𝑓 )=𝐒(𝑥 𝑓 , 𝑦 𝑓 , 𝑠 𝑥 , 𝑠 𝑦 )
 

2D Geometric Transformations 41
2D Composite Transformations
(cont.)
 General 2D scaling directions:
 Above: scaling parameters were along x and y
directions
 What about arbitrary directions?
 Answer: See next slides

2D Geometric Transformations 42
 General 2D Scaling Directions

Scaling parameters s1 and s2 along orthogonal directions defined by the

angular displacement θ. 2D Geometric Transformations 43
 General 2D Scaling Directions
(cont.)
 
General procedure:
1. Rotate so that directions coincides with x and y
axes
2. Apply scaling transformation
3. Rotate back
 The composite matrix:
  2 2
¿𝑠 1 cos Θ+𝑠2 sin Θ ( 𝑠2 − 𝑠1 ) cosΘ sin Θ 0
−1

[
𝑅 ( Θ ) ∗𝑆 ( 𝑠1 ,𝑠 2 ) ∗ 𝑅 ( Θ )= ¿ ( 𝑠 − 𝑠 ) cos Θsin Θ 𝑠 sin2 Θ+𝑠 cos2 Θ 0
2 1 1 2
¿0                                             0         1
2D Geometric Transformations 44
]
2D Composite Transformations
(cont.)
 Matrix Concatenation Properties:
 Matrix multiplication is associative !
 M3· M2· M1= (M3· M2 ) · M1 = M3· ( M2 · M1 )
 A composite matrix can be created by multiplicating left-
to-right (premultiplication) or right-to-left
(postmultiplication)
 Matrix multiplication is not commutative !
 M2 · M1 ≠ M1 · M2

2D Geometric Transformations 45
2D Composite Transformations
(cont.)
 Matrix Concatenation Properties:
 But:
 Two successive rotations
 Two successive translations
 Two successive scalings
 are commutative!
 Why?
 Proof: You got it: Up to you  

2D Geometric Transformations 46
 Reversing the order

in which a sequence of transformations is performed may affect the transformed

position of an object.
In (a), an object is first translated in the x direction, then rotated counterclockwise
through an angle of 45°.
In (b), the object is first rotated 45° counterclockwise, then translated in the x
direction
2D Geometric Transformations 47
Other 2D Transformations

 Reflection
 Transformation that produces a mirror image of an
object

2D Geometric Transformations 48
Other 2D Transformations (cont.)
 Reflection
 Image is generated relative to an axis of reflection
by rotating the object 180° about the reflection
axis
 Reflection about the line y=0 (the x axis) (previous
slide)
1 0 0
0  1 0 
 
0 0 1
2D Geometric Transformations 49
Other 2D Transformations (cont.)

 Reflection
 Reflection about the line x=0 (the y axis)

  1 0 0
 0 1 0
 
 0 0 1

2D Geometric Transformations 50
Other 2D Transformations (cont.)
 Reflection about the origin

 
¿ − 10 0
[ ] ¿ 0 −1 0
¿ 00 1

2D Geometric Transformations 51
Other 2D Transformations (cont.)

 Reflection about the line y=x

 
¿010
[ ] ¿100
¿001

2D Geometric Transformations 52
Other 2D Transformations (cont.)

 Reflection about the line y=-x

 
¿0− 10
[ ] ¿− 100
¿0        01

2D Geometric Transformations 53
Other 2D Transformations (cont.)

 Shear
 Transformation that distorts the shape of an object
such that the transformed shape appears as the
object was composed of internal layers that had
been caused to slide over each other
y y

(2,1) (3,1)
(0,1) (1,1)

(0,0) (1,0) (1,0)

x (0,0) x
shx=2
2D Geometric Transformations 54
Other 2D Transformations (cont.)
 Shear
 An x-direction shear relative to the x axis
1 shx 0 x'  x  shx  y
0 1 0
 y'  y
0 0 1
 An y-direction shear relative to the y axis
 1 0 0
 sh 1 0
 y
 0 0 1 2D Geometric Transformations 55
Other 2D Transformations (cont.)
 Shear
 x-direction shear relative to other reference lines
1 shx  shx * yref 
0 1 0 
 
0 0 1 

x'  x  shx *  y  yref 

y'  y
2D Geometric Transformations 56
Example

A unit square (a) is transformed to a shifted parallelogram

(b) with shx = 0.5 and yref = −1 in the shear matrix from Slide 56
2D Geometric Transformations 57
Other 2D Transformations (cont.)
 Shear
 y-direction shear relative to the line x = xref
 1 0  0
 sh 
1  shy * xref 
 y
 0 0 1 

x'  x
y '  x  shy *  x  xref 
2D Geometric Transformations 58
 Example

A unit square (a) is turned into a shifted parallelogram

(b) with parameter values shy = 0.5 and xref = −1 in the y -direction shearing
transformation from Slide 58
2D Geometric Transformations 59
Raster Methods for
Transformations and OpenGL
 This slide is intentionally left blank
 Your responsibility to fill it 

2D Geometric Transformations 60
Transformation Between
Coordinate Systems

 Individual objects may be defined in their

local cartesian reference system.
 The local coordinates must be transformed

to position the objects within the scene

coordinate system.

2D Geometric Transformations 61
Transformation Between
Coordinate Systems
Steps for coordinate transformation
1. Translate so that the origin (x0, y0 ) of the
x′-y′ system is moved to the origin of the
x-y system.
2.Rotate the x′ axis on to the axis x.

2D Geometric Transformations 62
Transformation Between
Coordinate Systems (cont.)

x′
y'
y0 θ

0 x0 x

2D Geometric Transformations 63
Transformation Between
Coordinate Systems (cont.)

y0

x′
y′
θ
0 x0 x

2D Geometric Transformations 64
Transformation Between
Coordinate Systems (cont.)

y0

y′

0 x′ x0 x

2D Geometric Transformations 65
Transformation Between
Coordinate Systems (cont.)
 

¿10−𝑥 0
𝐓(− 𝑥 0 ,− 𝑦 0 )= ¿01− 𝑦 0
¿001 [ ]
2D Geometric Transformations 66
Transformation Between
Coordinate Systems (cont.)

An alternative method:
-Specify a vector V that indicates the direction
for the positive y′ axis. Let
 
𝐕
𝐯= =(𝑣 𝑥 ,𝑣 𝑦 )
|𝐕 |
-Obtain the unit vector u=(ux ,u y) along the x′
axis by rotating v 900 clockwise.
2D Geometric Transformations 67
Transformation Between
Coordinate Systems (cont.)
 Elements of any rotation matrix can be
expressed as elements of orthogonal unit
vectors. That is, the rotation matrix can be
written as
 
¿ 𝑢𝑥 𝑢 𝑦 0

[ ]
𝐑= ¿ 𝑣 𝑥 𝑣 𝑦 0
¿001
2D Geometric Transformations 68
Transformation Between
Coordinate Systems (cont.)

y
x′
y′
y0

0 x0 x

2D Geometric Transformations 69
OpenGL Geometric
Transformation Functions
 A separate function is available for each of the
basic geometric transformations
AND
 All transformations are specified in three

dimensions
 Why?

 Answer: Remember; OpenGL was developed as

3D library
 But how to perform 2D transformations?

 Answer: Set z = 0
2D Geometric Transformations 70
Basic OpenGL Geometric
Transformations
 Translation
 glTranslate* (tx, ty, tz);
 * is either f or d
 tx, ty and tz are any real number
 For 2D, set tz=0.0
 Rotation
 glRotate* (theta, vx, vy, vz);
 * is either f or d
 theta is rotation angle in degrees (internally converted to
radian)
 Vector v=(vx, vy, vz) defines the orientation for a rotation axis
that passes through the coordinate origin
 For 2D, set vz=1.0 and vx=vy=0.0

2D Geometric Transformations 71
Basic OpenGL Geometric
Transformations (cont.)
 Scaling
 glScale* (sx, sy, sz);
 * is either f or d
 sx, sy and sz are any real number
 Negative values generate reflection
 Zero values can cause error because inverse matrix
cannot be calculated

 All routines construct a 4x4 transformation

matrix
 OpenGL uses composite matrices
 Be careful with the order
2D Geometric Transformations 72
OpenGL Matrix Operations

 glMatrixMode(.);
 Projection Mode: Determines how the scene is
projected onto the screen
 Modelview Mode: Used for storing and combining
geometric transformations
 Texture Mode: Used for mapping texture patterns
to surfaces
 Color Mode: Used to convert from one color mode
to another

2D Geometric Transformations 73
OpenGL Matrix Operations

 Modelview matrix, used to store and combine

geometric transformations
 glMatrixMode(GL_MODELVIEW);
 A call to a transformation routine generates a
matrix that is multiplied by the current matrix
 To assign the identity matrix to the current
matrix
 glLoadIdentity();

2D Geometric Transformations 74
OpenGL Matrix Operations
(cont.)
 Alternatively:
 glLoadMatrix* (elements16);
 To assign other values to the elements of the
current matrix
 In column-major order:
 First four elements in first column
 Second four elements in second column
 Third four elements in third column
 Fourth four elements in fourth column

2D Geometric Transformations 75
OpenGL Matrix Operations
(cont.)
 Concatenating a specified matrix with current
matrix:
 glMultMatrix* (otherElements16);
 Current matrix is postmultiplied (right-to-left) by
the specified matrix

 Warning:
 Matrix notation mjk means:
 In OpenGL: j  column, k  row
 In mathematics: j  row, k  column
2D Geometric Transformations 76
OpenGL Matrix Stacks
 OpenGL maintains a matrix stack for
transformations
 Initially the modelview stack contains only the
identity matrix
 More about it:
 Coming soon

2D Geometric Transformations 77
 OpenGL Transformation Routines

 For example, assume we want to do in the following

order:
 translate by +2, -3, +4,
 rotate by 450 around axis formed between origin and 1, 1, 1
 scale with respect to the origin by 2 in each direction.
 Our code would be
glMatrixMode(GL_MODELVIEW);
glLoadIdentity(); //start with identity
glScalef(2.0,2.0,2.0); //Note: Start with the LAST operation
glRotatef(45.0,1.0,1.0,1.0);
glTranslatef(2.0,-3.0, 4.0); //End with the FIRST operation

2D Geometric Transformations 78
OpenGL Transformation Functions

2D Geometric Transformations 79
 Next Lecture

3D Geometric Transformations

80
 References
 Donald Hearn, M. Pauline Baker, Warren R.
Carithers, “Computer Graphics with OpenGL, 4th
Edition”; Pearson, 2011
 Sumanta Guha, “Computer Graphics Through
OpenGL: From Theory to Experiments”, CRC Press,
2010
 Edward Angel, “Interactive Computer Graphics. A
Top-Down Approach Using OpenGL”, Addison-
Wesley, 2005

81