2D and 3D Geometric Transformation
2D and 3D Geometric Transformation
OVERVIEW
Point P defined as P ( x, y ),
translate to Point P( x, y) a distance d x parallel to x axis, d y parallel to y axis.
x = x + d x y = y + d y
Define the column vec tors P’
x x d x
P = , P = , T =
y
P
y dy
Now
P = P + T
2D Scaling from the origin.
Point P defined as P ( x, y ),
Perform a scale (stretch) to Point P( x, y) by a factor s x along the x axis,
and s y along the y axis.
x = s x . x, y = s y . y
Define the matrix P’
sx 0 P
S=
0 s y
Now
x s x 0 x
P = S P or y = 0 .
s y y
2D Rotation about the origin.
P’(x’,y’)
P(x,y)
r
r
x
2D Rotation about the origin.
P’(x’,y’)
r
P(x,y) x = r. cos
y = r. sin
y
r
x
x
2D Rotation about the origin.
P’(x’,y’)
P(x,y)
r x = r. cos
y = r. sin
y
r
x
x
2D Rotation about the origin.
x = r. cos( + ) = r. cos . cos − r. sin . sin
y = r. sin( + ) = r. cos . sin + r. sin . cos
Substituting for r :
x = r. cos
y = r. sin
Gives us :
x = x. cos − y. sin
y = x. sin + y. cos
2D Rotation about the origin.
x = x. cos − y. sin
y = x. sin + y. cos
cos − sin
Define the matrix R = , P = R P
sin cos
Transformations.
• Translation.
• P=T + P
• Scale
• P=S P
• Rotation
• P=R P
• We would like all transformations to be multiplications so we can
concatenate them express points in homogenous coordinates.
Homogeneous coordinates
• Many graphics applications involve sequences of geometric
transformations.
• An animation might require an object to be translated and rotated at
each increment of the motion.
• In design and picture construction applications, we perform
translation, rotation, and scaling to fit the picture components into
their proper positions.
Homogeneous coordinates
• Each of the three basic two-dimensional transformations (translation, rotation,
and scaling) can be expressed in the general matrix form
P’ = M1 · P + M2
sx 0
S (sx , s y ) =
s y
Recall the (x,y) form of Scale :
0
sx 0 0
In homogeneous coordinates :
S ( s x , s y ) = 0 sy 0
0 0 1
OR
Homogeneous form of rotation
Similarly, two-dimensional rotation transformation equations about the coordinate
origin can be expressed in the matrix form
x cos − sin 0 x
y = sin cos
0 . y
1 0 0 1 1
OR
Inverse Transformations
TRANSLATION
• 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
sx = -1 sy = 1 original
sx = -1 sy = -1 sx = 1 sy = -1
Other Transformations
• Reflection
which transforms
coordinate positions as
Shear Contd…
P
min
P0
OpenGL Raster Transformations
• A translation of a rectangular array of pixel-color values from one buffer
area to another can be accomplished in OpenGL as the following copy
operation:
glCopyPixels (xmin, ymin, width, height, GL_COLOR);
• First four parameters in this function give the location and dimensions of
the pixel block.
• And the OpenGL symbolic constant GL COLOR specifies that it is color
values are to be copied.
• glReadPixels
• glDrawPixels
OpenGL Functions for Two-Dimensional Geometric
Transformations
Video
Video Note:
Convenient to think of display as
Being left-handed !!
x ( z into the screen )
z (out of page)
3D 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:
x'=x+tx, y'=y+ty , z'=z+tz ,
The formula illustrates three-dimensional translation.
• We can express the 3D translation operations in matrix form.
• But now the coordinate positions, P and P' are represented in homogeneous
coordinates with four- element column matrices , and the translation operator T is a
4X4 matrix.
Three-Dimensional Rotation
• We can rotate an object about any axis in space, but the easiest rotation axes
to handle are those that are parallel to the Cartesian-coordinate axes.
• Also, we can use combinations of coordinate-axis rotations to specify a
rotation about any other line in space.
• Lets us first consider the operations involved in coordinate-axis rotations, then
we discuss the calculations needed for other rotation axes.
• By convention, positive rotation angles produce counter-clockwise rotations
about a coordinate axis. cos − sin 0 0
sin cos 0 0
• Need to specify which axis the rotation is about.
R z ( ) =
• z-axis rotation is the same as the 2D case. 0 0 1 0
0 0 0 1
Rotation
• Rotation around the coordinate axes
Rotation Contd..,
• A rotation axis can be defined with two coordinate positions or with one
coordinate point and direction cosines between the rotation axis and
two of the coordinate axes.
• We assume that the rotation axis is defined by two point, as illustrated
in the figure -initial position, and that the direction of rotation is to be
counter-clockwise when looking along the axis from P2 to P1.
Rotation about an arbitrary axis
• The components of the rotation –axis vector are then computed as:
• Where the components a, b, and c are the direction cosines for the
rotation axis:
Rotation about an arbitrary axis
• The first step in the rotation sequence is to set up the translation matrix that
repositions the rotation axis so that it passes through the coordinate origin.
• The translation matrix is:
• Next, we formulate the transformations that will put the rotation axis(i.e., u
vector) onto the z-axis.
Rotation about an arbitrary axis
FIRST STEP OF ROTATION:
Rotation about ‘x’ by ‘α’. Now we have to determine ‘α’
Project the unit vector u׳, along OP, into the YZ plane.
The y and z components, b and c are the direction cosines of the unit vector along the arbitrary
axis.
Rotation about an arbitrary axis. Contd..,
• It can be seen from the diagram, by using Right Angle triangle formula we get,
Hence we establish the transformation matrix for rotation around the x-axis by determining
the values for the sine and cosine of the rotation angle necessary to get OP (the vector u)
onto the ‘xz’ plane.
Rotation about an arbitrary axis. Contd..
• Now that we have determined the values for cosα and sineα in terms of the components
of vector ‘u’ (OP), we can set up the matrix elements for rotation of this vector about the
x-axis and into the xz plane.
Rotation about an arbitrary axis. Contd..,
After first step rotation:
Next step in the formulation of the transformation sequence is to determine the matrix that
will swing the unit vector in the xz plane counter-clockwise around the y-axis onto the positive z-axis.
The above figure shows the orientation of the unit vector in the xz plane, resulting from the
rotation about the x-axis.
This vector, labelled u'', has the value a for its x component, because rotation about x-axis leaves the x
component unchanged. Its z component is d (the magnitude of u'),because vector u' has been rotated
on to the z-axis. Also the y component of u'' is 0.
Rotation about an arbitrary axis. Contd..,
• Rotation by ‘β’ about y-axis.
• Now we have to determine ‘β’. Steps is similar to that done for ‘α’.
• Now we need to calculate cosine and sine for the angle ‘β’.
Rotation about an arbitrary axis. Contd..,
• Therefore, the transformation matrix for rotation of u’’ about the y axis is
• With transformation matrices of , and , we have aligned the rotation axis with
the positive z axis.
Rotation about an arbitrary axis. Contd..,
• To complete the required rotation about the given axis, we need to transform the
rotation axis back to its original position.
• This is done by applying the inverse of transformations.
• The transformation matrix for rotation about an arbitrary axis can then be expressed
as the composition of these seven individual transformations:
Scaling
• Change the coordinates of the object by scaling factors.
Scaling an object with this transformation will also move its position relative to the origin
- so move it to the origin, scale it, then move it back...
Scaling with respect to a Fixed Point
Scaling with respect to a Fixed Point
Reflection
• Reflection over planes, lines or points
Shear
• Deform the shape depending on another dimension
OpenGL 3D transformations
• Basic OpenGL Geometric Transformation
• OpenGL Matrix Operations
• OpenGL Matrix Stacks
OpenGL 3D transformations
• In the core library of OpenGL, a separate function is available for each of the basic
geometric transformations.
• OpenGL is designed as a 3D graphics API, where all transformations are specified in
three dimensions.
• Internally all coordinate positions are represented as four-element column vectors
• All transformations are represented using 4X4 matrices.
• Performing 2D transformations within OpenGL is generally just a matter of using a
value for the transformations in the third(z) dimension that cause no change in that
dimension.
OpenGL 3D transformations: glTranslate*()
We can assign values to the elements of the current matrix, and there are two
functions in the OpenGL library for this purpose.
1. Initializing the matrix to I: Matrices are specified in
glLoadIdentity(); column-major order:
2. Alternatively, we can assign other values to m[0] m[4] m[8]m[12]
m[1] m[5] m[9] m[13]
the elements of the current matrix using M=
Replace the matrix with elements16 : m[2] m[6] m[10] m[14]
• glLoadMatrix*(elements16); m[3] m[7] m[11] m[15]
glRotatef (90.0, 0.0, 0.0, 1.0); //Set 90-deg. rotation about z axis.
glRecti (50, 100, 200, 150); //Display red, rotated rectangle.
glLoadIdentity ( ); // Reset current matrix to identity.
With the following function, we copy the current matrix at the top of the
active stack and store that copy in the second stack position:
glPushMatrix():
• This gives us duplicate matrices at the top two positions of the
stack.
Copy
Composite Matrix
of LI
Load
Idetity Load Identity Load Identity Load Identity
OpenGL 3D Transformations : glPopMatrix()
Load Identity
150
100
Translated Original Position
Position
50
Original Position
Original Position
50
50
Rotated Position
15010050 50100150200
15010050 50100150200
Example Program
glMatrixMode (GL_MODELVIEW);
glMatrixMode (GL_MODELVIEW); glColor3f (0.0, 0.0, 1.0);
glColor3f (0.0, 0.0, 1.0); glPushMatrix() //Make copy of Identity (top) matrix
glRecti (50, 100, 200, 150); // Display blue rectangle. glRecti (50, 100, 200, 150); // Display blue rectangle.
glLoadIdentity(); // Reset current matrix to identity.
glColor3f (1.0, 0.0, 0.0); glColor3f (1.0, 0.0, 0.0);
glTranslatef (-200.0, -50.0, 0.0); // Set translation parameters. glTranslatef (-200.0, -50.0, 0.0); // Set translation parameters.
glRecti (50, 100, 200, 150);// Display red, translated rectangle. glRecti (50, 100, 200, 150); // Display red, translated rectangle.
glPopMatrix(); //Throw away the Translation matrix
glLoadIdentity ( );//Reset current matrix to identity. glPushMatrix(); //Make copy of Identity (top) matrix
glRotatef (90.0, 0.0, 0.0, 1.0); //Set 90-deg. rotation about z
axis. glRotatef (90.0, 0.0, 0.0, 1.0); //Set 90-deg. rotation about z axis.
glRecti (50, 100, 200, 150); //Display red, rotated rectangle. glRecti (50, 100, 200, 150); //Display red, rotated rectangle.
glPopMatrix(); //Throw away the rotation matrix
glLoadIdentity ( ); // Reset current matrix to identity.
glScalef (-0.5, 1.0, 1.0); // Set scale-reflection parameters. glScalef (-0.5, 1.0, 1.0); // Set scale-reflection parameters.
glRecti (50, 100, 200, 150); // Display red, transformed glRecti (50, 100, 200, 150); // Display red, transformed rectangle.
rectangle.
Example 2
glPushMatrix(); //Create Matrix1 on the top
glTranslated(100,0,0); //Apply translation to matrix1
drawSphere(); //Draws a sphere with translation<100,0,0)
glPushMatrix(); //Clones matrix 1 to create matrix 2 and push it on the
top
glScaled(2,2,2); //Scales matrix2; doesn’t touch matrix 1
drawSphere(); //Draws a sphere with both translation and scale
glPopMatrix(); //Deletes matrix2 ;matrix1 becomes the top
drawSphere(); //same as the first sphere
glPopMatrix(); //deletes matrix1
Function Description
glTranslate* Specifies translation parameters.
glRotate* Specifies parameters for rotation about any axis
through the origin.
glScale* Specifies scaling parameters with respect to
coordinate origin.
glMatrixMode Specifies current matrix for geometric-viewing
transformations, projection transformations.
glLoadIdentity Sets current matrix to identity.
glLoadMatrix* (elems); Sets elements of current matrix.
glMultMatrix* (elems); Post multiplies the current matrix by the
specified matrix.
Copy the top matrix in the stack and store copy in the
glPushMatrix second stack position.
Erase top matrix in the stack and move second matrix
glPopMatrix to top of stack.
Thank You
Affine Transformations