Transformasi Obyek
(Kasus 2D)
Grafika Komputer
Semester Ganjil 2008
Kompetensi
1.
Mampu membangun tool untuk
mentransformasi obyek
2.
Mampu memahami konsep transformasi affine
yang merupakan kombinasi dari rotasi,
penskalaan, dan translasi
3.
Mampu mengimplementasikan konsep
Referensi
Computer Graphics using OpenGL, 3rd
Edition, by: F.S. Hill, Jr. and Stephen M. Kelley
– Chapter 5
Computer Graphics with OpenGL, 3rd Edition,
by: Donald Hearn and M.Pauline Baker –
Chapter 5
Pokok Bahasan
1.
Transformasi 2D Dasar
1.
Translasi
2.
Rotasi
3.
Penskalaan
2.
Kombinasi Transformasi
3.
Transformasi Affine
Kegunaan Transformasi
Me-reposisi ataupun me-resize obyek
Pada proses viewing, untuk mengubah
world-coordinate menjadi display untuk suatu output device
Untuk aplikasi-aplikasi tertentu:
CAD
mengatur orientasi dan ukuran suatu komponen
pada suatu rancangan
Animasi
menggerakkan letak kamera atau obyek pada
Jenis-jenis Transformasi
Transformasi Geometri
Diterapkan pada deskripsi geometri suatu obyek
Gunanya untuk mengubah posisi, orientasi, atau ukuran suatu obyek
Transformasi modeling
Digunakan untuk membentuk sebuah layar atau membuat deskripsi
hierarki suatu obyek kompleks yang terdiri dari beberapa bagian
Contoh: pesawat terdiri dari sayap, ekor, mesin, dan lain-lain, dimana
masing-masing dapat dispesifikasikan dalam komponen-komponen level
ke-2 dan seterusnya.
Transformasi modeling mendeskripsikan bagaimana setiap komponen
2D Modeling Transformations
Scale
Rotate
Translate
Scale
Translate
x
y
Modeling
Coordinates
2D Modeling Transformations
x
y
Modeling
Coordinates
Let’s look
at this in
detail…
2D Modeling Transformations
x
y
Modeling
Coordinates
Initial location
at (0, 0) with
x- and y-axes
aligned
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale .3, .3
Rotate -90
Translate 5, 3
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale .3, .3
Rotate -90
Translate 5, 3
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale .3, .3
Rotate -90
Translate 5, 3
Transformasi Geometri 2D
Translasi 2D
x’ = x + t
x, y’ = y + t
y
(t
x, t
y) disebut vektor translasi atau pergeseran
Dalam bentuk matriks:
Persamaan translasi 2D:
P’ = P + T
Line, polygon
translasi titik endpoints, render
Untuk menghapus obyek yang asli
display it in background color before
translating it
Circle, ellipse, spline curve
translasi titik-titik yang mendefinisikan (misalnya
koordinat titik pusat), render obyek hasil translasi di posisi yang baru
y x
t
t
T
y
x
P
y
x
P
'
'
'
Transformasi Geometri 2D
Scaling 2D
x’ = x· s
x, y’ = y· s
y
Dalam bentuk matriks:
Uniform scaling
berarti skalar pengali sama untuk semua komponen:
y
x
s
s
y
x
y x0
0
'
'
2
Non-uniform scaling
: skalar yang berbeda untuk tiap
komponen:
Transformasi Geometri 2D
X 2,
Y 0.5
Transformasi Geometri 2D
Rotasi 2D
x’ = r cos (Φ + )
y’ = r sin (Φ + )
Trig Identity…
x’ = r cos(f) cos( ) – r sin(f) sin( )
y’ = r sin(f) cos( ) + r cos(f) sin( )
Original point…
x = r cos (f)
y = r sin (f)
Hasil substitusi…
x’ = x
cos
( ) - y
sin
( )
y’ = x
sin
( ) + y
cos
( )
(x, y)
(x’, y’)
r
r
y
x
y
x
cos
sin
sin
cos
'
'
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu
x
: x’ = x + sh
x
· y, y’ =
y
Parameter sh
x
dapat berupa bilangan real
Dalam bentuk matriks:
Shear pada arah y relatif terhadap sumbu
y
: x’ = x, y’ = y + sh
y
·
x
Dalam bentuk matriks:
y
x
sh
y
x
x1
0
1
'
'
y
x
sh
y
x
y1
0
1
'
'
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis
y
= 0 (sumbu
x
): x’ = x, y’ = -y
Dalam bentuk matriks:
Pencerminan terhadap garis
x
= 0 (sumbu
y
): x’ = -x, y’ = y
Dalam bentuk matriks:
Pencerminan terhadap titik pusat (0, 0): x’ = -x, y’ = -y
Dalam bentuk matriks:
y
x
y
x
1
0
0
1
'
'
y
x
y
x
1
0
0
1
'
'
y
x
y
x
1
0
0
1
'
'
Basic 2D Transformations
Translation:
x’ = x + t
x
y’ = y + t
y
Scale:
x’ = x * s
x
y’ = y * s
y
Rotation:
x’ = x*cos(θ) -
y*sin(θ)
y’ = x*sin(θ) +
y*cos(θ)
Transformations
can be combined
(with simple algebra)
Basic 2D Transformations
Translation:
x’ = x + t
x
y’ = y + t
y
Scale:
x’ = x * s
x
y’ = y * s
y
Rotation:
x’ = x*cos(θ) -
y*sin(θ)
y’ = x*sin(θ) +
y*cos(θ)
Basic 2D Transformations
Translation:
x’ = x + t
x
y’ = y + t
y
Scale:
x’ = x
* s
x
y’ = y
* s
y
Rotation:
x’ = x*cos(θ) -
y*sin(θ)
y’ = x*sin(θ) +
y*cos(θ)
x’ = x
*s
x
y’ = y
*s
y
(x,y)
(x’,y’)
Basic 2D Transformations
x’ = (x*s
x
)
*cos
θ)
-
(y*s
y
)
*sin
(
θ
)
y’ = (x*s
x
)
*sin
(θ)
+
(y*s
y
)
*cos
(θ)
(x’,y’)
Translation:
x’ = x + t
x y’ = y + t
y
Scale:
x’ = x * s
x
y’ = y * s
y
Rotation:
x’ = x
*cos(θ)
-
y
*sin(θ)
y’ = x
*sin(θ)
+
y
*cos(θ)
Basic 2D Transformations
Translation:
x’ = x
+ t
x
y’ = y
+ t
y
Scale:
x’ = x * s
x
y’ = y * s
y
Rotation:
x’ = x
*cos(θ)
-
y
*sin(θ)
y’ = x
*sin(θ)
+
y
*cos(θ)
x’ = ((x*s
x
)*cos
(θ)
- (y*s
y
)*sin
(θ)
)
+ t
x
y’ = ((x*s
x
)*sin
(θ)
+ (y*s
y
)*cos
(θ)
)
+ t
y
Basic 2D Transformations
Translation:
x’ = x + t
x
y’ = y + t
y
Scale:
x’ = x * s
x
y’ = y * s
y
Rotation:
x’ = x
*cos(θ)
-
y
*sin(θ)
y’ = x
*sin(θ)
+
y
*cos(θ)
x’ = ((x*s
x
)*cos
(θ)
- (y*s
y
)*sin
(θ)
) + t
x
y’ = ((x*s
x
)*sin
(θ)
+ (y*s
y
)*cos
(θ)
) + t
y
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
y
x
d
c
b
a
y
x
'
'
d
c
b
a
dy
cx
y
by
ax
x
'
'
Matrix Representation
Transformations combined by multiplication
y
x
l
k
j
i
h
g
f
e
d
c
b
a
y
x
'
'
Matrices are a convenient and efficient way
to represent a sequence of transformations!
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix?
2D Identity?
y
y
x
x
'
'
y
x
y
x
1
0
0
1
'
'
2D Scale around (0,0)?
y
s
y
x
s
x
x*
'
*
'
y
x
s
s
y
x
x
0
0
'
'
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix?
2D Rotate around (0,0)?
y
x
y
y
x
x
*
cos
*
sin
'
*
sin
*
cos
'
y
x
y
x
cos
sin
sin
cos
'
'
2D Shear?
y
x
sh
y
y
sh
x
x
y
x
*
'
*
'
y
x
sh
sh
y
x
x
1
1
'
'
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix?
2D Mirror about Y axis?
y
y
x
x
'
'
y
x
y
x
1
0
0
1
'
'
2D Mirror over (0,0)?
x
x
'
x
'
1
0
x
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix?
2D Translation?
y
x
t
y
y
t
x
x
'
'
Only linear 2D transformations
can be represented with a 2x2 matrix
Linear Transformations
Linear transformations are combinations of …
Scale,
Rotation,
Shear, and
Mirror
Properties of linear transformations:
Satisfies:
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)
(
)
(
)
(
s
1
p
1
s
2
p
2
s
1
T
p
1
s
2
T
p
2
T
y
x
d
c
b
a
y
x
'
'
Homogeneous Coordinates
Q: How can we represent translation as a
3x3 matrix?
y
x
t
y
y
t
x
x
'
'
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a
3-vector
1
coords
s
homogeneou
y
x
y
x
Homogeneous coordinates seem unintuitive, but
Homogeneous Coordinates
Q: How can we represent translation as a 3x3
matrix?
A: Using the rightmost column:
1
0
0
1
0
0
1
y
x
t
t
ranslation
T
y
x
t
y
y
t
x
x
'
'
Translation
Example of translation
1
1
1
0
0
1
0
0
1
1
'
'
y x y xt
y
t
x
y
x
t
t
y
x
t
x
= 2
Homogeneous Coordinates
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x, y, w) represents a point at location (x/w, y/w)
(x, y, 0) represents a point at infinity
(0, 0, 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2
(2,1,1) or (4,2,2) or (6,3,3)
x
y
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1
1
0
0
0
cos
sin
0
sin
cos
1
'
'
y
x
y
x
1
1
0
0
1
0
0
1
1
'
'
y
x
t
t
y
x
y x1
1
0
0
0
1
0
1
1
'
'
y
x
sh
sh
y
x
y xTranslate
1
1
0
0
0
0
0
0
1
'
'
y
x
s
s
y
x
y xScale
Affine Transformations
Affine transformations are combinations of …
Linear transformations, and
Translations
Properties of affine transformations:
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
y
x
f
e
d
c
b
a
w
y
x
1
0
0
'
'
Matrix Composition
Transformations can be combined by
matrix multiplication
w
y
x
sy
sx
ty
tx
w
y
x
1
0
0
0
0
0
0
1
0
0
0
cos
sin
0
sin
cos
1
0
0
1
0
0
1
'
'
'
p
’ = T(t
x
,t
y
) R( ) S(s
x
,s
y
)
p
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
p
’ = (T * (R * (S*
p
) ) )
Matrix Composition
Be aware: order of transformations matters
Matrix multiplication is not commutative
p
’ = T * R * S *
p
Matrix Composition
What if we want to rotate
and
translate?
Ex:
Rotate line segment by 45 degrees about
endpoint
a and lengthen
Multiplication Order – Wrong
Way
Our line is defined by two endpoints
Applying a rotation of 45 degrees, R(45), affects both points
We could try to translate both endpoints to return endpoint
a
to its original position, but by how much?
Wrong
Correct
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so
a
is at origin: T (-3)
Then rotate line 45 degrees: R(45)
Then translate back so
a
is where it was: T(3)
a
a
a
Will this sequence of operations work?
Matrix Composition
1
'
'
1
1
0
0
0
1
0
3
0
1
1
0
0
0
)
45
cos(
)
45
sin(
0
)
45
sin(
)
45
cos(
1
0
0
0
1
0
3
0
1
y
x
y
x
a
a
a
a
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix –
store it (on stack)!
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
Reverse Rotations
Q: How do you undo a rotation of R( )?
A: Apply the inverse of the rotation… R
-1
( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix: cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
#include <windows.h> #include <GL/glut.h> #include <stdlib.h> #include <math.h>
GLsizei winWidth=600, winHeight=600; //set initial display window size GLfloat xwcMin=0.0,xwcMax=225.0; //set range for world coordinates GLfloat ywcMin=0.0,ywcMax=225.0;
class wcPt2D {
public: GLfloat x,y; };
typedef GLfloat Matrix3x3 [3][3]; Matrix3x3 matComposite;
const GLdouble pi=3.14159; void init(void) {
glClearColor(1.0,1.0,1.0,0.0); //set color of display window to white }
/* Construct the 3 by 3 identity matrix */
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3){ GLint row, col;
for(row=0;row<3;row++)
for(col=0;col<3;col++)
matIdent3x3[row][col]=(row==col); }
/* Premultiply matrix m1 times matrix m2, store result in m2. */ void matrix3x3PreMultiply (Matrix3x3 m1, Matrix3x3 m2) {
GLint row, col; Matrix3x3 matTemp; for(row=0;row<3;row++)
void translate2D(GLfloat tx, GLfloat ty){ Matrix3x3 matTrans1;
matrix3x3SetIdentity(matTrans1); //initialize translation matrix to identity matTrans1[0][2]=tx;
matTrans1[1][2]=ty;
matrix3x3PreMultiply(matTrans1,matComposite);//concatenate matTrans1 with composite matrix }
void rotate2D(wcPt2D pivotPt, GLfloat theta){ Matrix3x3 matRot;
matrix3x3SetIdentity(matRot); //initialize rotation matrix to identity matRot[0][0]=cos(theta);
matRot[0][1]=-sin(theta);
matRot[0][2]=pivotPt.x * (1-cos(theta))+pivotPt.y * sin(theta); matRot[1][0]=sin(theta);
matRot[1][1]=cos(theta);
matRot[1][2]=pivotPt.y * (1-cos(theta))-pivotPt.x * sin(theta);
matrix3x3PreMultiply(matRot,matComposite);//concatenate matRot with the composite matrix }
void scale2D(GLfloat sx, GLfloat sy, wcPt2D fixedPt){ Matrix3x3 matScale;
matrix3x3SetIdentity(matScale); //initialize scaling matrix to identity matScale[0][0]=sx;
matScale[0][2]=(1-sx)*fixedPt.x; matScale[1][1]=sy;
matScale[1][2]=(1-sy)*fixedPt.y;
matrix3x3PreMultiply(matScale,matComposite);//concatenate matScale with the composite matrix }
/* using the composite matrix, calculate transformed coordinates. */ void transformVerts2D(GLint nVerts, wcPt2D * verts){
GLint k; GLfloat temp; for(k=0;k<nVerts;k++){ temp=matComposite[0][0]*verts[k].x+matComposite[0][1]*verts[k].y+matComposite[0][2]; verts[k].y=matComposite[1][0]*verts[k].x+matComposite[1][1]*verts[k].y+matComposite[1][ 2];
void triangle(wcPt2D *verts) { GLint k; glBegin(GL_TRIANGLES); for(k=0;k<3;k++) glVertex2f(verts[k].x,verts[k].y); glEnd(); } void displayFcn(void){
GLint nVerts=3; //define initial position for triangle wcPt2D verts[3]={{50.0,25.0},{150.0,25.0},{100.0,100.0}}; wcPt2D centroidPt; //calculate position of triangle centroid GLint k, xSum=0, ySum=0;
for(k=0;k<nVerts;k++) { xSum+=verts[k].x; ySum+=verts[k].y; } centroidPt.x=GLfloat(xSum)/GLfloat(nVerts); centroidPt.y=GLfloat(ySum)/GLfloat(nVerts);
wcPt2D pivPt,fixedPt; // set geometric transformation parameters pivPt=centroidPt;
fixedPt=centroidPt;
GLfloat tx=0.0, ty=100.0; GLfloat sx=0.5, sy=0.5; GLdouble theta=pi/2.0;
glClear(GL_COLOR_BUFFER_BIT); //clear display window glColor3f(0.0,0.0,1.0); //set initial fill color to blue triangle(verts); //display blue triangle
matrix3x3SetIdentity(matComposite);//initialize composite matrix to identity /* construct composite matrix for transformation sequence */
scale2D(sx,sy,fixedPt); // first transformation: Scale. rotate2D(pivPt,theta); // second transformation: Rotate. translate2D(tx,ty); // final transformation: Translate.
void winReshapeFcn(GLint newWidth, GLint newHeight){ glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(xwcMin,xwcMax,ywcMin,ywcMax); glClear(GL_COLOR_BUFFER_BIT); }
void main(int argc, char ** argv){ glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB); glutInitWindowPosition(50,50);
glutInitWindowSize(winWidth,winHeight);
glutCreateWindow("Geometric Transformation Sequence"); init();
glutDisplayFunc(displayFcn); glutReshapeFunc(winReshapeFcn); glutMainLoop();
