CG&IP - Module 2

MODULE 2
2D and 3D graphics with OpenGL: 2D Geometric Transformations: Basic 2D Geometric
Transformations, matrix representations and homogeneous coordinates, 2D Composite
transformations, other 2D transformations, raster methods for geometric transformations,
OpenGL raster transformations, OpenGL geometric transformations function,

3D Geometric Transformations: Translation, rotation, scaling, composite 3D

transformations, other 3D transformations, OpenGL geometric transformations functions

Two-Dimensional Geometric Transformations

Operations that are applied to the geometric description of an object to change its position,
orientation, or size are called geometric transformations.

2.2.1 Basic Two-Dimensional Geometric Transformations

The geometric-transformation functions that are available in all graphics packages are those for
translation, rotation, and scaling.

Two-Dimensional Translation
We perform a translation on a single coordinate point by adding offsets to its coordinates so as
to generate a new coordinate position.
We are moving the original point position along a straight-line path to its new location.

To translate a two-dimensional position, we add translation distances tx and ty to the original

coordinates (x, y) to obtain the new coordinate position (x’, y’) as shown in Figure

The translation values of x’ and y’ is calculated as

The translation distance pair (tx, ty) is called a translation vector or shift vector.
Column vector representation is given as

1
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

This allows us to write the two-dimensional translation equations in the matrix Form

Translation is a rigid-body transformation that moves objects without deformation.

Pseudocode:
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 ( );

}
Example:

2
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

3
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

Two-Dimensional Rotation

We generate a rotation transformation of an object by specifying a rotation axis and a

rotation angle. A two-dimensional rotation of an object is obtained by repositioning the object

along a circular path in the xy plane. In this case, we are rotating the object about a rotation axis
that is perpendicular to the xy plane (parallel to the coordinate z axis).

Parameters for the two-dimensional rotation are the rotation angle θ and a position (xr, yr), called
the rotation point (or pivot point), about which the object is to be rotated

A positive value for the angle θ defines a counterclockwise rotation about the pivot point, as in
above Figure , and a negative value rotates objects in the clockwise direction.
The angular and coordinate relationships of the original and transformed point positions are
shown in the 2nd figure shown above. In this figure, r is the constant distance of the point from
the origin, angle φ is the original angular position of the point from the horizontal, and θ is the
rotation angle.
we can express the transformed coordinates in terms of angles θ and φ as

4
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

The original coordinates of the point in polar coordinates are

Substituting expressions of x and y in the equations of x’ and y’ we get

We can write the rotation equations in the matrix form

P’ = R· P

Where the rotation matrix is,

Rotation of a point about an arbitrary pivot position is illustrated in Figure

The transformation equations for rotation of a point about any specified rotation position

(xr , yr ):

Code:
class wcPt2D {
public: GLfloat x, y;

};
5
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

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 Rotation of a Point Example

Formula:
To rotate a point (x, y) around the origin by an angle θ, the new coordinates (x', y') are given by:
x' = x cos(θ) - y sin(θ)
y' = x sin(θ) + y cos(θ)

Example:
Let's consider a point P with coordinates (3, 4) and rotate this point by θ = 30°.

Conversion to Radians:
First, we need to convert the angle from degrees to radians because the trigonometric functions in most
programming languages use radians. The conversion formula is:
θ_radians = θ_degrees * (π / 180)

For θ = 30°:
θ_radians = 30 * (π / 180) = π / 6

Cosine and Sine Values:

Next, calculate the cosine and sine of the angle:
cos(π / 6) = √3 / 2 ≈ 0.866
sin(π / 6) = 1 / 2 = 0.5

Applying the Formulas:

Using the rotation formulas:

6
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
x' = x cos(π / 6) - y sin(π / 6)
y' = x sin(π / 6) + y cos(π / 6)

Substituting the values:

x' = 3 * 0.866 - 4 * 0.5 = 3 * 0.866 - 2 = 2.598 - 2 = 0.598
y' = 3 * 0.5 + 4 * 0.866 = 1.5 + 3.464 = 4.964

Answer:
The new coordinates of the point P' after rotating (3, 4) by 30° are approximately (0.598, 4.964).

Example 2
Let's consider a triangle with vertices A(1, 2), B(3, 4), and C(5, 6) and rotate this triangle by θ = 45°.

Conversion to Radians:
First, we need to convert the angle from degrees to radians because the trigonometric functions in most
programming languages use radians. The conversion formula is:
θ_radians = θ_degrees * (π / 180)
For θ = 45°:
θ_radians = 45 * (π / 180) = π / 4

Cosine and Sine Values:

Next, calculate the cosine and sine of the angle:
cos(π / 4) = √2 / 2 ≈ 0.707
sin(π / 4) = √2 / 2 ≈ 0.707

Applying the Formulas:

Using the rotation formulas for each vertex:

Vertex A:
x1' = x1 cos(π / 4) - y1 sin(π / 4)
y1' = x1 sin(π / 4) + y1 cos(π / 4)
Substituting the values:
x1' = 1 * 0.707 - 2 * 0.707 = 0.707 - 1.414 = -0.707
y1' = 1 * 0.707 + 2 * 0.707 = 0.707 + 1.414 = 2.121
A'(-0.707, 2.121)

Vertex B:
x2' = x2 cos(π / 4) - y2 sin(π / 4)
y2' = x2 sin(π / 4) + y2 cos(π / 4)
Substituting the values:
x2' = 3 * 0.707 - 4 * 0.707 = 2.121 - 2.828 = -0.707
y2' = 3 * 0.707 + 4 * 0.707 = 2.121 + 2.828 = 4.949
B'(-0.707, 4.949)

Vertex C:
x3' = x3 cos(π / 4) - y3 sin(π / 4)
y3' = x3 sin(π / 4) + y3 cos(π / 4)
Substituting the values:
x3' = 5 * 0.707 - 6 * 0.707 = 3.535 - 4.242 = -0.707
y3' = 5 * 0.707 + 6 * 0.707 = 3.535 + 4.242 = 7.778
C'(-0.707, 7.778)

7
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
Answer:
The new coordinates of the vertices after rotating the triangle A(1, 2), B(3, 4), and C(5, 6) by 45° are
approximately:
A'(-0.707, 2.121)
B'(-0.707, 4.949)
C'(-0.707, 7.778)

Two-Dimensional Scaling

To alter the size of an object, we apply a scaling transformation.

A simple two dimensional scaling operation is performed by multiplying object positions

(x, y) by scaling factors sx and sy to produce the transformed coordinates (x’, y’):

The basic two-dimensional scaling equations can also be written in the following matrix form

Where S is the 2 × 2 scaling matrix

Any positive values can be assigned to the scaling factors sx and sy.

Values less than 1 reduce the size of objects, Values greater than 1 produce enlargements.

Specifying a value of 1 for both sx and sy leaves the size of objects unchanged.

When sx and sy are assigned the same value, a uniform scaling is produced, which maintains
relative object proportions. Unequal values for sx and sy result in a differential scaling that
is often used in design applications.

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.
Figure below illustrates scaling of a line by assigning the value 0.5 to both sx and sy

8
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
We can control the location of a scaled object by choosing a position, called the fixed point, that
is to remain unchanged after the scaling transformation.
Coordinates for the fixed point, (xf , yf ), are often chosen at some object position, such as its
centroid but any other spatial position can be selected.
For a coordinate position (x, y), the scaled coordinates (x’, y’) are then calculated from the
following relationships:

We can rewrite Equations to separate the multiplicative and additive terms as

Where the additive terms x f (1 − sx) and yf (1 − sy) are constants for all points in the object.

Code:
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 < nVerts; 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 < nVerts; k++)

glVertex2f (vertsNew [k].x, vertsNew [k].y);

glEnd ( );

Matrix Representations

9
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

Each of the three basic two-dimensional transformations (translation, rotation, and scaling)
can be expressed in the general matrix form

With coordinate positions P and P’ represented as column vectors.

Matrix M1 is a 2 × 2 array containing multiplicative factors, and M2 is a two-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.

Homogeneous Coordinates
Multiplicative and translational terms for a two-dimensional geometric transformation can be
combined into a single matrix if we expand the representations to 3 × 3 matrices
We can use the third column of a transformation matrix for the translation terms, and all
transformation equations can be expressed as matrix multiplications.
We also need to expand the matrix representation for a two-dimensional coordinate position to a
three-element column matrix
A standard technique for accomplishing this is to expand each two dimensional coordinate-
position representation (x, y) to a three-element representation (xh, yh, h), called homogeneous
coordinates, where the homogeneous parameter h is a nonzero value such that

A general two-dimensional homogeneous coordinate representation could also be written as

(h· x, h· y, h).
A convenient choice is simply to set h = 1. Each two-dimensional position is then represented
with homogeneous coordinates (x, y, 1).
The term homogeneous coordinates are used in mathematics to refer to the effect of this
representation on Cartesian equations.

Two-Dimensional Translation Matrix

The homogeneous-coordinate for translation is given by

This translation operation can be written in the abbreviated form with

T(tx, ty) as the 3 × 3 translation matrix

10
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
Two-Dimensional Rotation Matrix

Two-dimensional rotation transformation equations about the coordinate origin can be

expressed in the matrix form

The rotation transformation operator R(θ ) is the 3 × 3 matrix with rotation parameter θ.

Two-Dimensional Scaling Matrix

A scaling transformation relative to the coordinate origin can now be expressed as the matrix
multiplication

The scaling operator S(sx, sy ) is the 3 × 3 matrix with parameters sx and sy

2.2.3 Inverse Transformations

For translation, we obtain the inverse matrix by negating the translation distances. Thus, if we
have two-dimensional translation distances tx and ty, the inverse translation matrix is

An inverse rotation is accomplished by replacing the rotation angle by its negative.

A two-dimensional rotation through an angle θ about the coordinate origin has the inverse
transformation matrix

11
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
We form the inverse matrix for any scaling transformation by replacing the scaling parameters
with their reciprocals. the inverse transformation matrix is

2.2.4 Two-Dimensional Composite Transformations

Forming products of transformation matrices is often referred to as a concatenation, or
composition, of matrices if we want to apply two transformations to point position P, the
transformed location would be calculated as

The coordinate position is transformed using the composite matrix M, rather than applying the
individual transformations M1 and thenM2.

Composite Two-Dimensional Translations

If two successive translation vectors (t1x, t1y) and (t2x, t2y) are applied to a two dimensional
coordinate position P, the final transformed location P’ is calculated as

where P and P’ are represented as three-element, homogeneous-coordinate column vectors

Also, the composite transformation matrix for this sequence of translations is

Composite Two-Dimensional Rotations

Two successive rotations applied to a point P produce the transformed position

12
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
By multiplying the two rotation matrices, we can verify that two successive rotations are
additive:

R(θ2) · R(θ1) = R(θ1 + θ2)

So that the final rotated coordinates of a point can be calculated with the composite rotation
matrix as
P’ = R(θ1 + θ2) · P

Composite Two-Dimensional Scalings

Concatenating transformation matrices for two successive scaling operations in two dimensions
produces the following composite scaling matrix

General Two-Dimensional Pivot-Point Rotation

We can generate a two-dimensional rotation about any other pivot point (xr , yr ) by performing
the following sequence of translate-rotate-translate operations:
1. Translate the object so that the pivot-point position is moved to the coordinate origin.

2. Rotate the object about the coordinate origin.

3. Translate the object so that the pivot point is returned to its original position.

The composite transformation matrix for this sequence is obtained with the concatenation

13
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

which can be expressed in the form

where T(−xr , −yr ) = T−1(xr , yr ).

Hence the formula to calculate new x and y coordinates:

x’=x cos(θ) − y sin(θ) + xr × (1−cos(θ)) + yr sin(θ)

y’=x sin(θ) + ycos(θ) + yr × (1−cos(θ)) − xr sin(θ)

Example
Rotate a triangle with vertices p[3][2] = {{-50, -50}, {50, -50}, {0, 50}}. Pivot points and rotation angle is given as
xp=50, yp=50 and t=30.

Calculate the new coordinates of the vertices after rotation

Given:
Vertices of the triangle: P1(-50, -50), P2(50, -50), P3(0, 50)
Pivot point: (xp, yp) = (50, 50)
Rotation angle: θ = 30°

Required:
New coordinates of the vertices P1', P2', and P3' after the rotation

14
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
Formula:
To rotate a point (x, y) around a pivot point (xp, yp) by an angle θ, the new coordinates (x', y') are given
by:
x' = xp + (x - xp) cos θ - (y - yp) sin θ
y' = yp + (x - xp) sin θ + (y - yp) cos θ

Conversion to Radians:
First, we need to convert the angle from degrees to radians because the trigonometric functions in most
programming languages use radians. The conversion formula is:
θ_radians = θ_degrees * (π / 180)

For θ = 30°:
θ_radians = 30 * (π / 180) = π / 6 ≈ 0.5236 radians

Cosine and Sine Values:

Next, calculate the cosine and sine of the angle:
cos(30°) = cos(π / 6) ≈ 0.866
sin(30°) = sin(π / 6) = 0.5

Applying the Formulas for Each Vertex:

Vertex P1:
Original coordinates: P1(-50, -50)
x'1 = 50 + (-50 - 50) cos(30°) - (-50 - 50) sin(30°)
y'1 = 50 + (-50 - 50) sin(30°) + (-50 - 50) cos(30°)
Substituting the values:
x'1 = 50 + (-100 * 0.866) - (-100 * 0.5)
y'1 = 50 + (-100 * 0.5) + (-100 * 0.866)
x'1 = 50 - 86.6 + 50 = 13.4
y'1 = 50 - 50 - 86.6 = -86.6

Vertex P2:
Original coordinates: P2(50, -50)
x'2 = 50 + (50 - 50) cos(30°) - (-50 - 50) sin(30°)
y'2 = 50 + (50 - 50) sin(30°) + (-50 - 50) cos(30°)
Substituting the values:
x'2 = 50 + (0) - (-100 * 0.5)
y'2 = 50 + (0) + (-100 * 0.866)
x'2 = 50 + 50 = 100
y'2 = 50 - 86.6 = -36.6

Vertex P3:
Original coordinates: P3(0, 50)
x'3 = 50 + (0 - 50) cos(30°) - (50 - 50) sin(30°)
y'3 = 50 + (0 - 50) sin(30°) + (50 - 50) cos(30°)
Substituting the values:
x'3 = 50 + (-50 * 0.866) - (0)
y'3 = 50 + (-50 * 0.5) + (0)
x'3 = 50 - 43.3 = 6.7
y'3 = 50 - 25 = 25

15
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
Answer:
The new coordinates of the vertices after rotating the triangle P1(-50, -50), P2(50, -50), and P3(0, 50) by
30° are approximately:
P1' ≈ (13.4, -86.6)
P2' ≈ (100, -36.6)
P3' ≈ (6.7, 25)

Deciding the pivot point for rotation depends on the specific requirements of your application or
the effect you want to achieve with the rotation. Here are some considerations:

1. Center of Mass or Center of Geometry:

o If you want the object to rotate around its own center, you can calculate the center
of mass (centroid) or the geometric center (average of vertices) of the object. This
ensures balanced and natural-looking rotations.
o Example: For a triangle with vertices at (-50, -50), (50, -50), and (0, 50), the center
(centroid) can be calculated as (0, -16.67).
2. User-Defined Pivot Point:
o You can allow the user to specify a pivot point interactively. This gives flexibility,
allowing rotations around any point within the scene.
o Example: Letting the user click on the screen to set the pivot point where they
want the object to rotate around.
3. Fixed Reference Point:
o Sometimes rotations are based on a fixed reference point in the scene, not
necessarily related to the object itself.
o Example: Rotating a satellite around the Earth (where the Earth's center is the
fixed point).
4. Outside the Object:
o You can choose to rotate an object around a point outside of it. This is less
common for typical transformations but can be used for specific effects or
animations.
o Example: Simulating a planet orbiting around the Sun (where the Sun's center is
outside of the planet).
5. Origin (0, 0):
o Rotating around the origin (0, 0) is common and simplifies calculations because it
aligns with the coordinate system's natural axis.
o Example: Basic transformations in mathematical operations often use the origin as
the pivot point.

Choosing the pivot point ultimately depends on your specific application's requirements. For
natural-looking rotations, especially when dealing with geometric shapes, rotating around the
object's center or centroid is often preferred.

16
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

General Two-Dimensional Fixed-Point Scaling

To produce a two-dimensional scaling with respect to a selected fixed position (x f , yf ), when

we have a function that can scale relative to the coordinate origin only. This sequence is
1. Translate the object so that the fixed point coincides with the coordinate origin.

2. Scale the object with respect to the coordinate origin.

3. Use the inverse of the translation in step (1) to return the object to its original position.

Concatenating the matrices for these three operations produces the required scaling matrix:

General Two-Dimensional Scaling Directions

Parameters sx and sy scale objects along the x and y directions.

We can scale an object in other directions by rotating the object to align the desired scaling
directions with the coordinate axes before applying the scaling transformation.
Suppose we want to apply scaling factors with values specified by parameters s1 and s2 in the
directions shown in Figure

17
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

The composite matrix resulting from the product of these three transformations is

Matrix Concatenation Properties

Property 1:

Multiplication of matrices is associative.

For any three matrices,M1,M2, andM3, the matrix product M3 · M2 · M1 can be performed by
first multiplying M3 and M2 or by first multiplyingM2 and M1:
M3 · M2 · M1 = (M3 · M2) · M1 = M3 · (M2 · M1)

We can construct a composite matrix either by multiplying from left to right (pre
multiplying) or by multiplying from right to left (post multiplying)

Property 2:
Transformation products, on the other hand, may not be commutative. The matrix
productM2 · M1 is not equal toM1 · M2, in general.

This means that if we want to translate and rotate an object, we must be careful about the order
in which the composite matrix is evaluated

18
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
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.

General Two-Dimensional Composite Transformations and Computational Efficiency

A two-dimensional transformation, representing any combination of translations,

rotations, and scalings, can be expressed as

The four elements are the multiplicative rotation-scaling terms in the transformation, which
involve only rotation angles and scaling factors if an object is to be scaled and rotated about its
centroid coordinates (xc , yc ) and then translated, the values for the elements of the composite
transformation matrix are

Although the above matrix requires nine multiplications and six additions, the explicit
calculations for the transformed coordinates are

We need actually perform only four multiplications and four additions to transform
coordinate positions.
Because rotation calculations require trigonometric evaluations and several multiplications
for each transformed point, computational efficiency can become an important consideration in
rotation transformations
If we are rotating in small angular steps about the origin, for instance, we can set cos θ to

1.0 and reduce transformation calculations at each step to two multiplications and two additions
for each set of coordinates to be rotated.
These rotation calculations are

x’= x − y sin θ, y’ = x sin θ + y

Two-Dimensional Rigid-Body Transformation

19
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
If a transformation matrix includes only translation and rotation parameters, it is a rigid- body
transformation matrix.
The general form for a two-dimensional rigid-body transformation matrix is

where the four elements r jk are the multiplicative rotation terms, and the elements trx

and try are the translational terms. A rigid-body change in coordinate position is also sometimes
referred to as a rigid- motion transformation. In addition, the above matrix has the property
that its upper-left 2 × 2 submatrix is an orthogonal matrix.

If we consider each row (or each column) of the submatrix as a vector, then the two row vectors
(rxx, rxy) and (ryx, ryy) (or the two column vectors) form an orthogonal set of unit vectors.
Such a set of vectors is also referred to as an orthonormal vector set. Each vector has unit length
as follows

and the vectors are perpendicular (their dot product is 0):

Therefore, if these unit vectors are transformed by the rotation submatrix, then the vector (rxx,
rxy) is converted to a unit vector along the x axis and the vector (ryx, ryy) is transformed into a
unit vector along the y axis of the coordinate system

For example, the following rigid-body transformation first rotates an object through an angle θ
about a pivot point (xr , yr ) and then translates the object

Here, orthogonal unit vectors in the upper-left 2×2 submatrix are (cos θ, −sin θ) and (sin

θ, cos θ).

20
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

Constructing Two-Dimensional Rotation Matrices

The orthogonal property of rotation matrices is useful for constructing the matrix when we
know the final orientation of an object, rather than the amount of angular rotation necessary to
put the object into that position.
We might want to rotate an object to align its axis of symmetry with the viewing (camera)
direction, or we might want to rotate one object so that it is above another object.
Figure shows an object that is to be aligned with the unit direction vectors u_ and v

The rotation matrix for revolving an object from position (a) to position (b) can be constructed
with the values of the unit orientation vectors u’ and v’ relative to the original orientation.

Prove Additive Nature of Successive Translation and Rotation, and Multiplicative Nature
of Successive Scaling in 2D Transformations
In 2D transformations, successive translations and rotations are additive, while successive scaling are
multiplicative. Below are the proofs for these properties.

Additive Nature of Successive Translations and Rotations

i) Translation:
Successive translations are additive. Let's consider two translations:
1. Translation by (T1_x, T1_y)
2. Translation by (T2_x, T2_y)

21
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
If we translate a point P(x, y) first by (T1_x, T1_y) and then by (T2_x, T2_y), the new position P' can be
computed as follows:

1. After the first translation:

P1(x', y') = (x + T1_x, y + T1_y)
2. After the second translation:
P2(x'', y'') = (x' + T2_x, y' + T2_y) = (x + T1_x + T2_x, y + T1_y + T2_y)

Hence, the combined translation is:

(x'', y'') = (x + (T1_x + T2_x), y + (T1_y + T2_y))
This shows that successive translations are additive.

ii) Rotation:
Successive rotations are also additive. Let's consider two rotations:
1. Rotation by θ1
2. Rotation by θ2

If we rotate a point P(x, y) first by θ1 and then by θ2, the new position P' can be computed as follows:

1. After the first rotation:

[ x' ] = [ cos θ1 -sin θ1 ] [ x ]

[ y' ] = [ sin θ1 cos θ1 ] [ y ]

2. After the second rotation:

[ x'' ] = [ cos θ2 -sin θ2 ] [ x' ]

[ y'' ] = [ sin θ2 cos θ2 ] [ y' ]

Substituting the first rotation into the second:

[ x'' ] = [ cos θ2 -sin θ2 ] [ cos θ1 -sin θ1 ] [ x ]

[ y'' ] = [ sin θ2 cos θ2 ] [ sin θ1 cos θ1 ] [ y ]

Multiplying the two rotation matrices gives:

[ cos θ2 -sin θ2 ] [ cos θ1 -sin θ1 ]

[ sin θ2 cos θ2 ] [ sin θ1 cos θ1 ]

= [ cos (θ1 + θ2) -sin (θ1 + θ2) ]

[ sin (θ1 + θ2) cos (θ1 + θ2) ]

Therefore:

[ x'' ] = [ cos (θ1 + θ2) -sin (θ1 + θ2) ] [ x ]

[ y'' ] = [ sin (θ1 + θ2) cos (θ1 + θ2) ] [ y ]

22
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

This shows that successive rotations are additive.

Multiplicative Nature of Successive Scalings

Successive scalings are multiplicative. Let's consider two scalings:
1. Scaling by S1
2. Scaling by S2

If we scale a point P(x, y) first by S1 and then by S2, the new position P' can be computed as follows:

1. After the first scaling:

P1(x', y') = (x · S1_x, y · S1_y)

2. After the second scaling:

P2(x'', y'') = (x' · S2_x, y' · S2_y) = (x · S1_x · S2_x, y · S1_y · S2_y)

Hence, the combined scaling is:

(x'', y'') = (x · (S1_x · S2_x), y · (S1_y · S2_y))

This shows that successive scalings are multiplicative.

Summary:
In 2D transformations: Successive Translations: Additive.
Successive Rotations: Additive.
Successive Scalings: Multiplicative.

These properties can be confirmed by applying the transformations to points or using matrix
multiplication for composite transformations.

Other Two-Dimensional Transformations

Two such transformations

1. Reflection and

2. Shear.

Reflection

A transformation that produces a mirror image of an object is called a reflection. For a two-
dimensional reflection, this 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) is accomplished with the transformation Matrix

23
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

This transformation retains x values, but “flips” the y values of coordinate positions. The resulting
orientation of an object after it has been reflected about the x axis is shown in Figure

A reflection about the line x = 0 (the y axis) flips x coordinates while keeping y

coordinates the same. The matrix for this transformation is

Figure below illustrates the change in position of an object that has been reflected about the
line x = 0.

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 the matrix
representation for this reflection is

24
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

An example of reflection about the origin is shown in Figure

If we choose the reflection axis as the diagonal line y = x (Figure below), the reflection matrix is

To obtain a transformation matrix for reflection about the diagonal y = −x, we could concatenate
matrices for the transformation sequence:
(1) clockwise rotation by 45◦,

(2) reflection about the y axis, and

(3) counterclockwise rotation by 45◦.

The resulting transformation matrix is

25
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

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. An x-direction shear relative to the x axis is produced with the transformation
Matrix

which transforms coordinate positions as

Any real number can be assigned to the shear parameter shx . Setting parameter shx to the value
2, for example, changes the square into a parallelogram is shown below. Negative values for shx
shift coordinate positions to the left.

A unit square (a) is converted to a parallelogram (b) using the x -direction shear with shx = 2.

We can generate x-direction shears relative to other reference lines with

Now, coordinate positions are transformed as

26
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

A y-direction shear relative to the line x = xref is generated with the transformation

Matrix

which generates the transformed coordinate values

Raster Methods for Geometric Transformations

Raster systems store picture information as color patterns in the frame buffer.

Therefore, some simple object transformations can be carried out rapidly by manipulating an
array of pixel values. Few arithmetic operations are needed, so the pixel transformations are
particularly efficient. Functions that manipulate rectangular pixel arrays are called raster
operations and moving a block of pixel values from one position to another is termed a block
transfer, a bitblt, or a pixblt.
Figure below illustrates a two-dimensional translation implemented as a block transfer of

a refresh-buffer area

Translating an object from screen position (a) to the destination position shown in (b) by moving
a rectangular block of pixel values. Coordinate positions Pmin and Pmax specify the limits of the
rectangular block to be moved, and P0 is the destination reference position.

27
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
Rotations in 90-degree increments are accomplished easily by rearranging the elements of a
pixel array. We can rotate a two-dimensional object or pattern 90◦ counterclockwise by
reversing the pixel values in each row of the array, then interchanging rows and columns.

A 180◦ rotation is obtained by reversing the order of the elements in each row of the array, then
reversing the order of the rows.
Figure below demonstrates the array manipulations that can be used to rotate a pixel

block by 90◦ and by 180◦.

For array rotations that are not multiples of 90◦, we need to do some extra processing.

The general procedure is illustrated in Figure below.

Each destination pixel area is mapped onto the rotated array and the amount of overlap with the
rotated pixel areas is calculated. A color for a destination pixel can then be computed by
averaging the colors of the overlapped source pixels, weighted by their percentage of area
overlap. Pixel areas in the original block are scaled, using specified values for sx and sy, and then
mapped onto a set of destination pixels. The color of each destination pixel is then assigned
according to its area of overlap with the scaled pixel areas

28
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

OpenGL Functions for Two-Dimensional Geometric Transformations

To perform a translation, we invoke the translation routine and set the components for the three-
dimensional translation vector. In the rotation function, we specify the angle and the orientation
for a rotation axis that intersects the coordinate origin. In addition, a scaling function is used to
set the three coordinate scaling factors relative to the coordinate origin. In each case, the
transformation routine sets up a 4 × 4 matrix that is applied to the coordinates of objects that are
referenced after the transformation call

Basic OpenGL Geometric Transformations

A 4× 4 translation matrix is constructed with the following routine:

glTranslate* (tx, ty, tz);

Translation parameters tx, ty, and tz can be assigned any real-number values, and the single
suffix code to be affixed to this function is either f (float) or d (double).
For two-dimensional applications, we set tz = 0.0; and a two-dimensional position is represented
as a four-element column matrix with the z component equal to 0.0.
example: glTranslatef (25.0, -10.0, 0.0);

Similarly, a 4 × 4 rotation matrix is generated with

glRotate* (theta, vx, vy, vz);

where the vector v = (vx, vy, vz) can have any floating-point values for its components. This
vector defines the orientation for a rotation axis that passes through the coordinate origin. If v
is not specified as a unit vector, then it is normalized automatically before the elements of the
rotation matrix are computed.
The suffix code can be either f or d, and parameter theta is to be assigned a rotation angle in
degree.
For example, the statement: glRotatef (90.0, 0.0, 0.0, 1.0);

We obtain a 4 × 4 scaling matrix with respect to the coordinate origin with the following routine:
glScale* (sx, sy, sz);

The suffix code is again either f or d, and the scaling parameters can be assigned any real-number
values. Scaling in a two-dimensional system involves changes in the x and y dimensions, so a
typical two-dimensional scaling operation has a z scaling factor of 1.0
Example: glScalef (2.0, -3.0, 1.0);

OpenGL Matrix Operations

29
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
• In OpenGL, matrix stacks are used to manage and apply transformations to objects and scenes in
a hierarchical manner.
• There are several types of matrices and corresponding matrix stacks in OpenGL, each serving a
specific purpose in the rendering pipeline.
• These matrices include the modelview matrix, projection matrix, and texture matrix.

In OpenGL, there are several matrix stacks used for different purposes. The glMatrixMode() function sets
the current matrix mode, meaning it defines which matrix stack will be affected by subsequent matrix
operations such as glLoadIdentity(), glTranslatef(), glRotatef(), and glScalef().

Matrix Modes

OpenGL provides different matrix modes, each associated with a specific type of transformation:

1. GL_MODELVIEW:
o This mode is used for modeling and viewing transformations. It is used to define the
camera's position and orientation, as well as to position and orient objects within the scene.
o Commonly used for transformations that affect the position, rotation, and scale of objects.
2. GL_PROJECTION:
o This mode is used to define the projection transformation, which determines how objects
are projected onto the screen (e.g., perspective or orthographic projection).
o It affects how the 3D scene is mapped to the 2D screen.
3. GL_TEXTURE:
o This mode is used for texture transformations, which can modify how textures are applied
to objects.
4. GL_COLOR:
o This mode is used for color matrix transformations (less commonly used in basic OpenGL).

OpenGL uses several matrix modes to handle different types of transformations and projections in 3D
graphics rendering. These modes define how transformations are applied to objects in the scene. Here are
the primary matrix modes in OpenGL:

Matrix Modes in Detail

GL_MODELVIEW

The GL_MODELVIEW matrix mode is used for modeling and viewing transformations. This mode combines
the model transformation (which positions and orients objects) and the view transformation (which
positions and orients the camera).

 Purpose:
o To transform object coordinates to eye coordinates.
o To apply transformations like translation, rotation, and scaling to objects.
 Typical Usage:
o Setting up the camera's position and orientation.
o Positioning, orienting, and scaling objects in the scene.

glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
gluLookAt(0.0, 0.0, 5.0, // Camera position

30
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
0.0, 0.0, 0.0, // Look-at point
0.0, 1.0, 0.0); // Up vector
glTranslatef(0.0f, 0.0f, -5.0f);
glRotatef(45.0f, 1.0f, 0.0f, 0.0f);

GL_PROJECTION

The GL_PROJECTION matrix mode is used for projection transformations. This mode defines how the 3D
world is projected onto the 2D screen.

 Purpose:
o To define the viewing volume.
o To apply perspective or orthographic projections.
 Typical Usage:
o Setting up perspective projection (mimicking the human eye).
o Setting up orthographic projection (parallel projection).
 Example:

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45.0, // Field of view
1.33, // Aspect ratio
1.0, // Near clipping plane
100.0);// Far clipping plane

GL_TEXTURE

The GL_TEXTURE matrix mode is used for texture transformations. This mode allows you to apply
transformations to texture coordinates.

 Purpose:
o To manipulate how textures are applied to surfaces.
o To apply texture translations, rotations, and scaling.
 Typical Usage:
o Animating textures.
o Aligning textures on surfaces.
 Example:

glMatrixMode(GL_TEXTURE);

glLoadIdentity();

glScalef(2.0f, 2.0f, 1.0f); // Scale texture coordinates

glTranslatef(0.5f, 0.5f, 0.0f); // Move texture coordinates

31
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
GL_COLOR

The GL_COLOR matrix mode is used for color transformations. This mode is less commonly used and is
primarily for color matrix operations in advanced applications.

 Purpose:
o To transform color values.
o To apply effects like color scaling and biasing.
 Typical Usage:
o Advanced color manipulation.
o Special effects involving color transformations.

Matrix operation example and explanation

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(xmin, xmax, ymin, ymax);
glMatrixMode(GL_MODELVIEW);

what happens when we write the above code?

The given code snippet sets up an orthographic projection for a 2D rendering context in OpenGL. Here's a
detailed explanation of what happens at each step:

1. Set Matrix Mode to GL_PROJECTION:

o This command sets the current matrix mode to GL_PROJECTION. Subsequent matrix
operations will affect the projection matrix, which is used to define how the scene is
projected onto the screen.
2. Load Identity Matrix:
o This command replaces the current matrix with the identity matrix. The identity matrix is
a special matrix that doesn't change any vertices when applied, effectively resetting any
previous projection transformations.
3. Define Orthographic Projection:
o This function sets up a 2D orthographic projection matrix. It defines a clipping volume
where:
 xmin and xmax specify the left and right clipping planes.
 ymin and ymax specify the bottom and top clipping planes.
o This projection matrix maps objects within the specified clipping volume to normalized
device coordinates (NDC) without perspective distortion (parallel lines remain parallel).
4. Set Matrix Mode to GL_MODELVIEW:
o This command sets the current matrix mode to GL_MODELVIEW. Subsequent matrix
operations will affect the modelview matrix, which is used for modeling and viewing
transformations (i.e., positioning, scaling, and rotating objects).

What Happens in Detail

 Projection Transformation:

32
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
o The GL_PROJECTION matrix mode affects how the scene is projected onto the screen. By
setting up an orthographic projection with gluOrtho2D, you ensure that objects are drawn
with parallel projection, suitable for 2D rendering.
o The orthographic projection defined by gluOrtho2D creates a 2D coordinate system where
xmin to xmax spans the horizontal axis and ymin to ymax spans the vertical axis.
o For example, if xmin = 0, xmax = 800, ymin = 0, and ymax = 600, the coordinate system
would correspond to a window or screen size of 800x600 units.
 Identity Matrix:
o The call to glLoadIdentity ensures that any previous transformations in the projection
matrix are cleared, providing a clean slate for the new orthographic projection defined by
gluOrtho2D.
 Switching Back to Modelview:
o After setting up the projection matrix, the matrix mode is switched back to
GL_MODELVIEW. This is crucial because most subsequent transformations (like
positioning and rotating objects) should affect the modelview matrix, not the projection
matrix.
o This separation ensures that projection transformations and object transformations are
handled independently.

Practical Impact

 Rendering Context:
o By setting up an orthographic projection, the rendering context is now ready for 2D
drawing operations. Any objects drawn will use the 2D coordinate system defined by xmin,
xmax, ymin, and ymax.
 2D Graphics:
o This setup is commonly used for 2D graphics, UI elements, and HUDs (Heads-Up Displays)
in games, where you want to draw without perspective distortion.
o For example, you could draw a rectangle from (0, 0) to (800, 600), and it would map directly
to the screen coordinates.

3D Transformations
Three-Dimensional Geometric Transformations
• Methods for geometric transformations in three dimensions are extended from two dimensional
methods by including considerations for the z coordinate.

• A three-dimensional position, expressed in homogeneous coordinates, is represented as a four-

element column vector

Three-Dimensional Translation
 A position P = (x, y, z) in three-dimensional space is translated to a location P’= (x’, y’,
z’) by adding translation distances tx, ty, and tz to the Cartesian coordinates of P:

33
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

 We can express these three-dimensional translation operations in matrix form

or

 Moving a coordinate position with translation vector T = (tx , ty , tz ) .

 Shifting the position of a three-dimensional object using translation vector T.

CODE:
typedef GLfloat Matrix4x4 [4][4]; /* Construct the 4 x 4
identity matrix. */ void matrix4x4SetIdentity (Matrix4x4
matIdent4x4)
{
GLint row, col; for (row = 0; row < 4; row++)
for (col = 0; col < 4 ; col++) matIdent4x4
[row][col] = (row == col);
}

34
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
void translate3D (GLfloat tx, GLfloat ty, GLfloat tz)
{
Matrix4x4 matTransl3D;
/* Initialize translation matrix to identity. */ matrix4x4SetIdentity
(matTransl3D); matTransl3D [0][3] = tx; matTransl3D [1][3] = ty;
matTransl3D [2][3] = tz;
}

An inverse of a three-dimensional translation matrix is obtained by negating the

translation distances tx, ty, and tz

Three-Dimensional Rotation
 By convention, positive rotation angles produce counterclockwise rotations about a coordinate
axis.
 Positive rotations about a coordinate axis are counterclockwise, when looking along the positive
half of the axis toward the origin.

Three-Dimensional Coordinate-Axis Rotations Along z axis:

 In homogeneous-coordinate form, the three-dimensional z-axis rotation equations are

 Transformation equations for rotations about the other two coordinate axes can be obtained with
a cyclic permutation of the coordinate parameters x, y, and z
x → y→ z→ x

35
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
Along x axis

Along y axis

An inverse three-dimensional rotation matrix is obtained in the same by replacing θ with −θ.

General Three-Dimensional Rotations

A rotation matrix for any axis that does not coincide with a coordinate axis can be set up as a
composite transformation involving combinations of translations and the coordinateaxis rotations
the following transformation sequence is used:

1. Translate the object so that the rotation axis coincides with the parallel coordinate axis.
2. Perform the specified rotation about that axis.
3. Translate the object so that the rotation axis is moved back to its original position.

Three-Dimensional Scaling
 The matrix expression for the three-dimensional scaling transformation of a position P =
(x, y, z) is given by

36
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2

 The three-dimensional scaling transformation for a point position can be represented as

where scaling parameters sx, sy, and sz are assigned any positive values.

 Explicit expressions for the scaling transformation relative to the origin are

 Because some graphics packages provide only a routine that scales relative to the coordinate origin,
we can always construct a scaling transformation with respect to any
selected fixed position (xf , yf , zf ) using the following transformation sequence:
1. Translate the fixed point to the origin.
2. Apply the scaling transformation relative to the coordinate origin
3. Translate the fixed point back to its original position.
 This sequence of transformations is demonstrated

CODE:
class wcPt3D

37
Dr. Sudhamani M J, Associate Professor, Dept of CSE
CG&IP - Module 2
{ private: GLfloat x, y, z;
public:
/* Default Constructor:
* Initialize position as (0.0, 0.0, 0.0).
*/ wcPt3D ( ) { x = y = z = 0.0;
}
setCoords (GLfloat xCoord, GLfloat yCoord, GLfloat zCoord) { x = xCoord; y = yCoord;
z = zCoord;
}
GLfloat getx ( ) const { return x;
}
GLfloat gety ( ) const { return y;
}
GLfloat getz ( ) const { return z;
}
};
typedef float Matrix4x4 [4][4];
void scale3D (GLfloat sx, GLfloat sy, GLfloat sz, wcPt3D fixedPt)
{
Matrix4x4 matScale3D;
/* Initialize scaling matrix to identity. */ matrix4x4SetIdentity
(matScale3D); matScale3D [0][0] = sx;
matScale3D [0][3] = (1 - sx) * fixedPt.getx ( ); matScale3D [1][1] = sy;
matScale3D [1][3] = (1 - sy) * fixedPt.gety ( ); matScale3D [2][2] = sz;
matScale3D [2][3] = (1 - sz) * fixedPt.getz ( );

38
Dr. Sudhamani M J, Associate Professor, Dept of CSE