P. 1
Materi7 Grafik(Trandform Affine)

Materi7 Grafik(Trandform Affine)

|Views: 175|Likes:
Published by Johny Gates

More info:

Published by: Johny Gates on Jul 11, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

01/28/2014

pdf

text

original

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

z

x

sebelum

x

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

Gambar 7.2.Hal ini berarti titik P berada pada lokasi P = Px i + Py j + ϑ Dimana ϑ adalah titik pusat koordinat (tidak harus selalu (0. menunjukkan pengaruh transformasi-transformasi dasar tersebut dalam gambar.a pengaruh translasi. skala. pengaruh rotasi.2) ke Q dengan matriks transformasi berikut ini  3  − 2  0  0 1 0 5  2 1  Jawab :  Qx   3    Qy  =  . rotasi dan shear.2.  Qx   Px       Q y  = T  Py  Q  P   z  z atau ringkasnya Q = T(P) Transformasi Affine mempunyai bentuk seperti berikut ini. 2 dari 12 Disusun oleh : Eko Sediyono .  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. pengaruh shear. Transformasi dari titik P menuju titik Q menggunakan fungsi T() berikut ini. c. dan d. pengaruh skala.0)). b. yaitu : translasi.2  1  0    0 1 0 5  1   8      2  2  =  2      1  1   1  Transformasi Affine berpengaruh pada 4 transformasi dasar. Gambar 7.

Gambar 7. 3 dari 12 Disusun oleh : Eko Sediyono .2. Qx = Px cos(θ) – Py sin(θ).  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 . Qy = Px sin(θ) – Py cos(θ). Persamaan transformasinya diberikan pada persamaan berikut ini. 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. Transformasi Dasar. Transformasi Affine untuk translasi diberikan oleh persamaan berikut ini. Transformasi Affine untuk skala melakukan penskalaan dengan menggunakan dua faktor skala yaitu S x dan Sy masing-masing untuk koordinat x dan y. ( Qx. Qy ) = ( Sx Px . m23) adalah vektor offset yang menyatakan besarnya pergeseran.

Titik P dinyatakan dengan P = Px i + Py j + Pz k + ϑ 4 dari 12 atau Disusun oleh : Eko Sediyono . Transformasi Affine 3D Seperti pada transformasi Affine 2D. Gambar 7.0) ke arah berlawanan jarum jam sebesar sudut θ. Lebih jelasnya dapat dilihat pada gambar berikut ini. Transformasi Rotasi Transformasi Affine untuk shearing diberikan oleh persamaan berikut ini. Gambar 7.4.y y Matriks transformasinya adalah sebagai berikut . 1  0 0  h 1 0 0  0 1  Bentuk tranformasinya secara grafis dapat diihat pada gambar berikut ini.3. transformasi Affine 3D juga menggunakan koordinat frame. Transformasi Shear 7. 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.3. Qx = Px + hPy Qy = Py Dimana h menyatakan besarnya perubahan P pada sumbu y. Matrik transformasinya adalah sebagai berikut.

Sz) adalah besarnya skala yang diinginkan. dan sumbu z. m34) adalah besarnya translasi yang diinginkan. 0 0 Sx 0    0 S y 0 0 0 0 S z 0   0 0 0 1   dimana (Sx. sedangkan komponen Py berubah secara proporsional. 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. 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. sumbu y. Untuk shearing matriks transformasinya adalah sebagai berikut. Pz). m24. yaitu rotasi terhadap sumbu x. dimana f adalah konstanta yang kita inginkan. dan Pz tetap. Untuk penskalaan matrik transformasinya adalah sebagai berikut. Px    P  P = y P  z 1   Dan transformasinya secara transformasi berikut ini. Sy. 5 dari 12 Disusun oleh : Eko Sediyono . Untuk rotasi ada 3 macam transformasi. Jadi komponen Px. fPx + Py .

sepanjang sumbu z. Ruang pandang ( view volume) dari kamera dibatasi oleh “balok berongga” yang luasnya sama dengan window. untuk θ yang diinginkan. “Mata” yang melihat pemandangan. 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. Transformasi Rotasi 3D 7.1  0 Rotasi dengan sumbu x.5. Penggunaan Transformasi Affine 3D dalam OpenGL Pada gambar 7. dan rotasi dari titik pusat sebesar b. rotasi -90o terhadap sumbu z. matrik rotasinya adalah − s 0   0 0  c − s   c s Rotasi dengan sumbu z. 0  0 0  1  0  0 0  1  Gambar 7. dan d.4. Contoh: Gambar berikut ini menunjukkan a. dan 6 dari 12 Disusun oleh : Eko Sediyono . c. 30o terhadap sumbu y.6 ditunjukkan proses komputer “melihat” obyek sampai menampilkannya di layar sebagai obyek 2D. matrik rotasinya adalah 0 0  0 0  s 0 c 0 0 0 1 0 Dimana c adalah cos(θ) dan s adalah sin(θ). -70 o terhadap sumbu x. Gambar gudang dengan posisi awal. mengarah ke window yang terletak pada bidang x-y.

Transformasi viewport yang terpisah memetakan titik yang diproyeksikan dari window ke peralatan tampilan (Layar komputer). Pada penampilannya terdapat proses clipping. y2. diproyeksikan ke window sejajar dengan sumbu z. Proses ini dalam OpenGL disebut pipelining. Dengan kata lain penggambaran titik 3D ke dalam window adalah memproyeksikan titik (x1. y1.8. Titik yang berada diluar ruang pandang dipotong dan dibuang.7. Gambar 7.7 ditunjukkan obyek 3D yang sebagian berada di luar ruang pandang. Gambar 7. Pada gambar 7. Proses melihat dan menampilkan obyek 2D dengan OpenGL Berikut ini disajikan proses melihat dan menampilkan obyek dalam bentuk 3D. 0). yaitu membuang bagian obyek yang berada di luar ruang pandang. z1) menjadi (x1. Gambar 7. Setiap titik yang berada pada ruang pandang. Proses Pipeline dalam OpenGL 7 dari 12 Disusun oleh : Eko Sediyono .6.kedalamannya dibatasi oleh bidang dekat (near plane) dan bidang jauh (far plane).8 menunjukkan proses penampilan gambar sampai ke view port. Obyek 3D yang Sebagian berada di luar ruang pandang Gambar 7.

// mengalikannya dengan matrik baru. // membangkitkan matrik modelview glLoadIdentity(). dy. near. eye. eye. Urutan perintahnya haruslah seperti berikut ini.y. glOrtho(left. Rotasi ini menggunakan persamaam 7…. Hasilnya dikembalikan lagi ke matrik obyek. far). // membangkitkan matrik proyeksi glLoadIdentity(). eye. near. diantaranya adalah matrik modelview. glTranslated(dx.x.z. glRotated(angle. y dengan sy. up. right.z. dan z dengan dz. matrik proyeksi dan matrik viewport. look. glMatrixMode(GL_MODELVIEW). top. sejajar sumbu y sepanjang bott sampai top. Disusun oleh : Eko Sediyono 8 dari 12 . Beberapa fungsi dalam OpenGL yang diperlukan untuk pipeline adalah : • Untuk mengatur transformasi modelview glMatrixMode(GL_MODELVIEW) harus ada di dalam fungsi init().y. up. look.y. misalnya far = 20. bott. y. • Untuk mengatur kamera dengan proyeksi paralel. up. top. uz). uy.Setiap vertek dari obyek harus melewati pipeline dengan pemanggilan fungsi glVertex3d(x. uy.z. // inisialisasi matrik proyeksi glOrtho(left. // inisialisasi matrik modelview gluLookAt( eye. Hasilnya dikembalikan lagi ke matrik obyek. Untuk near bernilai 2. Vertek-vertek tersebut dikalikan dengan matriks. y dengan dy. • Untuk mengatur posisi kamera gluLookAt( eye. look. dz) Matrik dari obyek dikalikan masing-masing untuk translasi x dengan dx. sy. look. ux. Urutan perintah untuk proyeksi paralel adalah : glMatrixMode(GL_PROJECTION).x. dan sejajar dengan sumbu z sepanjang -near sampai -far. up. up. artinya meletakkan bidang dekat pada z=-2 atau 2 unit di depan mata. bottom.x. far) Digunakan untuk membangun ruang pandang yang berupa balok berongga yang sejajar dengan sumbu x sepanjang left sampai right..x. Digunakan tanda negatif karena defaultnya kamera terletak pada titik pusat dan melihat ke bawah sumbu negatif z. look.z).y.x. up.y.z.y. Dan terakhir dipetakan ke viewport. eye. uz) Matrik dari obyek dikalikan masingmasing untuk rotasi sebesar sudut angle dan berputar mengelilingi sumbu antara titik pusat dengan titik (ux. dan z dengan sz. artinya meletakkan bidang jauh 20 unit di depan mata. sz) matrik dari obyek dikalikan masing-masing untuk penskalaan x dengan sx. z). Demikian juga untuk far.x.z). look. right. glScaled(sx.

4).2. -2. melihat titik pusat dengan look=(0. Glint nSlices. dan nStacks menyatakan banyaknya irisan mengelilingi sumbu y. Berikut ini adalah program untuk menampilkan obyek-obyek dasar yang telah disediakan oleh OpenGL. Gambar 7. 0.1. menunjukkan kamera dengan posisi-posisi eye=(4.0). 1. 50). Gambar 7. 0).2. Gambar yang akan ditampilkan adalah seperti berikut ini. glMatrixMode(GL_PROJECTION).4. obyek-obyek tersebut adalah : • • • • Kubus : glutWireCube(GLdouble size). // lebar 6. 4. Disusun oleh : Eko Sediyono 9 dari 12 .8 glMatrixMode(GL_MODELVIEW).1. 3. 4.9 Mengatur Kamera dengan gluLookAt() OpenGL menyediakan bentuk-bentuk dasar untuk obyek 3D dalam bentuk wireframe. 1.4. Glint nSlices. Arah atas diatur dengan up=(0. Gldouble outRad. Maka kodenya haruslah dibuat seperti berikut ini.4 dan tinggi 4. 0.9. Glint nStacks) Kerucut : glutWireTorus(Gldouble inRad.4 dan setinggi 4. gluLookAt(4. 2. 0. // mengatur letak kamera glLoadIdentity().// mengalikannya dengan matrik baru Contoh : Mengatur kamera Kamera biasanya diatur melihat ke bawah ke obyek dari posisi yang paling dekat. glOrtho(-3.8 (atau aspect ratio nya 640/480).0). // mengatur ruang pandang glLoadIdentity().4. menampilkan kubus dengan panjang sisi masing-masing sepanjang size. Glint nStacks) Tempat the : glutWireTeapot(Gldouble size) nSlices menyatakan banyaknya irisan mengelilingi sumbu z. Misalnya juga diinginkan ruang pandangnya selebar 6. 1. Donat : glutWireSphare(Gldouble radius. Dan misalnya ingin diatur pula near = 1 dan far = 50.

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

qobj = gluNewQuadric().1) glutWireCube(0.0). glPushMatrix(). 1.2. axis(0. glPopMatrix().4.0. // cone at (1.1. glPopMatrix().1.0).0 . 0). 0.1) GLUquadricObj * qobj.1.0) glScaled(0. glPushMatrix(). 0). glPopMatrix(). glPopMatrix().5.1.1. // y-axis // z-axis glPushMatrix().1.0. 8.1) glPopMatrix(). axis(0. 0. 0.5. glTranslated(0. 0. // small cube at (0. // torus at (0. glPopMatrix(). gluQuadricDrawStyle(qobj.15. 0.0) glutWireSphere(0.0.1).1) glutWireCone(0. 0. // sphere at (1.0 . glutWireTorus(0.0. 8). glPushMatrix(). 0. // big cube at (0.5). 0. // dodecahedron at (1. 1. glPopMatrix().0). glTranslated(1.0.0) glRotated(90.5.0.glRotated(90. 10. glFlush().1.25).0.5) glutWireCube(1. 10. glPushMatrix().0). glRotated(-90. glPushMatrix(). 0.1.8). glTranslated(1.0.1. 0. glPopMatrix().0). glTranslated(0.2. 1.2.0. 8). glPushMatrix(). glTranslated(0. // cylinder at (0.1. glutWireDodecahedron().1.0. } //<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 11 dari 12 Disusun oleh : Eko Sediyono .15). 0 . glPopMatrix().0.GLU_LINE).0).3. 1. glTranslated(1.5. glPushMatrix(). 0.0). 10.5). 0 .0). gluCylinder(qobj.10).5. // teapot at (1. glutWireTeapot(0.5). glTranslated(1.15. 0.2).0.25. 0. glTranslated(0.

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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->