You are on page 1of 12

MATERI 7

Transformasi Obyek : transformasi affine 2D dan 3D


Tujuan Instruksional umum : Setelah mengikuti materi ini, mahasiswa dapat menjelaskan bagaimana menyiapkan pemrograman dengan menggunakan OpenGL pada Microsoft Visual C++ 6.0 Tujuan Instruksional Khusus : Mahasiswa dapat membuat program untuk menampilkan gambar 3D Materi yang dipelajari : 1. Transformasi grambar dengan menggunakan transformasi Affine

7.1. Pengertian Dasar Pada materi empat telah dipelajari transformasi dua dimensi, yaitu transformasi dari koordinat nyata ke koordinat view-port untuk mendapatkan ukuran dan posisi gambar yang diinginkan. Pada materi inii akan dipelajari cara yang lebih fleksibel untuk mendapatkan ukuran, arah dan posisi obyek. Metode transformasi yang digunakan adalah transformasi Affine, baik untuk obyek dua dimensi maupun obyek tiga dimensi. Untuk memberikan gambaran yang jelas tentang transformasi 2D maupun 3D yang akan dipelajari pada materi ini, berikut ini disajikan gambar 7.1. Pada gambar 7.1.a ditunjukkan gambar rumah 2D sebelum dan sesudah transformasi, sedangkan pada gambar 7.1.b ditunjukkan gambar rumah 3D sebelum dan sesudah transformasi.
y y

sesudah

sesudah

sebelum

sebelum

Gambar 7.1. Gambar Rumah sebelum dan sesudah transformasi 7.2. Transformasi Affine 2D Untuk keperluan transformasi koordinat titik P dan Q dalam 2D dinyatakan sebagai : Px Qx P = Py Q = Qy dan 1 1 1 dari 12 Disusun oleh : Eko Sediyono

Hal ini berarti titik P berada pada lokasi P = Px i + Py j + Dimana adalah titik pusat koordinat (tidak harus selalu (0,0)). Transformasi dari titik P menuju titik Q menggunakan fungsi T() berikut ini. Qx Px Q y = T Py Q P z z

atau ringkasnya Q = T(P)

Transformasi Affine mempunyai bentuk seperti berikut ini. Q x m11 Px + m12 Py + m13 Q y = m21 Px + m 22 Py + m23 1 1 dalam bentuk persamaan matriks persamaan di atas dapat diubah menjadi Q x m11 m12 m13 Px Q y = m21 m22 m23 Py 1 0 0 1 1 Contoh : Lakukan transformasi Affin dari titik P = (1,2) ke Q dengan matriks transformasi berikut ini
3 2 0 0 1 0 5 2 1

Jawab : Qx 3 Qy = - 2 1 0

0 1 0

5 1 8 2 2 = 2 1 1 1

Transformasi Affine berpengaruh pada 4 transformasi dasar, yaitu : translasi, skala, rotasi dan shear. Gambar 7.2. menunjukkan pengaruh transformasi-transformasi dasar tersebut dalam gambar. Gambar 7.2.a pengaruh translasi, b. pengaruh skala, c. pengaruh rotasi, dan d. pengaruh shear.

2 dari 12

Disusun oleh : Eko Sediyono

Gambar 7.2. Transformasi Dasar. Transformasi Affine untuk translasi diberikan oleh persamaan berikut ini.
Q x 1 Q y = 0 1 0 0 1 0 m13 Px m 23 Py 1 1

atau lebih ringkasnya

Q x Px + m13 Q y = Py + m 23 1 1

Vektor (m13 , m23) adalah vektor offset yang menyatakan besarnya pergeseran. Transformasi Affine untuk skala melakukan penskalaan dengan menggunakan dua faktor skala yaitu S x dan Sy masing-masing untuk koordinat x dan y. Persamaan transformasinya diberikan pada persamaan berikut ini. ( Qx, Qy ) = ( Sx Px , Sy Py ) sehingga matriks untuk transformasi skala adalah :
Sx 0 0 0 Sy 0 0 0 1

Transformasi Affine untuk rotasi diberikan oleh persamaan berikut ini. Qx = Px cos() Py sin(), Qy = Px sin() Py cos(), 3 dari 12 Disusun oleh : Eko Sediyono

y y

Matriks transformasinya adalah sebagai berikut . sesudah sesudah cos() sin() 0 cos() 0 sin()
0 0

x 1 z sebelum sebelum x Rotasi mempunyai pengertian diputar dengan pusat titik asal (0,0) ke arah berlawanan jarum jam sebesar sudut . Lebih jelasnya dapat dilihat pada gambar berikut ini.

Gambar 7.3. Transformasi Rotasi Transformasi Affine untuk shearing diberikan oleh persamaan berikut ini. Qx = Px + hPy Qy = Py Dimana h menyatakan besarnya perubahan P pada sumbu y. Matrik transformasinya adalah sebagai berikut.
1 0 0 h 1 0 0 0 1

Bentuk tranformasinya secara grafis dapat diihat pada gambar berikut ini.

Gambar 7.4. Transformasi Shear 7.3. Transformasi Affine 3D Seperti pada transformasi Affine 2D, transformasi Affine 3D juga menggunakan koordinat frame. Titik P dinyatakan dengan P = Px i + Py j + Pz k + 4 dari 12 atau Disusun oleh : Eko Sediyono

Px P P = y P z 1 Dan transformasinya secara transformasi berikut ini.

umum

dinyatakan

dengan

persamaan

Qx Px Qy Py = M Q P z z 1 1
m11 m M = 21 m 31 0 m12 m22 m32 0 m13 m23 m33 0 m14 m24 m34 1

dengan M nya adalah

Untuk translasi matrik M tersebut adalah sebagai berikut 1 0 0 m14 0 1 0 m 24 0 0 1 m 34 0 0 0 1 dimana (m14, m24, m34) adalah besarnya translasi yang diinginkan. Untuk penskalaan matrik transformasinya adalah sebagai berikut.
0 0 Sx 0 0 S y 0 0 0 0 S z 0 0 0 0 1 dimana (Sx, Sy, Sz) adalah besarnya skala yang diinginkan. Untuk shearing matriks transformasinya adalah sebagai berikut.
1 f 0 0 0 1 0 0 0 0 1 0 0 0 0 1

Kalau matrik transformasi dikalikan dengan titik P akan menghasilkan Q = (Px, fPx + Py , Pz). Jadi komponen Px, dan Pz tetap, sedangkan komponen Py berubah secara proporsional, dimana f adalah konstanta yang kita inginkan. Untuk rotasi ada 3 macam transformasi, yaitu rotasi terhadap sumbu x, sumbu y, dan sumbu z.

5 dari 12

Disusun oleh : Eko Sediyono

1 0 Rotasi dengan sumbu x, matrik rotasinya adalah 0 0

0 c s 0

0 c c 0

0 0 0 1

0 c 1 0 Rotasi dengan sumbu y, matrik rotasinya adalah s 0 0 0 c s c s Rotasi dengan sumbu z, matrik rotasinya adalah 0 0 0 0

s 0 c 0 0 0 1 0

Dimana c adalah cos() dan s adalah sin(), untuk yang diinginkan. Contoh: Gambar berikut ini menunjukkan a. Gambar gudang dengan posisi awal, dan rotasi dari titik pusat sebesar b. -70 o terhadap sumbu x, c. 30o terhadap sumbu y, dan d. rotasi -90o terhadap sumbu z.

0 0 0 1 0 0 0 1

Gambar 7.5. Transformasi Rotasi 3D 7.4. Penggunaan Transformasi Affine 3D dalam OpenGL Pada gambar 7.6 ditunjukkan proses komputer melihat obyek sampai menampilkannya di layar sebagai obyek 2D. Mata yang melihat pemandangan, mengarah ke window yang terletak pada bidang x-y, sepanjang sumbu z. Ruang pandang ( view volume) dari kamera dibatasi oleh balok berongga yang luasnya sama dengan window, dan 6 dari 12 Disusun oleh : Eko Sediyono

kedalamannya dibatasi oleh bidang dekat (near plane) dan bidang jauh (far plane). Setiap titik yang berada pada ruang pandang, diproyeksikan ke window sejajar dengan sumbu z. Dengan kata lain penggambaran titik 3D ke dalam window adalah memproyeksikan titik (x1, y1, z1) menjadi (x1, y2, 0). Titik yang berada diluar ruang pandang dipotong dan dibuang. Transformasi viewport yang terpisah memetakan titik yang diproyeksikan dari window ke peralatan tampilan (Layar komputer).

Gambar 7.6. Proses melihat dan menampilkan obyek 2D dengan OpenGL Berikut ini disajikan proses melihat dan menampilkan obyek dalam bentuk 3D. Pada gambar 7.7 ditunjukkan obyek 3D yang sebagian berada di luar ruang pandang. Pada penampilannya terdapat proses clipping, yaitu membuang bagian obyek yang berada di luar ruang pandang.

Gambar 7.7. Obyek 3D yang Sebagian berada di luar ruang pandang Gambar 7.8 menunjukkan proses penampilan gambar sampai ke view port. Proses ini dalam OpenGL disebut pipelining.

Gambar 7.8. Proses Pipeline dalam OpenGL

7 dari 12

Disusun oleh : Eko Sediyono

Setiap vertek dari obyek harus melewati pipeline dengan pemanggilan fungsi glVertex3d(x, y, z). Vertek-vertek tersebut dikalikan dengan matriks, diantaranya adalah matrik modelview, matrik proyeksi dan matrik viewport. Dan terakhir dipetakan ke viewport. Beberapa fungsi dalam OpenGL yang diperlukan untuk pipeline adalah : Untuk mengatur transformasi modelview

glMatrixMode(GL_MODELVIEW) harus ada di dalam fungsi init(). glScaled(sx, sy, sz) matrik dari obyek dikalikan masing-masing untuk penskalaan x dengan sx, y dengan sy, dan z dengan sz. Hasilnya dikembalikan lagi ke matrik obyek. glTranslated(dx, dy, dz) Matrik dari obyek dikalikan masing-masing untuk translasi x dengan dx, y dengan dy, dan z dengan dz. Hasilnya dikembalikan lagi ke matrik obyek. glRotated(angle, ux, uy, uz) Matrik dari obyek dikalikan masingmasing untuk rotasi sebesar sudut angle dan berputar mengelilingi sumbu antara titik pusat dengan titik (ux, uy, uz). Rotasi ini menggunakan persamaam 7.. Untuk mengatur kamera dengan proyeksi paralel.

glOrtho(left, right, bott, top, near, far) Digunakan untuk membangun ruang pandang yang berupa balok berongga yang sejajar dengan sumbu x sepanjang left sampai right, sejajar sumbu y sepanjang bott sampai top, dan sejajar dengan sumbu z sepanjang -near sampai -far. Digunakan tanda negatif karena defaultnya kamera terletak pada titik pusat dan melihat ke bawah sumbu negatif z. Untuk near bernilai 2, artinya meletakkan bidang dekat pada z=-2 atau 2 unit di depan mata. Demikian juga untuk far, misalnya far = 20, artinya meletakkan bidang jauh 20 unit di depan mata. Urutan perintah untuk proyeksi paralel adalah : glMatrixMode(GL_PROJECTION); // membangkitkan matrik proyeksi glLoadIdentity(); // inisialisasi matrik proyeksi glOrtho(left, right, bottom, top, near, far); // mengalikannya dengan matrik baru. Untuk mengatur posisi kamera

gluLookAt( eye.x, eye.y, eye.z, look.x, look.y, look.z, up.x, up.y, up.z); Urutan perintahnya haruslah seperti berikut ini. glMatrixMode(GL_MODELVIEW); // membangkitkan matrik modelview glLoadIdentity(); // inisialisasi matrik modelview gluLookAt( eye.x, eye.y, eye.z, look.x, look.y, look.z, up.x, up.y, up.z); Disusun oleh : Eko Sediyono 8 dari 12

// mengalikannya dengan matrik baru Contoh : Mengatur kamera Kamera biasanya diatur melihat ke bawah ke obyek dari posisi yang paling dekat. Gambar 7.9. menunjukkan kamera dengan posisi-posisi eye=(4,4,4), melihat titik pusat dengan look=(0,1,0). Arah atas diatur dengan up=(0,1,0). Misalnya juga diinginkan ruang pandangnya selebar 6.4 dan setinggi 4.8 (atau aspect ratio nya 640/480). Dan misalnya ingin diatur pula near = 1 dan far = 50. Maka kodenya haruslah dibuat seperti berikut ini. glMatrixMode(GL_PROJECTION); // mengatur ruang pandang glLoadIdentity(); glOrtho(-3.2, 3.2, -2.4, 2.4, 1, 50); // lebar 6.4 dan tinggi 4.8 glMatrixMode(GL_MODELVIEW); // mengatur letak kamera glLoadIdentity(); gluLookAt(4, 4, 4, 0, 1, 0, 0, 1, 0);

Gambar 7.9 Mengatur Kamera dengan gluLookAt() OpenGL menyediakan bentuk-bentuk dasar untuk obyek 3D dalam bentuk wireframe, obyek-obyek tersebut adalah : Kubus : glutWireCube(GLdouble size); menampilkan kubus dengan panjang sisi masing-masing sepanjang size. Donat : glutWireSphare(Gldouble radius, Glint nSlices, Glint nStacks) Kerucut : glutWireTorus(Gldouble inRad, Gldouble outRad, Glint nSlices, Glint nStacks) Tempat the : glutWireTeapot(Gldouble size)

nSlices menyatakan banyaknya irisan mengelilingi sumbu z, dan nStacks menyatakan banyaknya irisan mengelilingi sumbu y. Berikut ini adalah program untuk menampilkan obyek-obyek dasar yang telah disediakan oleh OpenGL. Gambar yang akan ditampilkan adalah seperti berikut ini. Disusun oleh : Eko Sediyono 9 dari 12

Gambar 7.10. Obyek Dasar Wireframe dari OpenGL #include <windows.h> //suitable when using Windows 95/98/NT #include <gl/Gl.h> #include <gl/Glu.h> #include <gl/glut.h> //<<<<<<<<<<<<<<<<<<< axis >>>>>>>>>>>>>> void axis(double length) { // draw a z-axis, with cone at end glPushMatrix(); glBegin(GL_LINES); glVertex3d(0, 0, 0); glVertex3d(0,0,length); // along the z-axis glEnd(); glTranslated(0, 0,length -0.2); glutWireCone(0.04, 0.2, 12, 9); glPopMatrix(); } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<< displayWire >>>>>>>>>>>>>>>>>>>>>> void displayWire(void) { glMatrixMode(GL_PROJECTION); // set the view volume shape glLoadIdentity(); glOrtho(-2.0*64/48.0, 2.0*64/48.0, -2.0, 2.0, 0.1, 100); glMatrixMode(GL_MODELVIEW); // position and aim the camera glLoadIdentity(); gluLookAt(2.0, 2.0, 2.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); glClear(GL_COLOR_BUFFER_BIT); // clear the screen glColor3d(0,0,0); // draw black lines axis(0.5); // z-axis glPushMatrix(); 10 dari 12 Disusun oleh : Eko Sediyono

glRotated(90, 0,1.0, 0); axis(0.5); glRotated(-90.0, 1, 0, 0); axis(0.5); glPopMatrix();

// y-axis // z-axis

glPushMatrix(); glTranslated(0.5, 0.5, 0.5); // big cube at (0.5, 0.5, 0.5) glutWireCube(1.0); glPopMatrix(); glPushMatrix(); glTranslated(1.0,1.0,0); // sphere at (1,1,0) glutWireSphere(0.25, 10, 8); glPopMatrix(); glPushMatrix(); glTranslated(1.0,0,1.0); // cone at (1,0,1) glutWireCone(0.2, 0.5, 10, 8); glPopMatrix(); glPushMatrix(); glTranslated(1,1,1); glutWireTeapot(0.2); // teapot at (1,1,1) glPopMatrix(); glPushMatrix(); glTranslated(0, 1.0 ,0); // torus at (0,1,0) glRotated(90.0, 1,0,0); glutWireTorus(0.1, 0.3, 10,10); glPopMatrix(); glPushMatrix(); glTranslated(1.0, 0 ,0); // dodecahedron at (1,0,0) glScaled(0.15, 0.15, 0.15); glutWireDodecahedron(); glPopMatrix(); glPushMatrix(); glTranslated(0, 1.0 ,1.0); // small cube at (0,1,1) glutWireCube(0.25); glPopMatrix(); glPushMatrix(); glTranslated(0, 0 ,1.0); // cylinder at (0,0,1) GLUquadricObj * qobj; qobj = gluNewQuadric(); gluQuadricDrawStyle(qobj,GLU_LINE); gluCylinder(qobj, 0.2, 0.2, 0.4, 8,8); glPopMatrix(); glFlush(); } //<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 11 dari 12 Disusun oleh : Eko Sediyono

void main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB ); glutInitWindowSize(640,480); glutInitWindowPosition(100, 100); glutCreateWindow("Transformation testbed - wireframes"); glutDisplayFunc(displayWire); glClearColor(1.0f, 1.0f, 1.0f,0.0f); // background is white glViewport(0, 0, 640, 480); glutMainLoop(); } Tugas : Ketik dan jalankan program tersebut di atas sampai benar. Tambahkan fasilitas keyboard untuk memutar dan menggeser gambargambar tersebut, sebagai berikut : u ke atas, b ke bawah, l ke kiri, r ke kanan, d diagonal kiri, a diagonal kanan, w geser kiri, s geser kanan.

12 dari 12

Disusun oleh : Eko Sediyono

You might also like