Computer Graphics: Lecture #6 2D Geometric Transformations
Computer Graphics: Lecture #6 2D Geometric Transformations
Computer Graphics
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
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
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;
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;
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;
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
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 Geometric Transformations 27
Inverse Transformations (cont.)
And also:
1
R *R I
2D Geometric Transformations 28
Inverse Transformations (cont.)
Is that true?
Proof: It’s up to2Dyou
Geometric Transformations 29
Inverse Transformations (cont.)
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
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
2D Geometric Transformations 32
2D Composite Transformations
(cont.)
Composite 2D Rotations
P ' R (1 2 ) P
2D Geometric Transformations 33
2D Composite Transformations
(cont.)
Composite 2D Scaling
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
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
[
𝑅 ( Θ ) ∗𝑆 ( 𝑠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
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.)
¿010
[ ] ¿100
¿001
2D Geometric Transformations 52
Other 2D Transformations (cont.)
¿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)
x' x
y ' x shy * x xref
2D Geometric Transformations 58
Example
2D Geometric Transformations 60
Transformation Between
Coordinate Systems
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?
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
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
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
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