![Page 1: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/1.jpg)
1
Chapter 4
2-D Transformations
Cartesian coordinates Linear transformations, affine transformations Homogeneous coordinates Translations Scaling Rotation Reflection Combinations of transformations Animations
![Page 2: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/2.jpg)
2
Cartesian coordinates A 2D point is represented by a 2-tuple .
For convenience, the 2-tuple often written as (x, y).
A 2-tuple can also be interpreted as a vector. The 2-tuple defines the direction and length of the vector, but not the position.
y
x
y
x
(x, y)
y
x
(x, y)
![Page 3: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/3.jpg)
3
Translation A translation moves a point to a new position by adding a
displacement vector to it.
Eg, The following translates the point to
yxy
xTyyTxx
T
T
y
x
y
x
' ,' .
'
'
6
4
13
3
7
7
13
3
7
7
(3,13)
(7,7)
6
4
![Page 4: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/4.jpg)
4
Linear Transformations A linear transformation moves a point to a new position
by multiplying it with a non-singular matrix.
Eg, The following transforms the point (2, 3) to (3, 13)
dycxybyaxxy
x
dc
ba
y
x
' ,' .
'
'
3
2
32
10
13
3
(3,13)
32
10
(2,3)
A non-singular matrix, M, has the inverse M-1 such that MM-1 =M-1M= I. It denotes an one-to-one mapping.
![Page 5: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/5.jpg)
5
Affine Transformations
An affine transformation is a linear transformation followed by a translation. Its 2D general form is
y
x
T
T
y
x
dc
ba
y
x
'
'
Affine transformations preserve lines. Many geometric movements of objects, eg,
translations, rotations, and scalings are affine transformations.
![Page 6: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/6.jpg)
Homogeneous coordinates A point in homogeneous coordinates (x, y, w), w ≠ 0,
corresponds to the 2D point (x/w, y/w) in Cartesian coordinates.
Conceive that the Cartesian coordinates axes lies on the plane of w = 1. The intersection of the plane and the line connecting the origin and (x, y, w) gives the corresponding Cartesian coordinates.
y
w
xw = 0
(x, y, w)
w = 1
(x/w, y/w, 1)
x
y
![Page 7: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/7.jpg)
7
For example, both the points (6, 9, 3) and (4, 6, 2) in the homogeneous coordinates corresponds to (2, 3) in the Cartesian coordinates.
Conversely, the point (2, 1) of the Cartesian corresponds to (2, 1, 1), (4, 2, 2) or (6, 3, 3) of the homogeneous
Homogeneous coordinates are used in many graphics systems because all practical transformations can be expressed as matrix multiplications. Such uniformity enhances efficiency.
![Page 8: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/8.jpg)
8
Translationmove an object to a new position
The coord. of the new position: x’ = x + 2, y’ = y + 1
In general, x’ = x + Tx, y’ = y + Ty In homogeneous coordinates
(1,1)(5,1)
(1,3) (x,y)
(3,2)(7,2)
(3,4) (x’, y’)
1
2
7
1
1
5
100
110
201
Eg, .
100
10
01
'
'
'
w
y
x
T
T
w
y
x
y
x
![Page 9: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/9.jpg)
9
Scaling relative to the origin (changing size)
The new position: x’ = 2x, y’ = y/2In general, x’ = Sx x, y’ = Sy y
In homogeneous coordinates
(1,1)(5,1)
(1,3) (x,y)
(2,1/2)(10,1/2)
(2,3/2)
(x’, y’)
1
2
1
3
1
100
00
002
Eg, .
100
00
00
'
'
'
23
21
w
y
x
S
S
w
y
x
y
x
![Page 10: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/10.jpg)
10
Rotation about the origin
In Cartesian, x’ = r cos(+)
= r cos cos r sin sin= x cos - y sin y’ = r sin(+)
= r sin cos + r cos sin= x sin + y cos
(x,y)
(x’,y’)
r
r
x=r cos
The angle, , is measured from the original vector to the new one in counterclockwise.
The parameters of sin() and cos() are provided in radians.
radians is 180o.
![Page 11: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/11.jpg)
11
Eg, to rotate 45o (/4 radian)
sin /4 = cos /4 = 0.7071
x’ = x cos - y sin = 0.7071 (x - y)
y’ = x sin + y cos = 0.7071 (x + y) In homogeneous coordinates
(1,1)(5,1)
(1,3) (x,y)
(0,1.4)
(2.8, 4.2)
(-1.4, 2.8)
(x’, y’)
1
2.4
8.2
1
1
5
100
0707.707.
0707.707.
Eg, .
100
0cossin
0sincos
'
'
'
w
y
x
w
y
x
![Page 12: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/12.jpg)
Conduct a sequence of transformationsTranslate the right-angle vertex
to the origin (Tx = -1, Ty = -1)
Rotate 45o (/4 radian)
sin /4 = cos /4 = 0.7071
(1,1)(5,1)
(1,3)
(2.8,2.8)(-1.4,1.4)
(0,0) (4,0)
(0,2)
.
100
10
01
'
'
'
w
y
x
T
T
w
y
x
y
x
'
'
'
100
0cossin
0sincos
"
"
"
w
y
x
w
y
x
![Page 13: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/13.jpg)
13
100
cossincossin
sincossincos
100
10
01
100
0cossin
0sincos
'
'
'
100
0cossin
0sincos
"
"
"
w
y
x
TT
TT
w
y
x
T
T
w
y
x
w
y
x
yx
yx
y
x
The computation of [ ] from [ ] [ ] is called matrix multiplication. The general form is:
A sequence of transformations can be lumped in a single matrix via matrix multiplications
dhcfdgce
bhafbgae
hg
fe
dc
ba
![Page 14: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/14.jpg)
14
In OpenGL, all the model transformations are accumulated in the current transformation matrix (CTM). All vertices of an object will be transformed via this matrix before the object is drawn.
A system stack is provided for storing the backup copies of the CTM during execution.
We usually save the CTM in the stack before the drawing of a transformed object. And restore the original CTM afterwards.
CTM
Vertices Vertices
***
***
***
Stack
![Page 15: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/15.jpg)
15
To save a copy of the CTM in the stack glPushMatrix();
CTM
Vertices Vertices
***
***
***
Stack
***
***
***
. . .
CTM
Vertices Vertices
***
***
***
Stack
***
***
***
***
***
***
. . .
(before)
(after)
![Page 16: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/16.jpg)
16
To overwrite the CTM with the top matrix in the stack
glPopMatrix();
***
***
***
CTM
Vertices Vertices
Stack
***
***
***
. . .
***
***
***
***
***
***
CTM
Vertices Vertices
Stack
***
***
***
. . .
(before)
(after)
![Page 17: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/17.jpg)
17
To specify a translation glTranslatef( double Tx, double Ty, 0.0)
The system first generates the matrix representing the translation. Then post multiplies this matrix with the CTM. Finally overwrites the CTM with the result.
***
***
***
CTM
Vertices Vertices
***
***
***
CTM
Vertices Vertices
100
10
01
Ty
Tx
Before
After
![Page 18: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/18.jpg)
18
Example
//draw a white head at (0,0) glColor3f( 1.0, 1.0, 1.0);
draw_head();
//draw a green head at (-2,-1) glColor3f( 0.0, 1.0, 0.0); glPushMatrix();
glTranslatef( -2.0, -1.0, 0.0);draw_head();
glPopMatrix();
glColor3f( 1.0, 1.0, 1.0); //draw a title hkgluBitMapString( -1.9, 1.8, "Translation of (-2, -
1)” );
Progressive Translation
![Page 19: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/19.jpg)
19
To specify a scaling glScalef( double Sx, double Sy, 1.0)
Generate a matrix for the
scaling. Post multiply it with
the CTM
//Scale by Sx = 1.5, Sy = 2 glPushMatrix();
glScalef( 1.5, 2.0, 1.0);draw_head();
glPopMatrix();
In general, an object moves away from the origin when scaled up, moves towards when scaled down
Progressive Scaling
![Page 20: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/20.jpg)
20
To specify a rotation glRotatef( double degree, 0.0, 0.0, 1.0)
glPushMatrix(); glRotatef( 45.0, 0.0, 0.0, 1.0); draw_head(); glPopMatrix();
(Note that the angles provided
to gl functions are expressed in
degrees instead of radians.)
Progressive Rotation
![Page 21: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/21.jpg)
First to scale( Sx =1.5, Sy =2) and then translate the picture to (-2, -1).
Note that the transformations are specified in reverse order: first call glTranslatef(...), and then glScalef(…)
z
y
x
Sy
Sx
T
T
z
y
x
T
T
w
y
x
z
y
x
Sy
Sx
w
y
x
y
x
y
x
100
00
00
100
10
01
'
'
'
100
10
01
"
"
"
100
00
00
'
'
'
***
***
***
CTM
Vertices Vertices
100
10
01
Ty
Tx
100
00
00
Sy
Sx
![Page 22: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/22.jpg)
22
The program
glPushMatrix(); glTranslatef( -2.0, -1.0, 0.0); glScalef( 1.5, 2.0, 1.0); draw_head(); glPopMatrix();
Progressive (Scaling + Translation)
![Page 23: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/23.jpg)
23
Scaling relative to a fix point
//Scaling relative to the //apex of the nose at (xf, yf)glPushMatrix(); glTranslatef( xf, yf, 0.0); glScalef( sx, sy, 1); glTranslatef( -xf, -yf, 0); draw_head();glPopMatrix();
(xf, yf)
Scaling relative to a fix point
![Page 24: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/24.jpg)
24
Rotation about a pivot point
//Rotate 90 degree about //the apex of the noseglPushMatrix(); glTranslatef( xf, yf, 0.0); glRotatef( 90., 0.0, 0.0, 1.0); glTranslatef( -xf, -yf, 0); draw_head();glPopMatrix();
(xf, yf)
Rotation about a pivot point
![Page 25: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/25.jpg)
25
Reflection about the x axis
The transformation matrix is the same as scaling matrix with Sx = 1 and Sy = 1. Thus, the reflection about the x axis can be achieved by calling
glScalef( 1.0, -1.0, 1.0)
Similarly, the reflection about the y axis is achieved by calling
glScalef( -1.0, 1.0, 1.0)
.
100
010
001
'
'
'
w
y
x
w
y
x
(x,y)
(x,-y)
![Page 26: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/26.jpg)
26
Example
glPushMatrix(); glScalef( 1, -1, 1); draw_head(); glPopMatrix();
Reflection about x-axis
![Page 27: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/27.jpg)
27
Reflection along a lineTranslate (0, -b) so that the line
passes through the originRotate the line onto the x axis by -o
Reflect about the x axisBackward rotatebackward translate
(Be reminded that these operations must be specified in reverse order.)
y =mx+b
)(tan 1 m
b
![Page 28: Chapter 4 2 - D Transformations Cartesian coordinates](https://reader035.vdocument.in/reader035/viewer/2022081419/56813ac7550346895da2dd0c/html5/thumbnails/28.jpg)
28
// To draw the reflection of the head about y = 2x + 0.5// (we need to convert theta from radians to degrees)double m = 2.0, b = .5, theta = atan(m)*180.0/3.1416;
glPushMatrix(); glTranslatef( 0, b, 0.); glRotatef( theta, 0.0, 0.0, 1.0);
glScalef( 1, -1, 1); //Reflect
glRotatef( -theta, 0.0, 0.0, 1.0); glTranslatef( 0, -b, 0.); draw_head();glPopMatrix();
Reflection against an arbitrary line