Transformasi Obyek (Kasus 2D) Grafika Komputer Semester Ganjil 2008
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
1
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 transformasi dalam sebuah program OpenGL
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
2
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 http://www.cs.virginia.edu
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
3
Pokok Bahasan 1.
Transformasi 2D Dasar 1. 2.
3.
2.
3.
Translasi Rotasi Penskalaan
Kombinasi Transformasi Transformasi Affine
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
4
Kegunaan Transformasi
Me-reposisi ataupun me-resize obyek
Pada proses viewing, untuk mengubah worldcoordinate 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 sebuah layar sesuai path tertentu
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
5
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 disusun untuk rancangan keseluruhan
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
6
2D Modeling Transformations Modeling Coordinates y
Scale Translate
x
Scale Rotate Translate
World Coordinates Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
7
2D Modeling Transformations Modeling Coordinates y x
Let’s look at this in detail… World Coordinates Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
8
2D Modeling Transformations Modeling Coordinates y x
Initial location at (0, 0) with x- and y-axes aligned Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
9
2D Modeling Transformations Modeling Coordinates y x
Scale .3, .3 Rotate -90 Translate 5, 3
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
10
2D Modeling Transformations Modeling Coordinates y x
Scale .3, .3 Rotate -90 Translate 5, 3
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
11
2D Modeling Transformations Modeling Coordinates y x
Scale .3, .3 Rotate -90 Translate 5, 3 World Coordinates Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
12
Transformasi Geometri 2D
Translasi 2D x’ = x + tx, y’ = y + ty (tx, ty) disebut vektor translasi atau pergeseran Dalam bentuk matriks:
P
x
y
P'
x'
y'
T
tx ty
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
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
13
Transformasi Geometri 2D
Scaling 2D x’ = x· sx, y’ = y· sy Dalam bentuk matriks:
Uniform scaling berarti skalar pengali sama untuk semua komponen:
x' y'
sx 0
0 sy
x y
2 Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
14
Transformasi Geometri 2D
Non-uniform scaling: skalar yang berbeda untuk tiap komponen:
X 2, Y 0.5
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
15
Transformasi Geometri 2D (x’, y’) r
(x, y)
r
x' y'
cos sin
sin cos
Kuliah Grafika Komputer Teknik Informatika ITS
x y
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( )
Anny Yuniarti - 2008
16
Transformasi Geometri 2D
Shear 2D Shear pada arah x relatif terhadap sumbu x: x’ = x + shx· y, y’ = y Parameter shx dapat berupa bilangan real Dalam bentuk matriks: x' 1 sh x x
y'
0
1
y
Shear pada arah y relatif terhadap sumbu y: x’ = x, y’ = y + shy· x Dalam bentuk matriks: x' 1 0 x y'
Kuliah Grafika Komputer Teknik Informatika ITS
shy
1
y
Anny Yuniarti - 2008
17
Transformasi Geometri 2D
Reflection 2D Pencerminan terhadap garis y = 0 (sumbu x): x’ = x, y’ = -y Dalam bentuk matriks: x' 1 0 x y'
1
y
Pencerminan terhadap garis x = 0 (sumbu y): x’ = -x, y’ = y Dalam bentuk matriks: x' 1 0 x y'
0
0
1
y
Pencerminan terhadap titik pusat (0, 0): x’ = -x, y’ = -y Dalam bentuk matriks: x' 1 0 x y'
Kuliah Grafika Komputer Teknik Informatika ITS
0
1
Anny Yuniarti - 2008
y
18
Basic 2D Transformations
Translation:
Scale:
x’ = x + tx y’ = y + ty x’ = x * sx y’ = y * sy
Rotation:
x’ = x*cos(θ) y*sin(θ) y’ = x*sin(θ) + y*cos(θ)
Kuliah Grafika Komputer Teknik Informatika ITS
Transformations can be combined (with simple algebra)
Anny Yuniarti - 2008
19
Basic 2D Transformations
Translation:
Scale:
x’ = x + tx y’ = y + ty x’ = x * sx y’ = y * sy
Rotation:
x’ = x*cos(θ) y*sin(θ) y’ = x*sin(θ) + y*cos(θ)
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
20
Basic 2D Transformations
Translation:
Scale:
x’ = x + tx y’ = y + ty x’ = x * sx y’ = y * sy
(x,y) (x’,y’)
Rotation:
x’ = x*cos(θ) y*sin(θ) y’ = x*sin(θ) + y*cos(θ)
Kuliah Grafika Komputer Teknik Informatika ITS
x’ = x*sx y’ = y*sy
Anny Yuniarti - 2008
21
Basic 2D Transformations Translation:
x’ = x + tx y’ = y + ty
Scale:
x’ = x * sx y’ = y * sy
Rotation: x’ = x*cos(θ) y*sin(θ) y’ = x*sin(θ) + y*cos(θ)
Kuliah Grafika Komputer Teknik Informatika ITS
(x’,y’)
x’ = (x*sx)*cos θ) - (y*sy)*sin(θ) y’ = (x*sx)*sin(θ) + (y*sy)*cos(θ)
Anny Yuniarti - 2008
22
Basic 2D Transformations
Translation:
Scale:
x’ = x + tx y’ = y + ty x’ = x * sx y’ = y * sy
Rotation: x’ = x*cos(θ) y*sin(θ) y’ = x*sin(θ) + y*cos(θ)
Kuliah Grafika Komputer Teknik Informatika ITS
(x’,y’)
x’ = ((x*sx)*cos(θ) - (y*sy)*sin(θ)) + tx y’ = ((x*sx)*sin(θ) + (y*sy)*cos(θ)) + ty
Anny Yuniarti - 2008
23
Basic 2D Transformations
Translation:
Scale:
x’ = x + tx y’ = y + ty x’ = x * sx y’ = y * sy
Rotation: x’ = x*cos(θ) y*sin(θ) y’ = x*sin(θ) + y*cos(θ)
Kuliah Grafika Komputer Teknik Informatika ITS
x’ = ((x*sx)*cos(θ) - (y*sy)*sin(θ)) + tx y’ = ((x*sx)*sin(θ) + (y*sy)*cos(θ)) + ty
Anny Yuniarti - 2008
24
Matrix Representation
Represent 2D transformation by a matrix a b c d
Multiply matrix by column vector apply transformation to point x' y'
Kuliah Grafika Komputer Teknik Informatika ITS
a b c d
x y
x' ax by y ' cx dy Anny Yuniarti - 2008
25
Matrix Representation
Transformations combined by multiplication x' y'
a b c d
e g
f i h k
j l
x y
Matrices are a convenient and efficient way to represent a sequence of transformations!
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
26
2x2 Matrices
What types of transformations can be represented with a 2x2 matrix? 2D Identity?
x' x y' y
x' y'
1 0 x 0 1 y
2D Scale around (0,0)?
x' s x * x y' s y * y Kuliah Grafika Komputer Teknik Informatika ITS
x' y'
sx 0
Anny Yuniarti - 2008
0 sy
x y 27
2x2 Matrices
What types of transformations can be represented with a 2x2 matrix? 2D Rotate around (0,0)? x' cos * x sin * y y ' sin * x cos * y
x' y'
cos sin
sin cos
x y
2D Shear? x ' x shx * y
x'
1
shx
x
y ' shy * x
y'
shy
1
y
Kuliah Grafika Komputer Teknik Informatika ITS
y
Anny Yuniarti - 2008
28
2x2 Matrices
What types of transformations can be represented with a 2x2 matrix? 2D Mirror about Y axis? x' y'
x y
x' y'
1 0 x 0 1 y
x' y'
1 0
2D Mirror over (0,0)? x' y'
x y
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
0 x 1 y 29
2x2 Matrices
What types of transformations can be represented with a 2x2 matrix? 2D Translation? x' x t x y'
y ty
NO!
Only linear 2D transformations can be represented with a 2x2 matrix
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
30
Linear Transformations
Linear transformations are combinations of …
Scale, Rotation, Shear, and Mirror
x' y'
a b c d
x y
Properties of linear transformations:
Satisfies:
Origin maps to origin Lines map to lines Parallel lines remain parallel Ratios are preserved
T (s1p1 s2p 2 )
Kuliah Grafika Komputer Teknik Informatika ITS
s1T (p1 ) s2T (p 2 )
Anny Yuniarti - 2008
31
Homogeneous Coordinates
Q: How can we represent translation as a 3x3 matrix? x' x t x y'
Kuliah Grafika Komputer Teknik Informatika ITS
y ty
Anny Yuniarti - 2008
32
Homogeneous Coordinates Homogeneous coordinates represent coordinates in 2 dimensions with a 3vector
x y
homogeneous coords
x y 1
Homogeneous coordinates seem unintuitive, but they make graphics operations much easier Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
33
Homogeneous Coordinates Q: How can we represent translation as a 3x3 matrix? x' x t x y'
y ty
A: Using the rightmost column: 1 0 tx Translation
Kuliah Grafika Komputer Teknik Informatika ITS
0 1 ty 0 0 1
Anny Yuniarti - 2008
34
Translation Homogeneous Coordinates
Example of translation
x'
1 0 tx x
x tx
y' 1
0 1 ty y 0 0 1 1
y ty 1
tx = 2 ty = 1 Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
35
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 y 2
Convenient coordinate system to represent many useful transformations Kuliah Grafika Komputer Teknik Informatika ITS
(2,1,1) or (4,2,2) or (6,3,3)
1 1
Anny Yuniarti - 2008
2
x
36
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices x' y'
1 0 tx 0 1 ty
x y
x' y'
sx 0
0 sy
0 x 0 y
1
0 0
1
1
0
0
1 1
1
Translate
Scale
x' y'
cos sin
sin cos
0 x 0 y
x' y'
1 shy
shx 1
0 x 0 y
1
0
0
1 1
1
0
0
1 1
Rotate Kuliah Grafika Komputer Teknik Informatika ITS
Shear Anny Yuniarti - 2008
37
Affine Transformations
Affine transformations are combinations of …
Linear transformations, and Translations
x' y' w
a b d e 0 0
c x f y 1 w
Properties of affine transformations:
Origin does not necessarily map to origin Lines map to lines Parallel lines remain parallel Ratios are preserved
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
38
Matrix Composition
Transformations can be combined by matrix multiplication x' y' w'
1 0 tx cos 0 1 ty sin 0 0 0 1
p’ =
Kuliah Grafika Komputer Teknik Informatika ITS
T(tx,ty)
sin cos 0
0 sx 0 0 0 0 sy 0 1 0 0 1
x y w
R( )
S(sx,sy)
p
Anny Yuniarti - 2008
39
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) ) ) p’ = (T*R*S) * p Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
40
Matrix Composition
Be aware: order of transformations matters
Matrix multiplication is not commutative
p’ = T * R * S * p “Global”
Kuliah Grafika Komputer Teknik Informatika ITS
“Local”
Anny Yuniarti - 2008
41
Matrix Composition
What if we want to rotate and translate?
Ex: Rotate line segment by 45 degrees about endpoint a and lengthen
a
Kuliah Grafika Komputer Teknik Informatika ITS
a
Anny Yuniarti - 2008
42
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?
a
a Wrong R(45)
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
a Correct T(-3) R(45) T(3) 43
Multiplication Order - Correct Isolate endpoint a from rotation effects
a
First translate line so a is at origin: T (-3) a
Then rotate line 45 degrees: R(45)
Then translate back so a is where it was: T(3)
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
a
a 44
Matrix Composition
Will this sequence of operations work? 1 0 0 1
3 cos(45) 0 sin(45)
0 0
1
Kuliah Grafika Komputer Teknik Informatika ITS
0
sin(45) 0 1 0 3 a x cos(45) 0 0 1 0 a y 0
1 0 0 1
Anny Yuniarti - 2008
1
a' x a' y 1
45
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 multiply
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
46
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
Therefore… R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
47
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
48
#include #include #include #include
<windows.h>
<stdlib.h> <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++) for(col=0;col<3;col++) matTemp[row][col]=m1[row][0]*m2[0][col]+m1[row][1]*m2[1][col]+m1[row][2]*m2[2][col]; for(row=0;row<3;row++) for(col=0;col<3;col++) m2[row][col]=matTemp[row][col];
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
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
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(); }
Some Interesting Images
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
53
Some Interesting Images
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
54
Tugas Kelas C
Tulis sebuah program animasi yang mengimplementasikan prosedur rotasi 2D. Inputnya sebuah polygon yang dirotasi terhadap sebuah pivot point menggunakan sudut yang kecil. Untuk meningkatkan kecepatan gunakan aproksimasi dari fungsi sin dan cos, dan untuk menghindari akumulasi error yang berlebihan reset nilai koordinat awal pada setiap putaran baru.
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
55
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya: Parameter transformasi dapat dispesifikasikan sebagai input dari user Dapat diaplikasikan pada semua polygon dengan verteks-verteksnya dispesikasikan oleh input dari user Urutan transformasi geometrik ditentukan oleh input dari user
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
56
Tugas Kelas A
Implementasi program untuk membuat gambar:
Untuk membuatnya, buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang). Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan.
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
57
Tugas Kelas B
Implementasi program untuk membuat gambar:
Untuk membuatnya, buat sebuah fungsi yang menggambar sebuah motif (gambar kiri). Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh, lalu rotasi untuk menggambar snowflake secara keseluruhan.
Kuliah Grafika Komputer Teknik Informatika ITS
Anny Yuniarti - 2008
58