BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Tahapan implementasi bertujuan untuk memastikan apakah aplikasi yang dibuat dapat bekerja secara efektif dan efisien sesuai dengan yang diharapkan. Sebelum program diimplementasikan maka program harus bebas dari kesalahan, kesalahan dapat terjadi pada penulisan bahasa program, kesalahan waktu proses, atau kesalahan logical. Program dapat diimplementasikan setelah bebas dari kesalahan setelah melakukan pengujian. Aplikasi ini dibuat dan diimplementasikan pada seperangkat komputer pribadi (Personal Computer)/Laptop dengan spesifikasi sebagai berikut: Tabel 4.1 Kebutuhan Perangkat Keras dan Perangkat Lunak Perangkat Keras yang digunakan Perangkat Lunak yang digunakan Processor : Intel(R) Celeron(R) CPU Dev-C++ 5.6.3 847 @ 1.10GHz OS Windows 7 Ultimate 64-bit Ram : 4 GB Glut.dll Harddisk : 300GB 4.1.1 Implementasi Source Code pada aplikasi Di dalam implementasi ini akan dideskripsikan dengan listing: #include <stdlib.h> #include <GL/glut.h> Listing 4.1 Fungsi Glut Fungsi ini digunakan untuk menggunakan fungsi GLUT yang ada dalam Windows. static float xpoz = 0, ypoz = 0, zpoz = 0,d = -12, e = -5,f = -5; Listing 4.2 Sumbu x,y,dan z Berfungsi untuk mendeklarasikan posisi awal x,y,dan z pada aplikasi yang dijalankan 23
Pengimplementasian yang selanjutnya akan digambarkan dengan tabel. Source Code Penjelasan glcolor3f (1,0,0) berfungsi untuk mendefinisikan warna dari objek yang dibuat dengan warna (1,0,0) yaitu warna merah. glvertex3d(x1,y1,z2) Berfungsi untuk menyatakan sebuah titik koordinat x, y dan z. glclearcolor (0.0, 0.0, 1.0, 0.0); Berfungsi Mendefinisikan warna dari windows yang dibuat dengan warna (0,0,1) yaitu warna biru. glenable(gl_depth_test); Berfungsi untuk mengaktifkan atau menampilkan GL_DEPTH_TEST glshademodel(gl_smooth); Berfungsi untuk memberi warna bayangan dengan satu atau banyak warna glmatrixmode(gl_projection); Berfungsi untuk memberi nilai masukan pada matrix dengan model projection. glloadidentity (); Fungsi untuk memanggil matriks identitas ke matriks saat ini, agar nilai-nilai awal kembali ke pusat koordinat (0,0,0). gltranslatef(d,e,f); Fungsi ini menggeser seluruh pemandangan ke kirikanan, atas-bawah, maju-mundur tergantung nilai x, y, dan z. glrotatef(xpoz,0,1,0); Fungsi untuk memutar seluruh obyek dengan sudut angle (0 359) dan vektor yang dinyatakan dengan nilai x, y, dan z. glbegin(gl_quads); Berfungsi untuk membentuk segi empat. glbegin(gl_triangles); Berfungsi untuk membentuk segitiga, dan tiap segitiga saling lepas. glutswapbuffers(); digunakan untuk menukar bagian belakan buffer menjadi buffer layar (screen buffer). Dalam modus double-buffered, perintah menggambar pada layar, tetapi menggambar pada buffer belakang layar. Pada saat ingin menampilkan gambar, gambar yang berada di buffer belakang layar dipindahkan ke buffer layar, sehingga menghasilkan animasi yang sempurna. 24
glutinitdisplaymode (GLUT_RGB Untuk inisialisasi modus display. Fungsi tersebut GLUT_DEPTH GLUT_DOUBLE); meminta window yang bersifat double buffered, dengan warna RGB. glutinitwindowsize(1024,720); Membuat windows dengan ukuran(1024,720) dengan glutinitwindowposition(100, 100); titik kiri atas jendela diletakkan pada posisi (100,100) di layar computer. glutkeyboardfunc(keyboard); Berfungsi untuk mengaktifkan fungsi pada keyboard. Tabel 4.2 Implementasi Source Code glortho(-12,12,-6,6,-35,35); Mendefinisikan besarnya sistem koordinat dengan range sumbu x adalah [- 12,12], range untuk sumbu y adalah [-6,6], range untuk sumbu z adalah [-35,35]. Contoh gambar pada glortho ada dibawah ini. Gambar 4.1 glortho gluperspective(80.0,2.2, 1.0, 100.0); Berfungsi untuk mendeklarasikan jarak ke depan dan ke belakang dari bidang pandang (clipping plane). Contoh gambar pada gluperspective dibawah ini: 25
Gambar 4.2 glperspective 4.1.2. Implementasi Void pada Source Code Pada source code di aplikasi, terdapat 6 void yang dicetak tebal. Tiap-tiap void memiliki fungsi masing-masing: 1. Void Kubus menjelaskan mengenai bagaimana kotak kubus 3 dimensi dapat terbentuk melalui beberapa titik. Dimana titik-titik tersebut apabila digabung dan ditarik garis akan menghasilkan kubus 3 dimensi. Dalam void kubus sendiri diberi parameter float untuk tiap angka yang masuk. Di dalam void kubus memiliki 6 bagian yang harus diselesaikan agar dapat membentuk kubus 3 dimensi, yaitu bagian depan, belakang, kanan, kiri, atas dan bawah. 2. Void Atap1 dalam void ini terdapat 2 bagian yang terbentuk dari segitiga sama sisi. 3. Void Atap2 dalam void ini terdapat 2 bagian yang terbentuk dari polygon atau segi empat. 4. Void init(void) berfungsi untuk tempat menggambar, dan mengatur pengaturan warna latar dan koordinat sistem. 5. Void display(void) didalam void ini berfungsi sebagai prodesur kerja program yang akan dijalankan. 6. Void Keyboard berisi penggunaan tombol keyboard yang digunakan untuk menggerakkan obyek. 26
4.1.3. Implementasi Source Code Proses Pengerjaan 1.Membuat Kubus, perumpamaan titik koordinatnya terdapat dalam sintak berikut: void kotak(float x1,float y1,float z1,float x2,float y2,float z2) //depan Menggambarkan sisi depan pada kubus glvertex3f(x1,y1,z1); glvertex3f(x2,y1,z1); glvertex3f(x2,y2,z1); glvertex3f(x1,y2,z1); //atas Menggambarkan sisi atas pada kubus glvertex3f(x1,y2,z1); glvertex3f(x2,y2,z1); glvertex3f(x2,y2,z2); glvertex3f(x1,y2,z2); //belakang Menggambarkan sisi belakang pada kubus glvertex3f(x1,y2,z2); glvertex3f(x2,y2,z2); glvertex3f(x2,y1,z2); glvertex3f(x1,y1,z2); //bawah Menggambarkan sisi bawah pada kubus glvertex3f(x1,y1,z2); glvertex3f(x2,y1,z2); glvertex3f(x2,y1,z1); glvertex3f(x1,y1,z1); //samping kiri Menggambarkan sisi kiri pada kubus glvertex3f(x1,y1,z1); glvertex3f(x1,y2,z1); glvertex3f(x1,y2,z2); glvertex3f(x1,y1,z2); 27
//samping kanan Menggambarkan sisi kanan pada kubus glvertex3f(x2,y1,z1); glvertex3f(x2,y2,z1); glvertex3f(x2,y2,z2); glvertex3f(x2,y1,z2); } Pembuatan Kubus diatas sudah dibuat dengan menggunakan void dan belum berarti kubus tersebut sudah dibuat pada aplikasi maka diperlukanlah untuk menggambar seperti dibawah ini. 2. Menggambar menggunakan titik atau koordinat yang dipakai dalam sintak diatas: glbegin(gl_quads); glcolor3f(0.1,0.4,0); kotak(-0.5,-2,0,24.5,0,-33.5);//alas glcolor3f(0,0,0); kotak(6,0,0,24,0.3,-9);//alas glcolor3f(0.4613, 0.4627, 0.4174); kotak(0,0,-12.5,6,0.3,-29);//alas kotak(0.5,0,-12,3,0.3,-12.5); glend(); Penggambaran diatas ialah menggambar sebuah objek yang berbentuk mode GL_QUADS yang sudah dijelaskan pada BAB II ialah segi empat, dan diberikan sebuah warna, jika proses penggambaran ini tidak dilakukan maka tampilan pada aplikasi tidak terdapat apa-apa atau kosong. 3. Pembuatan Atap Rumah dalam bentuk segi empat dan segitiga sama sisi dijelaskan dalam sintak berikut: 28
void Atap1(float x1,float y1,float x2,float y2,float x3,float y3,float x4,float y4,float z1,float z2,float z3) glcolor3f(0.3,0.2,0.1);//sisi kanan; glvertex3d(x3,y3,z1); glvertex3d(x3,y3,z2); glvertex3d(x3,y1,z3); glcolor3f(0.3,0.2,0.1);//sisi kiri; glvertex3d(x4,y4,z2); glvertex3d(x4,y4,z1); glvertex3d(x4,y1,z3); } void Atap2(float x1,float y1,float x2,float y2,float x3,float y3,float x4,float y4,float z1,float z2,float z3) glcolor3f(0.4,0,0.6);//sisi belakang glvertex3d(x4,y4,z1); glvertex3d(x3,y3,z1); glvertex3d(x3,y1,z3); glvertex3d(x4,y1,z3); glcolor3f(0.4,0,0.6);//sisi depan; glvertex3d(x3,y3,z2); glvertex3d(x4,y4,z2); glvertex3d(x4,y1,z3); glvertex3d(x3,y1,z3); } Pembuatan ini sama seperti pembuatan kubus, sedang yang ini pembuatan atap dimana yang atap1 tersebut berbentuk segitiga. Dan atap2 berbentuk segiempat. 29
4. Menggambar obyek segitiga dan segiempat menggunakan titik yang dipakai sintak diatas: glbegin(gl_quads); glcolor3f(0.3f,0.3f,0.3f); Atap2(-0.5,9,24.5,0,24.5,5.2,-0.5,5.2,-33.5,-5,-20);//Atap glend(); glbegin(gl_triangles); Atap1(-0.5,9,-0.5,8,-0.5,5,-0.5,5,-33.5,-4,-20);// sisi atap/genteng kiri Atap1(24.5,9,24.5,8,24.5,5,24.5,5,-33.5,-4,-20);// sisi atap/genteng kanan glend(); Penggambaran diatas ialah menggambar sebuah objek yang berbentuk mode GL_TRIANGLES dan GL_QUADS yang sudah dijelaskan pada BAB II ialah segitiga dan segiempat, dan diberikan sebuah warna, jika proses penggambaran ini tidak dilakukan maka tampilan pada aplikasi tidak terdapat apa-apa atau kosong. 4.1.4. Implementasi Navigasi Pada Aplikasi Setelah aplikasi Visualisasi sudah selesai maka dibawah ini ialah script yang digunakan pada navigasi-navigasi dengan menggunakan keyboard tersebut: Pada Tombol W atau arah Atas switch (key) case 'w': e = e - 1; 30
Pada Tombol A atau arah Kiri switch (key) case 'a': d = d + 1; Pada Tombol S atau arah Bawah switch (key) case 's': e = e + 1; Pada Tombol D atau arah Kanan switch (key) case 'd': d = d - 1; Pada Tombol Q atau arah Depan/Maju switch (key) 31
case 'q': f = f + 1; Pada Tombol E atau arah Belakang/Mundur switch (key) case 'e': f = f - 1; Pada Tombol Y atau Rotasi ke sumbu Y switch (key) case 'y': ypoz=ypoz+5; if (ypoz>360) ypoz=0; Pada Tombol Esc atau exit switch (key) case 27: exit(0); 32
Maksud Dari d,e,f,xpoz disini ialah dari gltranslatef(d,e,f); yang digunakan untuk melakukan perpindahan posisi d ialah sumbu x, dan e ialah sumbu y, dan f ialah sumbu z dan untuk glrotatef(xpoz,0,1,0); ialah melakukan rotasi ke sumbu Y. 4.2 Pengujian Pada tahap ini penulis akan melakukan pengujian (testing) terhadap program aplikasi yang dibuat. Pertama-tama dilakukan pengujian secara modular untuk memastikan apakah hasilnya seperti yang diinginkan. Pengujian selanjutnya dilakukan pada komputer lain dengan tujuan untuk mengetahui apakah program aplikasi dapat berjalan dengan baik Tabel 4.1 Pengujian Black-Box No. Rancangan Proses Hasil yang diharapkan Hasil 1 Melakukan Complier Pada program Menampilkan hasil pada aplikasi OK 2 Tombol W pada Keyboard Kamera akan Bergerak ke Atas OK 3 Tombol A pada Keyboard Kamera akan Bergerak ke kiri OK 4 Tombol S pada Keyboard Kamera akan Bergerak ke bawah OK 5 Tombol D pada Keyboard Kamera akan Bergerak ke kanan OK 6 Tombol Q pada Keyboard Kamera akan Bergerak ke OK depan/maju 7 Tombol E pada Keyboard Kamera akan Bergerak ke OK Belakang/mundur 8 Tombol Y pada Keyboard Kamera akan Berotasi/ berputar ke OK sumbu Y 9 Tombol Esc pada Keyboard Aplikasi akan Keluar OK 4.3 Hasil Program Didalam sub bab ini penulis akan menampilkan hasil akhir pada aplikasi dengan tampak depan. 33
Dibawah ini adalah tampak dari atas dengan membuka atap untuk melihat semua ruangan. 34