Post on 30-Dec-2015
TWO DIMENSIONAL GEOMETRİC
TRANSFORMATİONS
CA 302 Computer Graphics and Visual Programming
Aydın Öztürk
aydin.ozturk@ege.edu.trhttp://www.ube.ege.edu.tr/~ozturk
Two Dimensional Geometric Transformations
Basic Transformations
Translation
P
P'
x
yyx tyytxx ','
y
x
t
t
y
x
y
xTP'P ,
'
',
TPP'
Basic Transformations
Translation: Example
P
P'
x
y
1
1,
2
1TP
3
2
1
1
2
1TPP'
1 2
3
2
Basic Transformations
Rotation
x
y
y)(x,P θ
φ
)('
)('
rSiny
rCosx
)(),( rSinyrCosx
)()('
)()('
yCosxSiny
ySinxCosx
P′=(x′,y′)
r
Rotation (Cont.)
R.PP'
y
x
y
x
CosSin
SinCos
CosSin
SinCosR
'
'
Basic Transformations
Basic Transformations
Rotation:Example
x
y
(1,2)y)(x,P θ
φ
P′=(x′,y′)=(0.36, 2,23)
r
23.2
36.0
2
1
2/32/1
2/12/3
'
'
2/32/1
2/12/3
2
1
2/1)(2/3,30
y
x
R
y
x
SinCoso
CosSin
SinCos
Scaling
yx syysxx .',.'
PSP
'
.0
0
'
'
y
x
s
s
y
x
y
x
x
y
Basic Transformations
Scaling
2
1.
30
02
'
''
y
xPSP
x
y
Basic Transformations
2
1
3,2
y
x
ss yx
3x3 Matrix Representations
We can combine the multiplicative and translational terms for 2D transformations into a single matrix representation by expanding the 2x2 matrix representations to 3x3 matrices.
This allows us to express all transformation equations as matrix multiplications.
Homogeneous Coordinates
We represent each Cartesian coordinate position (x,y) with the homogeneous coordinate triple
where
),,( hyx hh
hy
yhx
x hh ,
Homogeneous Coordinates(cont.)
Thus, a general homogeneous coordinate representation can also be written as
For 2D transformations we choose h=1.
Each 2D position is represented with
homogeneous coordinates
),.,.( hyhxh
)1,,( yx
Translation in homogeneous coordinates
1
.
100
10
01
1
'
'
y
x
t
t
y
x
y
x
PTP ),(' yx tt
Basic Transformations
Translation: Example
P
P'
x
y
1 2
3
2
0
3
2
0
2
1
.
100
110
101
1
'
'
' y
x
P
PTP ),(' yx tt
1
1
1
1
,
1
2
1
y
x
t
t
TP
Rotation in homogeneous coordinates
1
.
100
0
0
1
'
'
y
x
CosSin
SinCos
y
x
PRP ).('
Rotation in homogeneous coordinates
0
23.2
36.0
1
2
1
.
100
02/32/1
02/12/3
1
'
'
y
x
P'
PRP ).('
1
2
1
1
2/1)(2/3,30
y
x
SinCoso
P
Rotation: Example
Scaling in homogeneous coordinates
1
.
100
00
00
1
'
'
y
x
s
s
y
x
y
x
PSP ).,(' yx ss
Scaling in homogeneous coordinates
1
6
2
1
2
1
.
100
030
002
1
'
'
y
x
P'
PSP ).,(' yx ss
1
2
1
1
3,2
y
x
ss yx
P
Composite Transformations:Translation
If two successive translation are applied to a point P, then the final transformed location P' is calculated as
100
10
01
100
10
01
.
100
10
01
21
21
1
1
2
2
yy
xx
y
x
y
x
tt
tt
t
t
t
t
PTPTTP ),(),(),('21211122 yyxxyxyx tttttttt
Composite Transformations:Rotation
100
0)()(
0)()(
100
0
0
.
100
0
0
2121
2121
11
11
22
22
CosSin
SinCos
CosSin
SinCos
CosSin
SinCos
PRP )(' 21
Composite Transformations:Scalings
100
00
00
100
00
00
100
00
00
21
21
1
1
2
2
yy
xx
y
x
y
x
ss
ss
s
s
s
s
),(),(),(21211122 yyxxyxyx ssssssss SSS
General Pivot Point Rotation
Steps: -Translate the object so that the pivot point
is moved to the coordinate origin. -Rotate the object about the origin. -Translate the object so that the pivot point
is returned to its original position.
General Pivot Point Rotation(Cont.)
General Pivot Point Rotation(Cont.)
100
)1(
)1(
100
10
01
.
100
1
0
.
100
10
01
SinxCosyCosSin
SinyCosxSinCos
y
x
CosSin
SinCos
y
x
rr
rr
r
r
r
r
),,(),()(),( rrrrrr yxyxyx RTRT
General Fixed Point Scaling
Steps: -Translate the object so that the fixed
point coincides with the coordinate origin. -Scale the object about the origin. -Translate the object so that the pivot
point is returned to its original position.
General Fixed Point Scaling
(xr, yr) (xr, yr)
General Fixed Point Scaling
100
)1(0
)1(0
100
10
01
.
100
00
00
.
100
10
01
yfy
xfx
f
f
y
x
f
f
sys
sxs
y
x
s
s
y
x
),,,(),(),(),( yxffffyxff ssyxyxssyx STST
Concatenation Properties
Matrix multiplication is associative
Transformation product is not commutative
)()( CBACBACBA
ABBA
Other Transformations
Reflection
About x-axis About y-axis
x
y
1
2 3
2 3
1
100
010
001
100
010
001
Other Transformations
x
y
1
2
3
2
1
3
100
010
001
Reflection about the origin
Other Transformations
Reflection about the line y=x.
x
y
2
1
3
100
001
010
y = x
2
3
Other Transformations
100
010
01xhs
Shear
x-direction shear
x
x
y
y
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.
Transformation Between Coordinate Systems
Steps for coordinate transformation
-Translate so that the origin (x0, y0 ) of the x′-y′ system is moved to the origin of the x-y system.
-Rotate the x′ axis on to the axis x.
Transformation Between Coordinate Systems
y
x
x′y'
θ
x0
y0
0
Transformation Between Coordinate Systems
y
x
x′
x0
y0
0
y′
θ
Transformation Between Coordinate Systems
y
xx′ x0
y0
0
y′
Transformation Between Coordinate Systems
),()(
100
0
0
)(
100
10
01
),(
00'',
0
0
00
yx
CosSin
SinCos
y
x
yx
yxxy
TRM
R
T
Transformation Between Coordinate Systems
y
x
x′y'
θ
x0
y0
0
4,3
30,3,2 00
yx
yx o
00.1
37.0
37.1
1
4
3
00.100.000.0
60.186.050.0
23.350.086.0
'
100
02/32/1
02/12/3
)(
100
310
201
),(
'',
00
PMP
R
T
yxxy
yx
Example
• P
Transformation Between Coordinate Systems
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.
),( yx vvVV
v
Transformation Between Coordinate Systems
-Elements of any rotation matrix can be expressed as elements of orhogonal unit vectors. That is, the rotation matrix can be written as
100
0
0
yx
yx
vv
uu
R
Transformation Between Coordinate Systems
y
x
x′y′
x0
y0
0
V
OpenGL Geometric Transformation Functions
In the OpenGL library, a separate function is available for each of the basic transformations.
All transformations are specified in 3D.
Basic OpenGL Geometric Transformations
A 4x4 transformation matrix is constructed with the following routines
glTranslate*(tx, ty, tz);
glRotate*(theta, vx, vy, vz);The vector (vx, vy, vz) defines the rotation axis that passes through the origin
glScale* (sx, sy, sz);
Basic OpenGL Geometric Transformations
Examples:
glTranslatef ( 25.0, -10.0, 0.0); glRotatef ( 90.0, 0.0, 0.0, 1.0); glScalef ( 2.0, -3.0, 0.0);
OpenGL Matrix Operations
glMatrixMode ( ..........);
has the following arguments types:
GL_PROJECTION GL_MODELVIEW
(Other two are texture and color)
OpenGL Matrix Operations
glMatrixMode (GL_PROJECTION);
designates the matrix that is to be used for projection transformation.
This transformation determines how a scene is to be projected onto the screen.
OpenGL Matrix Operations
glMatrixMode (GL_MODELVIEW);
designates the 4×4 modelview matrix as the current matrix that is to be used for the geometric transformation. In this case the matrix is referred as modelview matrix.
The OpenGL transformation routines are used to modify the modelview matrix. Which is then applied to transform coordinate positions in a scene.
OpenGL Matrix Operations
Once we are in the modelview mode, a call to a transformation routine generates a matrix that is multiplied by the current matrix.
In addition, we can assign values to the elements of the current matrix
OpenGL Matrix Operations
To assign the identity matrix to the current matrix
glLoadIdentity ( );
To assign other values to the current matrix
glLoadMatrix* ( elements16);
(The elements must be specified in colum major order that is the first four elements are listed in the first column...etc.)
OpenGL Matrix Operations
Example:
glMatixMode(GL_MODELVIEW);GLfloat elems [16];GLint k;For (k=0; k<16; k++)
elems[k]=float(k);glLoadMatrixf( elems);
OpenGL Matrix Operations
The resulting matrix:
0.150.110.73.0
0.140.100.62.0
0.130.90.51.0
0.120.80.40.0
OpenGL Matrix Operations
We can also concatenate a specified matrix with the current matrix:
glMultMatrix* ( otherElements16);
In this case the current matrix is postmultiplied by the matrix otherElements16.
Assuming the current matrix is the modelview matrix then the updated modelview matrix is computed as
M=M•M'
OpenGL Matrix Operations
Example:
glMatrixMode(GL_MODELVIEW);
glLoadIdentity( ); //Set current matrix to the identity
glMultMatrixf(elemsM2); //Postmultiply identity with M2
glMultMatrixf(elemsM1); // Postmultiply M2 with M1
OpenGL Matrix Stacs
OpenGL maintains a matrix stack.Initially each stack contains only the identity matrix.Any time during the processing of a scene, the top matrix
on each stack is called the current matrix for that mode.After we specify the viewing and geometric
transformations, the the top of the modelview matrix stack is the 4x4 composite matrix that combines the viewing and the various geometric ransformations.
OpenGL Matrix Stacs
In some cases, we may want to create multiple views and transformation sequences, and then save the composite matrix for each.
Therefore OpenGL suports a modelview stack depth of at least 32 so that at least 32 matrices can be saved modelview stack.
We can determine the number of positions available in the modelview stack with the command
GetIntegerv (GL_MAX_MODELVIEW_STACK_DEPTH, stackSize);
GetIntegerv (GL_MAX_PROJECTION_STACK_DEPTH, stackSize);
GetIntegerv (GL_MAX_TEXTURE_STACK_DEPTH, stackSize);GetIntegerv (GL_MAX_COLOR_STACK_DEPTH, stackSize);
OpenGL Matrix Stacs
To find out how many matrices are currently in the stack
GetIntegerv (GL_MODELVIEW_STACK_DEPTH, numMat);
GetIntegerv (GL_PROJECTION_STACK_DEPTH, numMat);
GetIntegerv (GL_TEXTURE_STACK_DEPTH, numMat);GetIntegerv (GL_COLOR_STACK_DEPTH, numMat);
OpenGL Matrix Stacs
We have the following commands for processing the matrices in a stack:
glPushMatrix( ); glPopMatrix( );
glPushMatrix copies the current matrix at the top of the active stack and store that copy in the second position. This gives us duplicate matrices at the top two positions of the stack.
glPopMatrix destroys the matrix at the top of the stack.
Matrix Operations: Programming example-1
Original position
Original position
Original position
Translated position
Rotated position
Scaled-Reflected position
Matrix Operations: Programming example-1
void myDisplay (void) {glColor3f(1.0, 0.0, 0.0);glRecti (100, 100, 200,150); //Display red rectangle
glColor3f(0.0, 1.0, 0.0);glTranslatef (100.0, 100.0, 0.0); //Set translation parametersglRecti (100, 100, 200,150); //Display green, translated rectangle
glColor3f(0.0, 0.0, 1.0);glLoadIdentity (); //Reset current matrix to identityglRotatef (30.0, 0.0, 0.0, 1.0); //Set 90 degree rotation about z-axisglRecti (100, 100, 200,150); //Display blue, translated rectangle
glColor3f(0.5, 0.5, 0.5);glLoadIdentity (); //Reset current matrix to identity
//Try without glLoadIdentity ();to se what happens!
glScalef (1.0, 0.5, 1.0); //Set Set scale parametersglRecti (100, 100, 200,150); glFlush (); }
Matrix Operations: Programming example-1
In the above program segment we apply each transformation one at a time.
Initially the modelview matrix is the identity matrix and the blue rectangle is displayed.
Next the current color is set to red, translation prameters are specified and red rectangle is displayed
Since we do not want to combine transformations, we next reset the current matrix to identity. Then rotation matrix is constructed and concatanated with the current matrix ( the identity matrix).
The same process is repeated once more to to display a scaled and reflected rectangle.
Matrix Operations: Programming example-2
It is more efficient to use the stack-processing functions than to use the matrix manipulating functions.
This is particularly true when we want to several changes in the viewing or geometric transformations.
In the following code we repeat the rectangle transformations of the preceeding example using stack processing instead of the glLoadIdentity function
Matrix Operations: Programming example-1void myDisplay (void) {glClear (GL_COLOR_BUFFER_BIT);glLoadIdentity ();glColor3f(1.0, 0.0, 0.0);glRecti (100, 100, 200,150); //Display red rectangle
glPushMatrix ( ); //Make copy of identity matrix.glColor3f(0.0, 1.0, 0.0);glTranslatef (100.0, 100.0, 0.0); //Set translation parametersglRecti (100, 100, 200,150); //Display green rectangle glPopMatrix ( ); //Throw away the translation matrix.
glPushMatrix ( ); //Make copy of identity (top) matrixglColor3f(0.0, 0.0, 1.0);glRotatef (30.0, 0.0, 0.0, 1.0); //Set 30 degree rotation about z-axisglRecti (100, 100, 200,150); //Display blue rectangleglPopMatrix ( ); //Throw away the rotation matrix.glColor3f(0.5, 0.5, 0.5);glScalef (1.0, 0.5, 1.0); //Set scale parametersglRecti (100, 100, 200,150); glFlush (); }