materi7 grafik(trandform affine)

MATERI 7Transformasi 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.0Tujuan Instruksional Khusus :

Mahasiswa dapat membuat program untuk menampilkan gambar 3DMateri 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.

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 :

dan

Hal ini berarti titik P berada pada lokasi P = Px i + Py j + Dimana adalah titik pusat koordinat (tidak harus selalu (0,0)).

Disusun oleh : Eko Sediyono1 dari 12

sebelum

sesudah

x

y

x

y

z sebelum

sesudah

Transformasi dari titik P menuju titik Q menggunakan fungsi T() berikut ini.

atau ringkasnya Q = T(P)

Transformasi Affine mempunyai bentuk seperti berikut ini.

dalam bentuk persamaan matriks persamaan di atas dapat diubah menjadi

Contoh :

Lakukan transformasi Affin dari titik P = (1,2) ke Q dengan matriks transformasi berikut ini

Jawab :

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.

Gambar 7.2. Transformasi Dasar.


Transformasi Affine untuk translasi diberikan oleh persamaan berikut ini.

atau lebih ringkasnya

Vektor (m13 , m23) adalah vektor offset yang menyatakan besarnya pergeseran.

Transformasi Affine untuk skala melakukan penskalaan dengan menggunakan dua faktor skala yaitu Sx 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 :

Transformasi Affine untuk rotasi diberikan oleh persamaan berikut ini.

Qx = Px cos() – Py sin(),Qy = Px sin() – Py cos(),

Matriks transformasinya adalah sebagai berikut .

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.


sebelum

sesudah

x

y

x

y

z sebelum

sesudah

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.

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 + atau

Dan transformasinya secara umum dinyatakan dengan persamaan transformasi berikut ini.


dengan M nya adalah

Untuk translasi matrik M tersebut adalah sebagai berikut

dimana (m14, m24, m34) adalah besarnya translasi yang diinginkan.Untuk penskalaan matrik transformasinya adalah sebagai berikut.

dimana (Sx, Sy, Sz) adalah besarnya skala yang diinginkan.Untuk shearing matriks transformasinya adalah sebagai berikut.

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.

Rotasi dengan sumbu x, matrik rotasinya adalah

Rotasi dengan sumbu y, matrik rotasinya adalah


Rotasi dengan sumbu z, matrik rotasinya adalah

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. -70o terhadap sumbu x, c. 30o

terhadap sumbu y, dan d. rotasi -90o terhadap sumbu z.

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 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

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 masing-masing 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 proyeksiglLoadIdentity(); // inisialisasi matrik proyeksiglOrtho(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 modelviewglLoadIdentity(); // inisialisasi matrik modelviewgluLookAt( eye.x, eye.y, eye.z, look.x, look.y, look.z, up.x, up.y, up.z);

// 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 pandangglLoadIdentity();glOrtho(-3.2, 3.2, -2.4, 2.4, 1, 50); // lebar 6.4 dan tinggi 4.8glMatrixMode(GL_MODELVIEW); // mengatur letak kameraglLoadIdentity();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.


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-axisglEnd();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 shapeglLoadIdentity();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 cameraglLoadIdentity();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(); glRotated(90, 0,1.0, 0);


axis(0.5); // y-axisglRotated(-90.0, 1, 0, 0);axis(0.5); // z-axisglPopMatrix();

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 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>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 whiteglViewport(0, 0, 640, 480);glutMainLoop();

}

Tugas :

Ketik dan jalankan program tersebut di atas sampai benar.Tambahkan fasilitas keyboard untuk memutar dan menggeser gambar-gambar 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.


materi7 grafik(trandform affine)

Documents