+ Android

322 Pages·2016·5.83 MB·Indonesian

by  Imam Cholissodin (

Judul

BELAJAR CEPAT DAN PRAKTIS
TENTANG GRAFIKA KOMPUTER
(Teori & Aplikasi)

“Untuk Pengembangan Aplikasi Mobile Dengan Menggunakan
Eclipse Bundle Android, Android Studio Dan OpenGL ES”

Oleh :
Imam Cholissodin
Maya Kurniawati, dkk.

PENGANTAR

Modul ini disusun untuk memberikan pemahaman konsep
dasar dan detail pengembangan Grafika Komputer berbasis aplikasi

Mobile. Materi yang tersedia selain memudahkan para developer,
juga untuk mendukung perkuliahan yang membantu pengayaan

mahasiswa.

Imam Cholissodin S.Si., M.Kom
Dosen Pengampu MK Grafika Komputer FILKOM UB

2014-2016
Kata Pengantar
Alhamdulillahhi robbil alamin, puji syukur kehadirat Allah SWT
atas segala rahmat dan karunia-Nya dengan terselesaikannya penu-
lisan modul ini dengan judul “Belajar Cepat & Praktis Tentang Grafika
Komputer (Teori & Aplikasi) Untuk Pengembangan Aplikasi Mobile
Dengan Menggunakan Eclipse Bundle Android Dan OpenGL”. Buku
ini merupakan uraian dari pemahaman konsep dasar dalam grafika
komputer dan penerapannya, dengan mengedepankan keterampilan
dalam pembuatan dan menampilkan grafik komputer serta berbagai
algoritmanya, untuk mengaplikasikan grafika komputer pada
pemodelan agar memudahkan dalam pembuatan visualisasi informasi
menjadi bentuk geometri, serta mengembangkan teori geometri pada
pembuatan grafik komputer untuk tingkat lanjut yang lebih kompleks.
Grafika komputer telah banyak diaplikasikan pada beberapa
perangkat lunak dengan bahasa pemrograman yang populer seperti
C/C++, Java, dan lainnya. Namun aplikasi grafika komputer pada
perangkat Mobile (Smartphone) masih jarang ditemukan (sangat
langka), terutama dalam bentuk buku yang berbahasa Indonesia. Dan
teknologi Mobile saat ini memang sedang naik daun, baik dimata
pengembang Aplikasi (Developer) maupun dikalangan pengguna
(End User). Hal inilah yang mendasari penulis untuk menyusun cata-
tan-catatan kecil untuk dibuat sebuah naskah tulisan yang mudah un-
tuk dipahami. Dan penulis mengucapkan terimakasih yang sebesar-
besarnya kepada beberapa pihak terkait yang telah membantu dalam
penyelesaian buku ini :
1. Para penulis artikel tentang grafika komputer di forum, web, blog
dan buku yang menjadi referensi buku ini, dan memberi masukan
yang sangat berharga untuk perbaikan dan penyelesaian buku ini.
2. Mbak Maya Kurniawati, yang telah banyak membantu penulisan
buku ini. Dan beberapa mahasiswa terbaik saya lainnya (M. Abyan
Safitra, M. Fatqur Rohman, Abdul Khoir, Faisol Andi Sefihara,
Faisal Akbar, Pasca Immanuddin, Dani Devito, dkk.). Semoga
kontribusi kalian menjadi ilmu yang barokah dan bermanfaat.
Amiin. :)
Buku ini masih jauh dari sempurna, begitulah kata yang tepat
terkait dengan buku ini. Maka penulis mohon kritik dan saran untuk
perbaikan dan penyempurnaan buku ini. Selamat membaca buku ini
dan semoga bermanfaat.

Malang, 19 Agustus 2014

Penulis
ii
Daftar Isi
Judul ...................................................................................................... i
Kata Pengantar ..................................................................................... ii
Daftar Isi ............................................................................................... iii
Daftar Tabel ......................................................................................... vii
Daftar Gambar .................................................................................... viii
Daftar Source Code ........................................................................... xxii
BAB 1 Introduction to OpenGL .................................................... 1
1.1 Pengertian Grafika Komputer .......................................... 1
1.2 Persiapan di Eclipse (ADT) .............................................. 1
1.2.1 Fast Emulator With Intel (HAXM) ......................... 1
1.2.2 Konfigurasi "Eclipse + Bluestacks" ...................... 7
1.2.3 Konfigurasi "Eclipse + Genymotion" .................. 14
1.2.4 Konfigurasi pada Smartphone Android .............. 35
1.2.5 Solusi Error/Problem/Bug .................................. 38
1.2.6 Membuat Project Baru ....................................... 42
1.2.7 Siklus Hidup Kode Program ............................... 45
1.3 Persiapan di Android Studio (AS) .................................. 46
1.3.1 Installasi Android Studio .................................... 46
1.3.2 View SDK Android Studio .................................. 61
1.3.3 Solusi Error/ Problem Android Studio ................ 64
1.3.4 Compare Eclipse dengan Android Studio .......... 92
1.3.5 Membuat AVD baru dari AVD Manager ............. 93
1.3.6 Import Project Eclipse ke Android Studio ........ 102
1.3.7 Konfigurasi pada Smartphone Android ............ 120
1.3.8 Konfigurasi "AS + Genymotion" ....................... 121
1.3.9 Membuat Project Baru di AS ............................ 155
1.3.10 Membuat Module Baru di Project AS ............. 164
BAB 2 Primitives Object .......................................................... 169
2.1 Pengertian Primitives Object ........................................ 169
iii
2.2 Membuat Titik ............................................................... 170
2.3 Membuat Garis dengan Titik ........................................ 182
2.4 Membuat Segitiga & Segiempat .................................. 198
2.5 Membuat Polygon/Segibanyak .................................... 232
2.6 Membuat Lingkaran ..................................................... 247
2.7 Membuat Polar Object ................................................. 279
BAB 3 Transformations ........................................................... 286
3.1 Pengertian Transformasi .............................................. 286
3.2 Matematika & Proses Transformasi ............................. 286
3.3 Urutan Transformasi .................................................... 290
3.4 Membuat Kincir Angin .................................................. 290
BAB 4 Viewing / Camera ......................................................... 300
4.1 Pengertian Viewing / Camera ...................................... 300
4.1.1 Proyeksi Paralel ............................................... 300
4.1.2 Syntax Proyeksi Paralel ................................... 300
4.1.3 Proyeksi Perspektif .......................................... 301
4.1.4 Syntax Proyeksi Perspektif .............................. 301
4.2 Matematika Synthetic Camera ..................................... 303
4.3 Membuat Multiple View Object .................................... 307
BAB 5 Texture Mapping .......................................................... 317
5.1 Pengertian Texture Mapping ........................................ 317
5.2 Representasi Texture Mapping .................................... 318
5.3 Parameter Texture Mapping ........................................ 319
5.4 Texture Mapping Pada Segitiga................................... 321
5.5 Texture Mapping Pada Lingkaran ................................ 339
5.6 Texture Mapping Pada Kubus ..................................... 359
5.7 Texture Mapping Pada Bola ........................................ 367
BAB 6 Blending ....................................................................... 378
6.1 Pengertian Blending ..................................................... 378
6.2 Source and Destination Factor Pada Blending ............ 379
6.3 Matematika Blending ................................................... 379
iv
6.4 Blending Dua Segitiga ................................................. 381
6.5 Blending Pada Kubus .................................................. 400
6.6 Blending Pada Bola ..................................................... 411
BAB 7 Lighting & Shading ....................................................... 422
7.1 Pengertian Lighting & Shading .................................... 422
7.2 Proses dan Fungsi Pada Lighting ................................ 423
7.3 Normal Vektor Pada Lighting ....................................... 424
7.4 Lighting Pada Interior ................................................... 425
BAB 8 Model Loading & Curve ............................................... 542
8.1 Pengertian Model Loading & Curve ............................. 542
8.2 Model Creator .............................................................. 543
8.3 Model Loading ............................................................. 544
8.4 Fractal Curve ................................................................ 551
BAB 9 Project Pilihan .............................................................. 558
9.1 Random Maze .............................................................. 558
9.1.1 Konsep ............................................................. 558
9.1.2 Tampilan Implementasi .................................... 558
9.1.3 Source Code .................................................... 560
9.2 Smart Flappy ................................................................ 723
9.2.1 Konsep ............................................................. 723
9.2.2 Tampilan Implementasi .................................... 723
9.2.3 Source Code .................................................... 725
9.3 Chicken Hero ............................................................... 760
9.3.1 Konsep ............................................................. 760
9.3.2 Fungsi Dasar Pembentuk Objek ...................... 761
9.3.3 Tampilan Implementasi .................................... 762
9.3.4 Source Code .................................................... 763
9.4 Ayo Nyoblos ................................................................. 854
9.4.1 Konsep ............................................................. 854
9.4.2 Fitur/Menu ........................................................ 855
9.4.3 Tampilan Implementasi .................................... 855
v
9.4.4 Source Code .................................................... 857
9.5 Touch Your Coin .......................................................... 918
9.5.1 Konsep ............................................................. 918
9.5.2 Fungsi Dasar Pembentuk Objek ...................... 920
9.5.3 Tampilan Implementasi .................................... 921
9.5.4 Source Code .................................................... 923
9.6 Zoo Photo Attack ....................................................... 1064
9.6.1 Konsep ........................................................... 1064
9.6.2 Nilai-Nilai Edukasi .......................................... 1064
9.6.3 Fitur Yang Digunakan .................................... 1065
9.6.4 Tampilan Implementasi .................................. 1065
9.6.5 Source Code .................................................. 1066
9.7 Ular Tangga ............................................................... 1118
9.7.1 Konsep ........................................................... 1118
9.7.2 Peraturan Permainan ..................................... 1119
9.7.3 Nilai-Nilai Edukasi .......................................... 1120
9.7.4 Fitur Yang Digunakan .................................... 1121
9.7.5 Fungsi Dasar Pembentuk Objek .................... 1121
9.7.6 Tampilan Implementasi .................................. 1124
9.7.7 Source Code .................................................. 1127
9.8 Math Snail .................................................................. 1158
9.8.1 Konsep ........................................................... 1158
9.8.2 Fungsi Dasar Pembentuk Objek .................... 1159
9.8.3 Tampilan Implementasi .................................. 1175
9.8.4 Source Code .................................................. 1177
Daftar Pustaka ................................................................................ 1311
Biografi Penulis ............................................................................... 1312

vi
Daftar Tabel
Tabel 1.1 Log “Run adb.exe by cmd as Administrator” ...................... 75
Tabel 1.2 Concepts Map : Eclipse Vs Android Studio ........................ 92
Tabel 9.1 Fungsi Dasar Pembentuk Objek ...................................... 761
Tabel 9.2 Fungsi Dasar Pembentuk Objek ...................................... 920
Tabel 9.3 Fungsi Dasar Pembentuk Objek .................................... 1122
Tabel 9.4 Fungsi Dasar Pembentuk Objek .................................... 1159

vii
Daftar Gambar
Gambar 1.1 Android SDK Manager Sebelum Klik Deselect All ........... 2
Gambar 1.2 Klik Intel x86 Atom System Image.................................... 2
Gambar 1.3 Beri tanda cek Intel x86 Emulator Accelerator (HAXM) ... 3
Gambar 1.4 Klik Install 2 packages ...................................................... 3
Gambar 1.5 Klik Android SDK License lalu klik Accept Lisense .......... 4
Gambar 1.6 Klik Intel Android Extra License lalu klik Accept Lisense . 4
Gambar 1.7 Proses Download ............................................................. 4
Gambar 1.8 Tampilan setelah download dan instalasiselesai ............. 5
Gambar 1.9 Membuat Android Virtual Device (AVD) baru ................... 6
Gambar 1.10 Klik AVD pada list lalu klik Start ..................................... 6
Gambar 1.11 Intel HAXM ..................................................................... 7
Gambar 1.12 Tampilan AVD ................................................................ 7
Gambar 1.13 Download SDK ADT Bundle Eclipse .............................. 8
Gambar 1.14 Download Bluestacks ..................................................... 8
Gambar 1.15 ADW Launcher ............................................................... 9
Gambar 1.16 Interface Bluestacks ....................................................... 9
Gambar 1.17 Pesan “Failed to create the Java Virtual Machine” ........ 9
Gambar 1.18 Advanced system settings ............................................ 10
Gambar 1.19 Click Path ..................................................................... 11
Gambar 1.20 Edit System Variables .................................................. 11
Gambar 1.21 Menjalankan cmd ......................................................... 12
Gambar 1.22 Command masuk ke folder BlueStacks ....................... 12
Gambar 1.23 HD-Adb.exe start-server ............................................... 12
Gambar 1.24 Setelah HD-Adb.exe start-server dijalankan ................ 13
Gambar 1.25 Klik"Window ->"Show view"->“Other” ........................... 13
Gambar 1.26 Tampilan device pada Bluestacks emulator ................. 14
Gambar 1.27 Android Device Chooser .............................................. 14
Gambar 1.28 Main Window Genymotion ........................................... 15
Gambar 1.29 Pop-up Menambah Virtual Device ............................... 15
viii
Gambar 1.30 Klik OK .......................................................................... 15
Gambar 1.31 Isi Username/Password ,Connect ................................ 16
Gambar 1.32 Pilih Virtual Device ....................................................... 16
Gambar 1.33 Beri Nama Virtual Device ............................................. 17
Gambar 1.34 Virtual Device Terdownload & Terdeploy ..................... 17
Gambar 1.35 Deployment window Finish ........................................... 18
Gambar 1.36 Play ............................................................................... 18
Gambar 1.37 File .ova ........................................................................ 19
Gambar 1.38 Deploying virtual device.. ............................................. 19
Gambar 1.39 Virtual device Finish ..................................................... 20
Gambar 1.40 Virtual device is Ready ................................................. 20
Gambar 1.41 Import Virtual Devices (*.ova) di Virtual Box ................ 21
Gambar 1.42 Virtual device is Ready Pada Virtual Box ..................... 22
Gambar 1.43 Virtual device is Ready Pada Genymotion ................... 22
Gambar 1.44 Set Letak Android SDK di Genymotion ........................ 23
Gambar 1.45 Add Repository, lalu klik OK ......................................... 23
Gambar 1.46 There are not categorized items................................... 24
Gambar 1.47 Uncheck “Group items by category” ............................. 24
Gambar 1.48 Cek "Genymotion Eclipse Tools" .................................. 25
Gambar 1.49 "Genymotion Eclipse Tools", Klik Finish ...................... 25
Gambar 1.50 plugin is unsigned, klik OK saja.................................... 25
Gambar 1.51 Software Updates, restart to take effect ....................... 26
Gambar 1.52 Set directory Genymotion ............................................. 26
Gambar 1.53 Icon Genymotion di Eclipse .......................................... 26
Gambar 1.54 Start Virtual Device ....................................................... 27
Gambar 1.55 Loading Virtual Device ................................................. 27
Gambar 1.56 Tampilan Virtual Samsung Galaxy S2 - 4.1.1 - API 16 -
480x800 .............................................................................................. 28
Gambar 1.57 Error unable to start the virtual device ......................... 28
Gambar 1.58 Kosongkan Host-only Networks ................................... 29
Gambar 1.59 Auto Create VirtualBox Host-Only Ethernet Adapter ... 29
Gambar 1.60 Network Connections ................................................... 30
ix
Gambar 1.61 VirtualBox Host-Only Network ...................................... 30
Gambar 1.62 klik “Edits selected” ...................................................... 31
Gambar 1.63 Adapter & DHCP VB Host-Only Ethernet Adapter ....... 32
Gambar 1.64 Adapter & DHCP VB Host-Only Ethernet Adapter #2 .. 32
Gambar 1.65 Pilih Android Applicaton atau Run Configuration.. ....... 33
Gambar 1.66 Target, pilih “Always prompt to pick device” ................. 33
Gambar 1.67 Genymotion– samsung_galaxy_s2.. ............................ 34
Gambar 1.68 Segitiga, Etc. ................................................................ 34
Gambar 1.69 USB Debugging Pada Smartphone Samsung ............. 35
Gambar 1.70 adt-bundle-windows-x86-20131030_sdk_platform-tools
............................................................................................................ 35
Gambar 1.71 Setelah mengetikkan drive lokasi sdk .......................... 36
Gambar 1.72 adb.exe devices ........................................................... 36
Gambar 1.73 Setelah adb.exe devices dijalankan ............................. 36
Gambar 1.74 Setelah adb.exe devices dijalankan pada Eclipse ....... 37
Gambar 1.75 Muncul smartphone Samsung pada Android devices
chooser ............................................................................................... 37
Gambar 1.76 adb.exe kill-server dan start-server .............................. 38
Gambar 1.77 R cannot be resolved to a variable ............................... 38
Gambar 1.78 Error pada MainActivity.java ......................................... 39
Gambar 1.79 Ubah package pada AndroidManifest.xml ................... 39
Gambar 1.80 c. Pilih “com.example.mygl” ................................... 40
Gambar 1.81 Package pada AndroidManifest.xml telah diubah ....... 40
Gambar 1.82 d. Save file “AndroidManifest.xml” .......................... 41
Gambar 1.83 Fix pada MainActivity.java ............................................ 41
Gambar 1.84 New Android Application Project .................................. 42
Gambar 1.85 Configure Project .......................................................... 42
Gambar 1.86 Configure the attributes of the icon set ........................ 43
Gambar 1.87 Pilih “Blank Activity” ...................................................... 43
Gambar 1.88 Create “Blank Activity” .................................................. 44
Gambar 1.89 Tampilan Project .......................................................... 44
Gambar 1.90 Tampilan Project Membuat Titik ................................... 45
x