23 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
847 @ 1.10GHz
Dev-C++ 5.6.3
OS Windows 7 Ultimate 64-bit Glut.dll
Ram : 4 GB 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
24
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
kiri-kanan, 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.
25 glutInitDisplayMode (GLUT_RGB
|GLUT_DEPTH|GLUT_DOUBLE);
Untuk inisialisasi modus display. Fungsi tersebut meminta window yang bersifat double buffered, dengan warna RGB.
glutInitWindowSize(1024,720); glutInitWindowPosition(100, 100);
Membuat windows dengan ukuran(1024,720) dengan 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:
26
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.
27
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);
28
//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:
29
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.
30
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
void keyboard(unsigned char key, int x, int y) { switch (key) { case 'w': e = e - 1; glutPostRedisplay(); break; }}
31 Pada Tombol A atau arah Kiri
void keyboard(unsigned char key, int x, int y) { switch (key) { case 'a': d = d + 1; glutPostRedisplay(); break; }}
Pada Tombol S atau arah Bawah
void keyboard(unsigned char key, int x, int y) { switch (key) { case 's': e = e + 1; glutPostRedisplay(); break; }}
Pada Tombol D atau arah Kanan
void keyboard(unsigned char key, int x, int y) { switch (key) { case 'd': d = d - 1; glutPostRedisplay(); break; }}
Pada Tombol Q atau arah Depan/Maju void keyboard(unsigned char key, int x, int y) {
32 case 'q': f = f + 1; glutPostRedisplay(); break; }}
Pada Tombol E atau arah Belakang/Mundur void keyboard(unsigned char key, int x, int y) { switch (key) { case 'e': f = f - 1; glutPostRedisplay(); break; }}
Pada Tombol Y atau Rotasi ke sumbu Y void keyboard(unsigned char key, int x, int y) { switch (key) { case 'y': ypoz=ypoz+5; if (ypoz>360) ypoz=0; glutPostRedisplay(); break; }}
Pada Tombol Esc atau exit
void keyboard(unsigned char key, int x, int y) {
switch (key) { case 27: exit(0); }}
33
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
depan/maju
OK
7 Tombol E pada Keyboard Kamera akan Bergerak ke Belakang/mundur
OK
8 Tombol Y pada Keyboard Kamera akan Berotasi/ berputar ke sumbu Y
OK
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 .
34
Dibawah ini adalah tampak dari atas dengan membuka atap untuk melihat semua ruangan.
