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. 2014-2016 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
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
2014-2016
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
ii
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
iii
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
iv
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
v
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
vi
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
vii
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
viii
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
ix
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
x
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
xi
Gambar 1.91 main() vs activity ........................................................... 45
Gambar 1.93 Android Studio (Hero) ................................................... 46
Gambar 1.94 Mater Android Studio .................................................... 47
Gambar 1.95 Please Wait Setup is Loading ...................................... 47
Gambar 1.96 Android Studio Setup ................................................... 48
Gambar 1.97 Pilih Komponen ............................................................ 48
Gambar 1.98 License Agreement ...................................................... 49
Gambar 1.99 Configuration Setting .................................................... 49
Gambar 1.100 Choose Start Menu Folder ......................................... 50
Gambar 1.101 Proses Installing Android Studio ................................ 50
Gambar 1.102 Extracting Android SDK .............................................. 51
Gambar 1.103 Installation MVC++ 2010 x86 Redistributable Setup . 51
Gambar 1.104 MVC++ Installation Is Complete ................................. 52
Gambar 1.105 Setup Was Successfully ............................................. 52
Gambar 1.106 Completing the Android Studio Setup ........................ 53
Gambar 1.107 Error launching Android Studio .................................. 53
Gambar 1.108 Advanced system settings .......................................... 54
Gambar 1.109 Click Path ................................................................... 54
Gambar 1.110 Edit System Variables ................................................ 54
Gambar 1.111 Studio64.exe – System Error ..................................... 55
Gambar 1.112 MVC++ 2010 x86 Redistributable Package ............... 55
Gambar 1.113 Start Android Studio ................................................... 55
Gambar 1.114 Import Previous Version Of Android Studio ............... 56
Gambar 1.115 Android Studio Powered by the IntelliJ Paltform ........ 56
Gambar 1.116 Fetching Android SDK component information .......... 56
Gambar 1.117 Checking for updated SDK component ...................... 57
Gambar 1.118 The following SDK … : build-tools-21.1.1 .................. 57
Gambar 1.119 Setup Wizard - Downloading Components ................ 58
Gambar 1.120 Start Android Studio dari Apps Search ...................... 58
Gambar 1.121 Setup Wizard (Klik Retry) ........................................... 59
Gambar 1.122 Downloading Android SDK Build-tools, revision 21.1.1 ............................................................................................................ 59
xii
Gambar 1.123 Download Android SDK Build-tools was successfully 60
Gambar 1.124 Welcome to Android Studio ........................................ 60
Gambar 1.125 Masuk di path “C:\Users\[Nama Komputer]” .............. 61
Gambar 1.126 Klik "Options" .............................................................. 61
Gambar 1.127 Folder Options ............................................................ 62
Gambar 1.128 Klik “Show hidden files, folders, and drivers” ............. 62
Gambar 1.129 “AppData” sudah terlihat ............................................ 63
Gambar 1.130 Lokasi SDK Android Studio ........................................ 63
Gambar 1.131 Run “MainActivity” ...................................................... 64
Gambar 1.132 Edit System Variables JDK 1.8 .................................. 64
Gambar 1.133 Launch Emulator (Launch emulator) .......................... 65
Gambar 1.134 Launch Emulator (running device) ............................. 65
Gambar 1.135 Unexpected Error (Local path doesn't exist) Sync.. ... 66
Gambar 1.136 Local path doesn't exist (Event Log) .......................... 66
Gambar 1.137 Jalankan perintah “gradlew clean packageDebug” .... 66
Gambar 1.138 Klik “Setting” di Android Studio .................................. 66
Gambar 1.139 isi “Gradle VM options:” dengan “-Xmx256m” ............ 67
Gambar 1.140 Check “Edit Configurations….” ................................... 67
Gambar 1.141 Android Application (app) ........................................... 68
Gambar 1.142 Android Application (MainActivity) .............................. 68
Gambar 1.143 Failed to complete Gradle execution .......................... 69
Gambar 1.144 ERROR: This AVD's is missing a kernel file .............. 69
Gambar 1.145 Failed to complete Gradle execution .......................... 70
Gambar 1.146 ERROR: requires hardware acceleration ................... 70
Gambar 1.147 Cannot launch AVD in emulator ................................. 70
Gambar 1.148 intelhaxm-android.exe ................................................ 71
Gambar 1.149 Install HAXM 1.1.1 ...................................................... 71
Gambar 1.150 Error launching Android Studio .................................. 72
Gambar 1.151 Delete “JAVA_HOME” dari “Environment Variables” . 72
Gambar 1.152 After Delete “JAVA_HOME” ....................................... 73
Gambar 1.153 Error launching Android Studio .................................. 73
xiii
Gambar 1.154 Menganti variable value “JAVA_HOME” .................... 73
Gambar 1.155 Menghubungkan Android Studio + Bluestack I .......... 74
Gambar 1.156 Menghubungkan Android Studio + Bluestack II ......... 74
Gambar 1.157 Run cmd.exe as Administrator ................................... 75
Gambar 1.158 Run adb.exe by cmd as Administrator ....................... 75
Gambar 1.159 Klik “Android Device Monitor” ..................................... 82
Gambar 1.160 Bluestack telah aktif di Android Studio ....................... 82
Gambar 1.161 Success run App (Android Studio + Bluestack) ......... 83
Gambar 1.162 Lokasi file *.apk hasil running ..................................... 83
Gambar 1.163 INSTALL FAILED OLDER SDK ................................. 84
Gambar 1.164 Klik “build.gradle(Module:app)” .................................. 84
Gambar 1.165 Ubah compileSdkVersion 19 ...................................... 84
Gambar 1.166 Ubah minSdkVersion & targetSdkVersion ................. 85
Gambar 1.167 Klik "Sync Now" .......................................................... 85
Gambar 1.168 Gradle project sync in progress... .............................. 85
Gambar 1.169 Language Level Changed .......................................... 86
Gambar 1.170 Files under the build folder are generated and should not be edited ....................................................................................... 86
Gambar 1.171 Ubah “dependencies” ................................................. 86
Gambar 1.172 File android-support-v4.jar ......................................... 87
Gambar 1.173 Klik “Sync Now” .......................................................... 87
Gambar 1.174 Setting untuk old version dari appcompat library ....... 88
Gambar 1.175 Ubah styles.xml .......................................................... 88
Gambar 1.176 Ubah file “menu_main.xml” ........................................ 88
Gambar 1.177 Content Asli "menu_main.xml” ................................... 89
Gambar 1.178 Ubah Content Asli "menu_main.xml” ......................... 89
Gambar 1.179 Solusi error “Unfortunately, [NamaProject] has stopped” .............................................................................................. 90
Gambar 1.180 Tampilan Primitive Object .......................................... 90
Gambar 1.181 Project Structure ......................................................... 91
Gambar 1.182 Remove Module ......................................................... 91
Gambar 1.183 Gradle project sync in progress.... ............................. 91
xiv
Gambar 1.184 Klik OK ........................................................................ 92
Gambar 1.185 Delete directory "Nama Project..." .............................. 92
Gambar 1.186 AVD Manager ............................................................. 93
Gambar 1.187 Daftar Virtual Device .................................................. 94
Gambar 1.188 Pilih Hardware (Phone) .............................................. 94
Gambar 1.189 Pilih System Image (Lollipop) ..................................... 95
Gambar 1.190 Virtual Device Configuration ....................................... 96
Gambar 1.191 Verify Configuration .................................................... 96
Gambar 1.192 Creating/Updating AVD .............................................. 97
Gambar 1.193 AVD baru sudah terbentuk ......................................... 97
Gambar 1.194 Running AVD di Android Studio ................................. 97
Gambar 1.195 Tampilan Loading AVD di Android Studio .................. 98
Gambar 1.196 Tampilan AVD di Android Studio I .............................. 99
Gambar 1.197 Tampilan AVD di Android Studio II ........................... 100
Gambar 1.198 Tampilan AVD di Android Studio III .......................... 101
Gambar 1.199 Tampilan AVD di Android Studio IV ......................... 102
Gambar 1.200 Import Project ........................................................... 102
Gambar 1.201 Import Project ADT-Eclipse ke Android Studio ........ 103
Gambar 1.202 Memilih Tipe Import Project ...................................... 103
Gambar 1.203 Tutup semua Project yang masih aktif ..................... 104
Gambar 1.204 Muncul “Welcome to Android Studio’ ....................... 104
Gambar 1.205 Klik “Import Non-Android Studio project” .................. 105
Gambar 1.206 Import Project ADT-Eclipse ke Android Studio ........ 105
Gambar 1.207 Memilih Tipe Import (.. from external model Gradle) 106
Gambar 1.208 Proses Importing ...................................................... 106
Gambar 1.209 List Project hasil Import ............................................ 107
Gambar 1.210 Error Can’t start Mercurial: hg.exe setelah Import ... 108
Gambar 1.211 Klik “Fix it” ................................................................. 108
Gambar 1.212 Memiih satu Project yang mau di-Import .................. 108
Gambar 1.213 Path tujuan untuk menyimpan hasil Import Project .. 109
Gambar 1.214 Import Destination Directory, Klik Next .................... 109
xv
Gambar 1.215 Import per Project From ADT Eclipse ...................... 110
Gambar 1.216 Proses Importing sedang dilakukan ......................... 110
Gambar 1.217 Summary setelah proses Import .............................. 110
Gambar 1.218 Tampilan Project hasil Import ................................... 111
Gambar 1.219 Error Message “Gradle project sync failed ............... 111
Gambar 1.220 Klik “Try Again” ......................................................... 111
Gambar 1.221 Error “Project SDK is not defined” ............................ 112
Gambar 1.222 Klik “Setup SDK” ...................................................... 112
Gambar 1.223 Select Project SDK ................................................... 112
Gambar 1.224 Klik “Try Again” lagi .................................................. 113
Gambar 1.225 Masuk di “Setting”, lalu pilih “Grade” ........................ 113
Gambar 1.226 Buka “Open Module Settings” .................................. 114
Gambar 1.227 Lokasi SDK dan JDK ................................................ 115
Gambar 1.228 Project Structure ....................................................... 115
Gambar 1.229 Project Structure modules masih kosong ................. 116
Gambar 1.230 Project Structure modules telah disi ......................... 116
Gambar 1.231 Klik “Try Again” ......................................................... 117
Gambar 1.232 Klik Install missing paltform(s) and sync project ...... 117
Gambar 1.233 License Agreement .................................................. 117
Gambar 1.234 Pilih Android SDK Platform 19 ................................. 118
Gambar 1.235 Installing Requested Components ........................... 118
Gambar 1.236 Installing Requested Components (Klik Finish) ....... 119
Gambar 1.237 Terlihat Android 19 sudah terinstall .......................... 119
Gambar 1.238 USB Debugging Pada Smartphone Samsung ......... 120
Gambar 1.239 Pilih Devices pada Android Studio ........................... 120
Gambar 1.240 Install Genymotion .................................................... 121
Gambar 1.241 Select Setup Language ............................................ 121
Gambar 1.242 Setup – Genymotion I ............................................... 122
Gambar 1.243 Setup – Genymotion II .............................................. 122
Gambar 1.244 Setup – Genymotion III ............................................. 123
Gambar 1.245 Setup – Genymotion IV ............................................ 123
xvi
Gambar 1.246 Setup – Genymotion V ............................................. 124
Gambar 1.247 Proses Installing Genymotion................................... 124
Gambar 1.248 Install VirtualBox I ..................................................... 125
Gambar 1.249 Install VirtualBox II .................................................... 125
Gambar 1.250 Install VirtualBox III ................................................... 126
Gambar 1.251 Install VirtualBox IV .................................................. 126
Gambar 1.252 Install VirtualBox VI .................................................. 127
Gambar 1.253 Install VirtualBox VII ................................................. 127
Gambar 1.254 Install VirtualBox VIII ................................................ 128
Gambar 1.255 Yes, restart the computer now ................................. 128
Gambar 1.256 Ketik “Genymotion”, Klik “Install plugin” ................... 129
Gambar 1.257 Download and Install ................................................ 129
Gambar 1.258 Download Plugins ..................................................... 130
Gambar 1.259 Klik “Close” ............................................................... 130
Gambar 1.260 Plugin Changed ........................................................ 130
Gambar 1.261 Android Studio, Klik File > Settings. ......................... 131
Gambar 1.262 Klik Genymotion ....................................................... 131
Gambar 1.263 Klik “Kotak Kecil” disebelah kanan text field ............ 132
Gambar 1.264 Browse lokasi menginstall Genymotion ................... 132
Gambar 1.265 Content Select the path to the Genymotion folder ... 133
Gambar 1.266 Logo Genymotion di Android Studio ........................ 133
Gambar 1.267 Genymotion Device Manager ................................... 133
Gambar 1.268 Pilih salah satu virtual device ................................... 134
Gambar 1.269 Klik Start (Run Virtual Device) .................................. 134
Gambar 1.270 Initializing virtual device ............................................ 134
Gambar 1.271 Loading Android di virtual device ............................. 135
Gambar 1.272 Virtual device Genymotion I ..................................... 136
Gambar 1.273 Virtual device Genymotion II .................................... 137
Gambar 1.274 Virtual device Genymotion III ................................... 138
Gambar 1.275 Virtual device Genymotion IV ................................... 139
Gambar 1.276 MainActivity.java ....................................................... 140
xvii
Gambar 1.277 Point_n_Lines_with_Points_Object.java .................. 140
Gambar 1.278 ESRender.java ......................................................... 141
Gambar 1.279 Run 'app' ................................................................... 152
Gambar 1.280 Gradle: Executing Tasks [:app:assembleDebug] ..... 152
Gambar 1.281 Pilih running device .................................................. 152
Gambar 1.282 Gradle build finished ................................................. 153
Gambar 1.283 Tampilah aplikasi OpenGL ....................................... 153
Gambar 1.284 “Log.v” di kode program ........................................... 154
Gambar 1.285 Tracking log.v ........................................................... 154
Gambar 1.290 Klik “Start a new Android Studio project” ................. 155
Gambar 1.291 Android Studio, Klik File > New Project…. ............... 155
Gambar 1.292 Berikan nama aplikasi yang anda buat .................... 156
Gambar 1.293 Pilih “Phone and Tablet” dan “API 8:.. (Froyo)” ........ 156
Gambar 1.294 API Level:Froyo sampai Lollipop .............................. 157
Gambar 1.295 APIs Level:Froyo for OpenGL ES 2.0 ...................... 157
Gambar 1.296 APIs Level:Gingerbread ........................................... 158
Gambar 1.297 APIs Level:Ice Cream Sandwicth ............................. 158
Gambar 1.298 APIs Level:Jelly Bean 16 .......................................... 159
Gambar 1.299 APIs Level:Jelly Bean 17 .......................................... 159
Gambar 1.300 APIs Level:Jelly Bean 18 .......................................... 160
Gambar 1.301 APIs Level:Kit Kat 19 ................................................ 160
Gambar 1.302 APIs Level:Lollipop 21 .............................................. 161
Gambar 1.303 Pilih “Blank Activity” .................................................. 161
Gambar 1.304 Choose options for your new file .............................. 162
Gambar 1.305 Building PrimitiveObjectES ....................................... 162
Gambar 1.306 Initializing Rendering Library .................................... 162
Gambar 1.307 Missing styles. Is the correct theme chosen ............ 163
Gambar 1.308 “java -> com.example.imacho.primitiveobjectes” ..... 163
Gambar 1.309 Siapkan file-file project ............................................. 164
Gambar 1.310 module default "app" ................................................ 164
Gambar 1.311 Android Studio, Klik File > New Module…. .............. 165
xviii
Gambar 1.312 Pilih “Phone and Tablet Application” ........................ 165
Gambar 1.313 Berikan nama Aplikasi/Library name ........................ 166
Gambar 1.314 Pilih “Blank Activity” .................................................. 166
Gambar 1.315 Default isi dari “Choose options for your new file”.... 167
Gambar 1.316 Tunggu beberapa saat “Gradle in progress...” ......... 167
Gambar 1.317 Module siap dikoding ................................................ 167
Gambar 1.318 Module “app” dan “createpoint” ................................ 168
Gambar 2.1 GL_POINTS & GL_[LINES/LINE_STRIP/LINE_LOOP] .......................................................................................................... 169
Gambar 2.2 GL_[TRIANGLES/TRIANGLE_STRIP/TRIANGLE_FAN] .......................................................................................................... 170
Gambar 2.3 Titik manual dan generate ............................................ 171
Gambar 2.4 Membuat Titik Sederhana ............................................ 182
Gambar 2.5 Membuat garis dengan GL_POINTS ........................... 184
Gambar 2.6 Log.v("value Math.abs((.. ............................................. 184
Gambar 2.7 Tracking log.v (logcat) .................................................. 184
Gambar 2.8 Membuat Garis dan Titik .............................................. 198
Gambar 2.9 Membuat Segiempat dengan 2 Segitiga ...................... 199
Gambar 2.10 Segitiga dan segiempat .............................................. 200
Gambar 2.11 Membuat Segitiga Sederhana .................................... 220
Gambar 2.12 Membuat Segiempat .................................................. 232
Gambar 2.13 Wired-Flat-Color Segilima (Pentagon) ....................... 233
Gambar 2.14 Polygon statis dan dinamis (n-sisi) ............................. 234
Gambar 2.15 Ilustrasi membuat Lingkaran ...................................... 247
Gambar 2.16 Ilustrasi Membuat Bola ............................................... 248
Gambar 2.17 Membuat Lingkaran Flat dan Gradasi ........................ 250
Gambar 2.18 Membuat Lingkaran Flat dan Gradasi dinamis .......... 250
Gambar 2.19 Membuat Lingkaran Sederhana ................................. 278
Gambar 2.20 Sistem Koordinat Polar (r, Ө) ..................................... 279
Gambar 2.21 Membuat Polar Object ................................................ 285
Gambar 3.1 Vertex Transformation Pipeline .................................... 286
Gambar 3.2 Contoh Proses Translasi .............................................. 287
xix
Gambar 3.3 Contoh Proses Scaling ................................................. 288
Gambar 3.4 Contoh Proses Rotasi .................................................. 288
Gambar 3.5 Contoh Proses Shearing .............................................. 288
Gambar 3.6 Contoh Proses Kombinasi Transformasi ...................... 289
Gambar 3.7 Membuat Kincir Angin .................................................. 299
Gambar 4.1 Proyeksi paralel ............................................................ 300
Gambar 4.2 Proyeksi Perspektif ....................................................... 301
Gambar 4.3 gluPerspective()............................................................ 302
Gambar 4.4 glFrustum() ................................................................... 302
Gambar 4.5 Cara Kerja Kamera Sintetik .......................................... 303
Gambar 4.6 Sistem koordinat kamera sintetik ................................. 303
Gambar 4.7 Gambar synthetic camera dari vertex hasil trtasformasi perspektif (u*,v*) ............................................................................... 307
Gambar 4.8 Ilustrasi Multiple View Object ....................................... 307
Gambar 4.9 Multiple View Object ..................................................... 316
Gambar 5.1 Texture Mapping .......................................................... 317
Gambar 5.2 Ilustrasi Rasterisasi ...................................................... 318
Gambar 5.3 Bitmap Texture ............................................................. 319
Gambar 5.4 Magnification dan Minification ...................................... 319
Gambar 5.5 Repeating Texture ........................................................ 320
Gambar 5.6 Clamping Texture ......................................................... 320
Gambar 5.7 Repeating dan Clamping Texture ................................. 321
Gambar 5.8 Texture Mapping Pada Segitiga ................................... 339
Gambar 5.9 Texture Mapping Pada Lingkaran ................................ 359
Gambar 5.10 Texture Mapping Pada Kubus .................................... 367
Gambar 5.11 Texture Mapping Pada Bola ....................................... 377
Gambar 6.1 Teknik blending untuk mendapatkan efek pantulan ..... 378
Gambar 6.2 Blending Dua Segitiga .................................................. 399
Gambar 6.3 Blending Pada Kubus (Blending tidak terlihat jika belum ada gerakan sentuhan ke sembarang arah pada layarnya) ............. 411
Gambar 6.4 Blending Pada Bola ...................................................... 421
Gambar 7.1 Pencahayaan ................................................................ 422
xx
Gambar 7.2 Normal Vector ............................................................... 424
Gambar 7.3 Lighting Pada Interior .................................................. 541
Gambar 8.1 Pembuatan Model 3D ................................................... 542
Gambar 8.2 Aplikasi Blender ............................................................ 542
Gambar 8.3 Model Loading (objek belum diberi texture) ................. 550
Gambar 8.4 Garis Lurus ................................................................... 551
Gambar 8.5 Garis Lurus yang telah dibagi menjadi 3 bagian .......... 551
Gambar 8.6 Garis Lurus yang telah dibentuk segitiga di tengah bagiannya ......................................................................................... 551
Gambar 8.7 Kurva Fraktal Koch ....................................................... 552
Gambar 8.8 Kurva Fraktal LindenMayer (L System) ........................ 552
Gambar 8.9 Polinomial berderajat 2 ................................................. 553
Gambar 8.10 Polinomial berderajat 3 ............................................... 554
Gambar 8.11 Polinomial berderajat 4 ............................................... 554
Gambar 8.12 Polinomial berderajat 5 ............................................... 554
Gambar 8.13 Polinomial berderajat 6 ............................................... 555
Gambar 8.14 Polinomial berderajat 7 ............................................... 555
Gambar 8.15 Kurva Fraktal Set MandelBrot .................................... 556
Gambar 8.16 Kurva Set Julia 1 ........................................................ 556
Gambar 8.17 Kurva Set Julia 2 ........................................................ 557
Gambar 9.1 Random Maze dengan Background Hitam .................. 558
Gambar 9.2 Random Maze dengan Background Abu-Abu .............. 559
Gambar 9.3 Random Maze Background Gambar ............................ 559
Gambar 9.4 Random Maze Background Gambar, Control Objek.... 559
Gambar 9.5 file “Roboto-Regular.ttf” ................................................ 718
Gambar 9.6 File res\layout ............................................................... 718
Gambar 9.7 File Audio ...................................................................... 722
Gambar 9.8 File Gambar untuk Texture Mapping ............................ 722
Gambar 9.9 Tampilan Awal Untuk Memulai Game .......................... 723
Gambar 9.10 Tampilan Menu Utama ............................................... 724
Gambar 9.11 Tampilan Soal Pada Aplikasi ...................................... 724
Gambar 9.12 Tampilan skor saat game selsai dan jawaban salah . 724
xxi
Gambar 9.13 Tampilan skor akhir saat game belum selesai karena objek burung menabrak tiang ........................................................... 725
Gambar 9.14 Tampilan skor saat game selsai dan jawaban benar semua ............................................................................................... 725
Gambar 9.15 Tampilan Awal Untuk Memulai Game ........................ 762
Gambar 9.16 Tampilan Game ketika di play .................................... 763
Gambar 9.17 Tampilan Score .......................................................... 763
Gambar 9.18 Menu Utama ............................................................... 855
Gambar 9.19 Tutorial Game ............................................................. 856
Gambar 9.20 Game .......................................................................... 856
Gambar 9.21 Developers ................................................................. 856
Gambar 9.22 Flowchart Touch Your Coin ........................................ 919
Gambar 9.23 Tampilan Loading ....................................................... 922
Gambar 9.24 Tampilan Menu Utama ............................................... 922
Gambar 9.25 Tampilan Help ............................................................ 922
Gambar 9.26 Tampilan About .......................................................... 923
Gambar 9.27 Tampilan Memulai Game ........................................... 923
Gambar 9.28 Tampilan Awal Untuk Memulai Game ...................... 1065
Gambar 9.29 Tampilan Bentuk Quiz .............................................. 1065
Gambar 9.30 Ular Tangga Awal ..................................................... 1119
Gambar 9.31 Tampilan Awal Untuk Memulai Game ...................... 1125
Gambar 9.32 Tampilan Menu Utama ............................................. 1125
Gambar 9.33 Tampilan Petunjuk Permainan ................................. 1126
Gambar 9.34 Tampilan Permainan Ular Tangga Sejarah .............. 1126
Gambar 9.35 Tampilan Menang ..................................................... 1127
Gambar 9.36 Menu Awal ................................................................ 1175
Gambar 9.37 Get Ready ................................................................ 1175
Gambar 9.38 Soal .......................................................................... 1176
Gambar 9.39 Finish ........................................................................ 1176
xxii
Daftar Source Code
Source Code 1.1 MainActivity.java ................................................... 141
Source Code 1.2 Point_n_Lines_with_Points_Object.java .............. 143
Source Code 1.3 ESRender.java ..................................................... 150
Source Code 2.1 Code Membuat Titik (Ukuran Dinamis) ................ 171
Source Code 2.2 Code Lain Membuat Titik Sederhana ................... 176
Source Code 2.3 Code Membuat Garis dengan Titik (Solid) ........... 185
Source Code 2.4 Code Lain Membuat Garis dengan Titik ............... 192
Source Code 2.5 Code Membuat Segitiga & Segiempat ................. 201
Source Code 2.6 Code Lain Membuat Segitiga Sederhana ............ 208
Source Code 2.7 Code Membuat Segiempat................................... 220
Source Code 2.8 Membuat Polygon Statis dan Dinamis ................. 234
Source Code 2.9 Code Membuat Lingkaran Gradasi & Dinamis ..... 250
Source Code 2.10 Code Lain Membuat Lingkaran Sederhana ....... 272
Source Code 2.11 Code Membuat Polar Object .............................. 279
Source Code 3.1 Code Membuat Kincir Angin................................. 290
Source Code 4.1 Code Membuat Multiple View Object ................... 308
Source Code 5.1 Code Texture Mapping Pada Segitiga ................. 321
Source Code 5.2 Code Texture Mapping Pada Lingkaran .............. 339
Source Code 5.3 Code Texture Mapping Pada Kubus .................... 359
Source Code 5.4 Code Texture Mapping Pada Bola ....................... 367
Source Code 6.1 Code Blending Dua Segitiga ................................ 381
Source Code 6.2 Code Blending Pada Kubus ................................. 400
Source Code 6.3 Code Blending Pada Bola .................................... 411
Source Code 7.1 Code Lighting Pada Interior.................................. 425
Source Code 8.1 Code Model Loading ............................................ 544
Source Code 9.1 Code Random Maze ............................................ 560
Source Code 9.2 Code Smart Flappy .............................................. 725
Source Code 9.3 Code Chicken Hero .............................................. 763
Source Code 9.4 Code Ayo Nyoblos! ............................................... 857
xxiii
Source Code 9.5 Code Touch Your Coin ......................................... 923
Source Code 9.6 Code Guess The Animal .................................... 1066
Source Code 9.7 Code Ular Tangga .............................................. 1127
1
BAB 1 Introduction to OpenGL
1.1 Pengertian Grafika Komputer
Grafika Komputer adalah bagian dari Ilmu Komputer yang memiliki konsep mengkorversi dari informasi menjadi objek visual secara digital, sekaligus didalamnya proses manipulasi. Konsep ini merupakan kebalikan dari computer vision. Objek visual tersebut dapat berupa 3 dimensi maupun 2 dimensi yang meliputi beberapa contoh seperti titik, garis lurus, garis lengkung, maupun objek yang komplek. Operasi yang dilakukan pada objek visual tersebut, dimulai dari setiap pixel matrik yang membentuk suatu objek tertentu dengan ukuran tertentu. Meskipun objek tertentu tersebut terlihat sangat komplek, apalagi jika sudah diberikan beberapa efek dan manipulasi yang sangat detail dan bagus, namun sebenarnya objek tersebut sebenarnya hanya disusun dari objek sederhana yaitu titik-titik yang sangat banyak, yang meliputi keseluruhan permukaan objek komplek tersebut. Selain itu, dukungan perkembangan perangkat lunak dan perangkat keras juga menjadikan Grafika Komputer memiliki perkembangan yang sangat pesat, terutama pada aplikasi mobile yang menjanjikan hasil produk grafis menjadi sangat berkulitas.
1.2 Persiapan di Eclipse (ADT)
1.2.1 Fast Emulator With Intel (HAXM)
Android memiliki dukungan penuh untuk OpenGL, meskipun library-nya tidak selengkap pada C/C++ di Visual Studio (GLUT -OpenGL Utility Toolkit- Library) atau di Netbean OpenGL (LWJGL -Lightweight Java Game Library). Berikut ini adalah cara untuk membuat dan mengaktifkan emulator Android dengan prosesor Intel (HAXM).
1. Aktifkan “Intel VT” atau intel virtualization technology di BIOS. 2. UpdateAndroid SDK pada Android target, pada contoh ini yang
diperbarui adalah “Android 4.4 – API Level 19″dengan CPU/ABI menggunakan“Intel Atom x86″.
You can buy the books, but not knowledge.
2
Pada Tool Bar, klik “Windows” –>klik “Android SDK Manager”.
Gambar 1.1 Android SDK Manager Sebelum Klik Deselect All
Klik “Deselect All” menghilangkan tanda cek pada item yang saat ini dipilihlalui klik pada Android target yang diinginkan, jika menggunakan “Android 4.4 – API Level 19″beri tanda cek untuk “Intel x86 Atom System Image”kemudian beri tanda cek untuk “Intel x86 Emulator Accelerator (HAXM)”.
Gambar 1.2 Klik Intel x86 Atom System Image
3
Gambar 1.3 Beri tanda cek Intel x86 Emulator Accelerator (HAXM)
Klik “Install 2 packages”.
Gambar 1.4 Klik Install 2 packages
Klik “Android SDK License”, kemudian klik “Accept Lisense”.
4
Gambar 1.5 Klik Android SDK License lalu klik Accept Lisense
Klik “Intel Android Extra License”, then click “Accept Lisense”.
Gambar 1.6 Klik Intel Android Extra License lalu klik Accept Lisense
Klik “Install”. Tunggu hingga download selesai.
Gambar 1.7 Proses Download
5
Tampilan setelah download serta instalasi “Intel x86 Atom System Image” dan “Intel x86 Emulator Accelerator (HAXM)” selesai. Lalu Close “Android SDK Manager”.
Gambar 1.8 Tampilan setelah download dan instalasiselesai
Restart Eclipse. 3. Untuk membuat AVD, klik “Android Virtual Device Manager”,
pada CPU/ABI menggunakan pilihan “Intel Atom x86″lalu pada Emulation Option, beri tanda cekuntuk “Use Host GPU”. Lalu klik “OK”.
6
Gambar 1.9 Membuat Android Virtual Device (AVD) baru
4. Setelah membuat AVD lalu klik AVD pada list lalu klik Start.
Gambar 1.10 Klik AVD pada list lalu klik Start
7
5. Agar AVD atau “Android Emulator” dapat dijalankan dengan cepat. Close AVD atau “Android Emulator” yang saat ini digunakan.
6. Install HAXM pada sdk android path berikut “…/adt-bundle-windows-x86-20131030\sdk\extras\intel\Hardware_Accelerated_Execution_Manager\IntelHaxm.exe”.
Gambar 1.11 Intel HAXM
7. Lalu jalankan kembali AVD atau “Android Emulator” (Jika ingin merotasi layar AVD, gunakan Ctrl + F11).
Gambar 1.12 Tampilan AVD
8. Selesai dan emulator Android telah dapat digunakan.
1.2.2 Konfigurasi "Eclipse + Bluestacks"
Bluestack adalah aplikasi emulator Android untuk PC. Langkah-langkah untuk konfigurasi Eclipse dan Bluestack pada Android adalah sebagai berikut:
1. Download Eclipse + Android SDK (Eclipse Bundle Android) pada link (32 bit) https://goo.gl/KZwJcz (± 491.8 MB), (64 bit)
8
https://goo.gl/05lUbF (± 491.9 MB) atau Android Studio di http://developer.android.com/sdk/index.html#download.
Gambar 1.13 Download SDK ADT Bundle Eclipse
2. Setup Android Developer Tools (ADT Bundle) hingga instalasi selesai.
3. Install Bluestacks dengan installer offline pada link : a. (ver. 1.1) https://goo.gl/o6zNpH (± 108.35 MB), atau b. (ver. 1.2) https://goo.gl/CGbphW (± 128 MB), c. (ver. 2) https://goo.gl/MUUQLM (± 267.98 MB). atau online pada link http://www.bluestacks.com.
Gambar 1.14 Download Bluestacks
4. Setelah instalasi Bluestacks selesai, jalankanBluestacks, lalu install launcher seperti “ADW Launcher, LauncherPro” dari Google Play untuk memudahkan dalam menjalankan aplikasi Android pada Bluestacks.
9
Gambar 1.15 ADW Launcher
Gambar 1.16 Interface Bluestacks
5. Jalankan Eclipse, jika gagal dan muncul pesan sebagai berikut: Failed to create the Java Virtual Machine, untuk
mengatasinya:
Gambar 1.17 Pesan “Failed to create the Java Virtual Machine”
10
Buka file “..\adt-bundle-windows-x86-20131030\eclipse\eclipse.ini”,kemudian edit “-XX:MaxPermSize=256M” menjadi “-XX:MaxPermSize=128M” atau sebaliknya. Ketikkan tanpa tanda kutip.
Failed to run JDK (meskipun JDK sudah ter-install sebelumnya), maka untuk mengatasinya: o Copy path JDK pada komputer, misalnya “C:\Program
Files\Java\jdk1.7.0_40\bin”. o Buka “Control panel”–>”System and Security”–
>”System”–>”Advanced system settings”.
Gambar 1.18 Advanced system settings
o Klik “Environment Variable…”, pada “System variables” klik “path” lalu klik “Edit”.
This books is only a-z,0-9, few symbol & picture.
Although like this, those are irreplaceble with treasure or
anything and how much money that you have spend
to buy it.
11
Gambar 1.19 Click Path
o Tambahkan “Variable value:” dengan “;C:\Program Files\Java\jdk1.7.0_40\bin”, kemudian klik “OK” sebanyak 3 kali.
Gambar 1.20 Edit System Variables
o Jalankan, kembali Eclipse.
12
6. Kemudian untuk mengkoneksikan Bluestack dan Eclipse, langkah-langkahnya sebagai berikut: Jalankan cmd (Window + R), lalu klik “Ok”.
Gambar 1.21 Menjalankan cmd
Ketikkan “cd c:\Program Files\BlueStacks” lalu tekan “Enter” button.
Gambar 1.22 Command masuk ke folder BlueStacks
Ketikkan ini“HD-Adb.exe start-server”, lalu tekan “Enter”.
Gambar 1.23 HD-Adb.exe start-server
13
Tampilan setelah dikoneksikan (pada cmd) :
Gambar 1.24 Setelah HD-Adb.exe start-server dijalankan
Tampilan setelah dikoneksikan (pada Eclipse) : Untuk menampilkan “Devices”, click “Window” –> ”Show view” –> ”Other” –> ”Android” –> ”Devices”.
Gambar 1.25 Klik"Window ->"Show view"->“Other”
14
Gambar 1.26 Tampilan device pada Bluestacks emulator
Gambar 1.27 Android Device Chooser
Jika gagal dalam mengkoneksikan, ketikkan“HD-Adb.exe kill-server” lalu tekan “Enter”, tunggu beberapa saat lalu ketikkan lagi“HD-Adb.exe start-server” selanjutnya tekan “Enter”.
1.2.3 Konfigurasi "Eclipse + Genymotion"
Langkah-langkah konfigurasi Eclipse dan Genymotion pada Android adalah sebagai berikut:
1. Download Genymotion di link : a. (Master + Virtual Devices) https://goo.gl/bNm9W7 (± 1.6 GB) b. (Master Only) https://goo.gl/WPxuP1 (± 183 MB)
2. Run Genymotion, dan buat dahulu virtual device di Genymotion.
15
3. Run Genymotion (klik icon di desktop) 4. Main window akan muncul
Gambar 1.28 Main Window Genymotion
5. Lalu akan muncul pop-up dan meminta untuk menambah virtual device.
Gambar 1.29 Pop-up Menambah Virtual Device
6. Klik ok lalu akan muncul
Gambar 1.30 Klik OK
16
7. Klik connect. Isi dengan username/email address dan password, lalu klik "Connect" .
Gambar 1.31 Isi Username/Password ,Connect
8. Setelah terkoneksi akan muncul virtual device di bawah ini.Pilih virtual device misalkan (Nexus 7 - 4.3) lalu klik "Next" .
Gambar 1.32 Pilih Virtual Device
17
9. Beri nama untuk virtual devicenya lalu klik next.
Gambar 1.33 Beri Nama Virtual Device
10. Virtual device akan terdownload dan di deploy.
Gambar 1.34 Virtual Device Terdownload & Terdeploy
18
11. Klik finish untuk mengakhiri deployment window.
Gambar 1.35 Deployment window Finish
12. Klik play untuk memulai virtual device.
Gambar 1.36 Play
19
13. Jika ingin meng-install secara offline “virtual devices”, siapkan, misal beberapa file berikut di folder “..\VirtualDevicesGenymobile\Genymobile\Genymotion\ova” :
Gambar 1.37 File .ova
Copykan ke folder : “C:\Users\{ComputerName}\AppData\Local\Genymobile\Genymotion\ova”.
Klik “Add”, lalu “Next”, “Next”, dan “Finish”
Gambar 1.38 Deploying virtual device..
20
Gambar 1.39 Virtual device Finish
Gambar 1.40 Virtual device is Ready
21
14. Atau dengan cara membuka Virtual Box, Klik FileImport Appliance.. Klik (Pilih salah satu file *.ova) pada “C:\Users\{ComputerName}\AppData\Local\Genymobile\Genymotion\ova”. Lalu Klik “Next”, Klik “Import’.
Gambar 1.41 Import Virtual Devices (*.ova) di Virtual Box
22
15. Virtual device yang sudah di-import, dapat cek pada Virtual Box dan juga pada Genymotion dan siap untuk dijalankan.
Gambar 1.42 Virtual device is Ready Pada Virtual Box
Gambar 1.43 Virtual device is Ready Pada Genymotion
23
16. Klik “Settings”, lalu klik “ADB”, isikan dengan, misal letak folder sdk anda ada di “E:/adt-bundle-windows-x86_64-20131030/sdk”
Gambar 1.44 Set Letak Android SDK di Genymotion
17. Opsi lainnya, lakukan instalasi plugin Genymotion ke Eclipse.
Caranya sebagai berikut: a. Start Eclipse b. Buka menu "HelpInstall New Software..." c. Pada window yang muncul, klik tombol "Add..." d. Isi form dengan Name: Genymobile
Location: http://plugins.genymotion.com/eclipse
Gambar 1.45 Add Repository, lalu klik OK
24
Gambar 1.46 There are not categorized items
e. Jika “Genymotion Eclipse Tools” tidak ada pada list, dan hanya ada “There are not categorized items”, maka solusinya uncheck “Group items by category”.
Gambar 1.47 Uncheck “Group items by category”
25
f. Pliih opsi “Genymotion Eclipse Tools”, lalu klik "Next"
Gambar 1.48 Cek "Genymotion Eclipse Tools"
Gambar 1.49 "Genymotion Eclipse Tools", Klik Finish
g. Eclipse akan mengingatkan bahwa plugin is unsigned, klik OK saja.
Gambar 1.50 plugin is unsigned, klik OK saja
26
h. Restart Eclipse
Gambar 1.51 Software Updates, restart to take effect
i. Setelah restart, maka akan muncul tombol di toolbar: j. Klik icon tersebut, jika belum diset directory Genymotionnya,
pada “WindowPreferencesGenymotion”, Set directory Genymotion misal dengan “C:\Program Files\Genymobile\Genymotion”.
Gambar 1.52 Set directory Genymotion
Gambar 1.53 Icon Genymotion di Eclipse
27
18. Pada pilihan muncul beberapa nama virtual devices, pilih salah satu, lalu klik start
Gambar 1.54 Start Virtual Device
Lokasi Virtual Devices : C:/Users/{ComputerName}/AppData/Local/Genymobile/Genymotion/deployed/
19. Akan loading seperti dibawah ini
Gambar 1.55 Loading Virtual Device
28
20. Lalu setelah loadingnya selesai akan keluar seperti ini
Gambar 1.56 Tampilan Virtual Samsung Galaxy S2 - 4.1.1 - API 16 - 480x800
21. Jika keluar error “unable to start the virtual device, virtualbox can't start the virtual device”
Gambar 1.57 Error unable to start the virtual device
29
a. Close Genymotion, buka Virtual Box. Klik FilePreferencesNetworkTab Host-only Network, Hapus semua “VirtualBox Host-Only Ethernet Adapter” satu per satu, dengan cara klik “Removes selected”, Klik tombol “remove” (Pastikan Host-only Networks, telah kosong), Klik OK. Close Virtual Box.
Gambar 1.58 Kosongkan Host-only Networks
b. Buka Genymotion, maka secara otomatis “VirtualBox Host-
Only Ethernet Adapter” pada Virtual Box akan dibuat kembali, dan pada “Your virtual devices” jangan di klik “Start” terlebih dahulu. Lakukan langkah “c”.
Gambar 1.59 Auto Create VirtualBox Host-Only Ethernet Adapter
30
c. Kemudian, masuk ke “Control Panel\Network and Internet\Network Connections”.
Gambar 1.60 Network Connections
d. Klik Kanan “VirtualBox Host-Only Network”, klik “Properties”, checked “VirtualBox NDIS6 Bridged Networking Driver”, lalu klik pada “Internet Protocol Version 4 (TCP/IPv4)”, lalu klik “Properties”, lakukan juga pada “VirtualBox Host-Only Network #2”, atau semua yang diawali dengan “VirtualBox Host-Only Network ..”.
Gambar 1.61 VirtualBox Host-Only Network
31
e. Pada “VirtualBox Host-Only Network” Gambar diatas, tertera “IP address: 192.168.56.2”, “Subnet mask : 255.255.255.0”. Kemudian cek pada Virtual Box, Klik FilePreferencesNetworkTab Host-only Network, lalu klik “Edits selected” untuk “VirtualBox Host-Only Ethernet Adapter” (Pastikan sama). Setelah itu, pada Genymotion “Your virtual devices”, Pilih salah satu Virtual Devices, lalu Klik “Start”.
Gambar 1.62 klik “Edits selected”
32
Gambar 1.63 Adapter & DHCP VB Host-Only Ethernet Adapter
Gambar 1.64 Adapter & DHCP VB Host-Only Ethernet Adapter #2
33
22. Buka eclipse > pada project openGL “2_2Primitives_Project_ES” klik kanan run as > Pilih Android Applicaton atau Run Configuration..
Gambar 1.65 Pilih Android Applicaton atau Run Configuration..
23. Pada Current Project, klik Target (Pilih) lalu Run
Gambar 1.66 Target, pilih “Always prompt to pick device”
34
24. Akan keluar “Android Device Chooser” seperti di bawah ini dan klik “genymotion – samsung_galaxy_s2..”, lalu klik “ok”
Gambar 1.67 Genymotion– samsung_galaxy_s2..
25. Lalu pada akhirnya akan keluar gambar seperti di bawah ini.
Gambar 1.68 Segitiga, Etc.
35
1.2.4 Konfigurasi pada Smartphone Android
Jika ingin menjadikan smartphone Android sebagai emulator, maka langkah-langkah konfigurasinya adalah sebagai berikut:
1. Siapkan smartphone Android. Pada contoh ini, smartphone An-droid yang digunakan adalah Samsung GT-i9070 Galaxy S Ad-vance.
2. Pada smartphone, pililh “setting”, lalu klik “Applica-tions/Application Manager” –> ”Development” –> klik/ beri tanda cek pada “USB debugging”.
Gambar 1.69 USB Debugging Pada Smartphone Samsung
3. Pada PC, jalankan cmd (Window + R), lalu klik “OK. Ketikkan lokasi sdk pada komputer, misalnya “cd I:\Master\adt-bundle-windows-x86-20131030\sdk\platform-tools” lalu tekan “Enter”.
Gambar 1.70 adt-bundle-windows-x86-20131030_sdk_platform-tools
36
4. Ketikkan “I:” sebagai drive lokasi sdk, lalu tekan “Enter”.
Gambar 1.71 Setelah mengetikkan drive lokasi sdk
5. Ketikkan “adb.exe devices”, lalu tekan “Enter”.
Gambar 1.72 adb.exe devices
Gambar 1.73 Setelah adb.exe devices dijalankan
37
Gambar 1.74 Setelah adb.exe devices dijalankan pada Eclipse
6. Cek “Devices” pada Eclipse.
Gambar 1.75 Muncul smartphone Samsung pada Android devices chooser
7. Jika gagal dalam mengkoneksikan, ketikkan“adb.exe kill-server” lalu tekan “Enter”, tunggu beberapa saat lalu ketikkan lagi“adb.exe start-server” selanjutnya tekan “Enter”.
38
Gambar 1.76 adb.exe kill-server dan start-server
8. Konfigurasi selesai.
1.2.5 Solusi Error/Problem/Bug
Berikut beberapa error yang sering terjadi ketika mejalankan kode program :
1. Error “R cannot be resolved to a variable”, biasanya pada “MainActivity.java”.
Gambar 1.77 R cannot be resolved to a variable
Solusi :
a. Penyebabnya biasanya karena setelah me-rename nama “package” pada folder “src” (misal dari “com.example.myopengl” diubah sedikit menjadi “com.example.mygl”). Meskipun pada folder “src” sudah berhasil direname, biasanya pada folder “gen” masih ada nama “package” dengan “com.example.myopengl”.
39
Gambar 1.78 Error pada MainActivity.java
b. Open File “MyIntro_OpenGL/AndroidManifest.xml”, pada tab “Manifest”, ubah Package “com.example.myopengl” dengan cara klik “Browse...”, lalu pilih
Gambar 1.79 Ubah package pada AndroidManifest.xml
40
c. Pilih “com.example.mygl”, lalu klik “OK”
Gambar 1.80 c. Pilih “com.example.mygl”
Gambar 1.81 Package pada AndroidManifest.xml telah diubah
41
d. Save file “AndroidManifest.xml”. Lalu klik “Yes”
Gambar 1.82 d. Save file “AndroidManifest.xml”
e. Tampilan project, setelah tidak ada error
Gambar 1.83 Fix pada MainActivity.java
42
1.2.6 Membuat Project Baru
Berikut beberapa langkah untuk membuat project baru aplikasi android pada eclipse :
1. Klik “FileNewAndroid Application Project”, Masukkan misal “Application Name = IntroToOpenGL”. Klik Next.
Gambar 1.84 New Android Application Project
2. Konfigurasi Project, Klik Next
Gambar 1.85 Configure Project
43
3. Konfigurasi icon, Klik Next
Gambar 1.86 Configure the attributes of the icon set
4. Pilih “Blank Activity”, Klik Next
Gambar 1.87 Pilih “Blank Activity”
44
5. Create Blank Activity, Klik Finish
Gambar 1.88 Create “Blank Activity”
6. Tampilan Project. Setelah itu, replace file “MainActivity.java” tersebut dengan contoh kode program “Primitive Object” pada sub bab 2 dan selanjutnya.
Gambar 1.89 Tampilan Project
45
7. Tampilan Project, setelah di-replace (dilengkapi) dengan file “MainActivity.java”, “Create_Points.java”, dan “ESRender.java” dari contoh kode program Bab 2 “Primitive Object”. Misal untuk “Membuat Titik”.
Gambar 1.90 Tampilan Project Membuat Titik
1.2.7 Siklus Hidup Kode Program
Penjelasan ini meliputi proses siklus hidup atau lifecycle dari aplikasi android, hubungan antara kode-kode sampai pada alur jalannya kode mulai dari awal hingga akhir. Paradigma awal jalannya pemrograman umumnya menggunakan main(), pada Android berjalannya sistem diawali dengan Activity dengan menerapkan metode callback tertentu yang sesuai dengan tahapan lifecycle-nya. Terdapat metode callback untuk memulai suatu Activity dan ada juga ada callback untuk men-destroy suatu Activity.
Gambar 1.91 main() vs activity
46
1.3 Persiapan di Android Studio (AS)
1.3.1 Installasi Android Studio
Master installer android-studio-bundle-135.1641136 ini meru-pakan versi stabil pertama dari lingkungan pengembangan Android yang terintegrasi, dan ke depan, versi ini akan menjadi platform untuk pengembangan aplikasi Android. “Google releases Android Studio, kills off Eclipse ADT plugin”, ini adalah suatu berita yang sangat be-sar. Bagaimana tidak, selama ini kami biasanya menggunakan “Eclipse ADT plugin” untuk development aplikasi android selama ku-run waktu kurang lebih 2 tahun terakhir. Google mengumumkan pada hari Selasa 8 Desember 2014 bahwa setelah dua tahun bekerja, akhirnya siap untuk meluncurkan pengembangan terpadu berbasis IDE, yaitu IntelliJ, Android Studio, kepada dunia dengan rilis versi 1.0. Android Studio akan menawarkan pengalaman yang lebih baik bagi para pengembang Android dari pada Eclipse tradisional yang digunakan sebelumnya, "kick" artinya Google menghentian Plugin Android Developer Tools (ADT) untuk Eclipse yang mengintegrasikan sejumlah alat Android ke dalamnya.
Gambar 1.92 Android Studio (Hero)
47
"Plugin ADT untuk Eclipse tidak lagi aktif atau di-support lagi," kata situs pengembang Google. "Jika saat ini Anda menggunakannya, Anda harus bermigrasi ke Android Studio dengan sesegera mungkin." Beberapa penggemar Eclipse juga banyak yang mempertanyakan hal ini, namun beberapa kalangan pengembang berpendapat bahwa, dibandingkan dengan Eclipse, Android Studio menawarkan ling-kungan pengembang dan desainer antarmuka pengguna yang lebih baik, serta efisiensi memori yang lebih baik dan meningkatkan ke-cepatan eksekusi kode program. Dan kemungkinan hal ini pasti ban-yak yang berbeda pendapat dari para pengembang. Ketika Android Studio diresmikan pada Mei tahun lalu, terdapat komentar di TechRe-public: "Eclipse dapat mencoba, tetapi tidak dapat bersaing dengan Visual Studio (Milik Microsoft), atau bahkan Xcode (Milik Apple). “The Eclipse Foundation” yang meliputi Google, telah mencoba lebih dari satu dekade untuk membuat Eclipse IDE menjadi lebih layak dan lebih baik, akan tetapi masih saja berat untuk mampu bersaing."
Berikut adalah langkah-langkah instalasi Android Studio untuk pengembangan aplikasi android :
Double klik Master Android Studio
Gambar 1.93 Mater Android Studio
Tunggu beberapa detik
Gambar 1.94 Please Wait Setup is Loading
48
Welcome to the Android Studio Setup, Klik “Next”
Gambar 1.95 Android Studio Setup
Pilih Komponen, Klik “Next”
Gambar 1.96 Pilih Komponen
49
License Agreement, Klik “I Agree”
Gambar 1.97 License Agreement
Configuration Setting, Klik “Next”
Gambar 1.98 Configuration Setting
50
Choose Start Menu Folder, Klik “Install”
Gambar 1.99 Choose Start Menu Folder
Proses Installing
Gambar 1.100 Proses Installing Android Studio
51
Gambar 1.101 Extracting Android SDK
Gambar 1.102 Installation MVC++ 2010 x86 Redistributable Setup
52
Gambar 1.103 MVC++ Installation Is Complete
Setup Was Successfully, Klik “Next”
Gambar 1.104 Setup Was Successfully
53
Completing the Android Studio Setup
Gambar 1.105 Completing the Android Studio Setup
Ketika menjalankan Android Studio, kemungkinan anda men-galami hal-hal berikut ini :
Error launching Android Studio, Solusi “Setting di Control Panel”
Gambar 1.106 Error launching Android Studio
Detail solusinya adalah sebagai berikut : a. Copy path JDK pada komputer, misalnya “C:\Program
Files\Java\jdk1.7.0_40\bin”. b. Buka “Control panel”–>”System and Security”–
>”System”–>”Advanced system settings”.
54
Gambar 1.107 Advanced system settings
c. Klik “Environment Variable…”, pada “System variables” klik “path” lalu klik “Edit”.
Gambar 1.108 Click Path
d. Tambahkan “Variable value:” dengan “;C:\Program Files\Java\jdk1.7.0_40\bin”, kemudian klik “OK” sebanyak 3 kali.
Gambar 1.109 Edit System Variables
55
studio64.exe – System Error (The program can’t start be-cause MSVCR100.dll is missing from your computer. Try reinstalling the program to fix this problem.)
Gambar 1.110 Studio64.exe – System Error
Solusi untuk “The program can’t start because MSVCR100.dll is missing from your computer. Try reinstalling the program to fix this problem” adalah dengan men-download dan install “MVC++ 2010 x86 Redistributable Package” dari web Microsoft.
Gambar 1.111 MVC++ 2010 x86 Redistributable Package
Start Android Studio
Gambar 1.112 Start Android Studio
56
Gambar 1.113 Import Previous Version Of Android Studio
Gambar 1.114 Android Studio Powered by the IntelliJ Paltform
Gambar 1.115 Fetching Android SDK component information
57
The following SDK component was not installed: build-tools-21.1.1, jika memang tidak terkoneksi dengan internet, Klik “Cancel”
Gambar 1.116 Checking for updated SDK component
Gambar 1.117 The following SDK … : build-tools-21.1.1
58
Gambar 1.118 Setup Wizard - Downloading Components
Pada Gambar 1.118, “The following SDK component was not installed: build-tools-21.1.1” akan muncul setelah klik “Cancel”. Kemudian pada Gambar 1.119, setelah klik “Finish”, jika tidak muncul Android Studio, maka sebaiknya anda install terlebih dahulu “build-tools-21.1.1”.
Start Android Studio dari Apps Search
Gambar 1.119 Start Android Studio dari Apps Search
59
Pastikan komputer atau laptop anda internetnya sudah “connected”, lalu Klik “Retry”
Gambar 1.120 Setup Wizard (Klik Retry)
Gambar 1.121 Downloading Android SDK Build-tools, revision 21.1.1
60
Setelah selesai “Downloading Android SDK Build-tools”, Klik “Finish”
Gambar 1.122 Download Android SDK Build-tools was successfully
Android Studio siap untuk digunakan
Gambar 1.123 Welcome to Android Studio
61
1.3.2 View SDK Android Studio
Berikut ini adalah langkah-langkah untuk menampilkan folder AppData SDK dari Android yang sudah di-install dalam komputer di “C:\Users\[Nama Komputer]” anda.
Masuk di path “C:\Users\[Nama Komputer]”, Klik “Vew”
Gambar 1.124 Masuk di path “C:\Users\[Nama Komputer]”
Klik “Options”
Gambar 1.125 Klik "Options"
62
Klik “View” pada Folder Options
Gambar 1.126 Folder Options
Klik “Show hidden files, folders, and drivers”, Lalu Klik “Ap-
play” lalu Klik “OK”
Gambar 1.127 Klik “Show hidden files, folders, and drivers”
63
Tampilan path sekarang, “AppData” sudah terlihat
Gambar 1.128 “AppData” sudah terlihat
Double Klik “AppData”, atau langsung kunjungi path ini
“C:\Users\[Nama Komputer]\AppData\Local\Android\sdk”
Gambar 1.129 Lokasi SDK Android Studio
64
1.3.3 Solusi Error/ Problem Android Studio
Run “MainActivity”
Gambar 1.130 Run “MainActivity”
Ketika anda menjalankan pertama kali, jika terdapat Error “JDK”. Maka coba cek di “Variable value:” misal ada jdk yang anda install lebih dari satu versi, dan telah diisikan juga di “Variable value:” misal “;C:\Program Files\Java\jdk1.7.0_40\bin”, maka anda harus menggantinya dengan versi yang terbaru misal “;C:\Program Files\Java\jdk1.8.0_31\bin”. Kemudian Klik “Try Again”. Tunggu be-berapa detik.
Gambar 1.131 Edit System Variables JDK 1.8
65
Gambar 1.132 Launch Emulator (Launch emulator)
Gambar 1.133 Launch Emulator (running device)
66
Klik “OK”, jIka ada bug akan tampil seperti ini. Solusinya Klik “Sync Project with Grandle files”
Gambar 1.134 Unexpected Error (Local path doesn't exist) Sync..
Gambar 1.135 Local path doesn't exist (Event Log)
Solusi awal yang dapat dilakukan untuk Error “Local path doesn’t exist” adalah download dengan memasukkan perintah pada terminal “gradlew clean packageDebug” seperti dibawah ini.
Gambar 1.136 Jalankan perintah “gradlew clean packageDebug”
Lalu dengan Klik “Setting”, Klik “Gradle”, kemudian isi “Gradle VM options:” dengan “-Xmx256m”.
Gambar 1.137 Klik “Setting” di Android Studio
67
Gambar 1.138 isi “Gradle VM options:” dengan “-Xmx256m”
Check “Edit Configurations….”
Gambar 1.139 Check “Edit Configurations….”
Di dalam “Edit Configurations….””, nama form-nya “Run/Debug Configurations”. Disana terdapat Android Application “app” dan “MainActivity”. Pastikan anda juga telah men-setting seperti pada gambar di bawah ini, terdapat juga “Gradle-aware Make”.
68
Gambar 1.140 Android Application (app)
Gambar 1.141 Android Application (MainActivity)
69
Error ketika running dengan MyAVD (“C:\Users\Imacho\AppData\Local\Android\sdk\tools\emulator.exe -avd MyAVD -netspeed full -netdelay none emula-tor: ERROR: This AVD's configuration is missing a kernel file!!”)
Gambar 1.142 Failed to complete Gradle execution
Gambar 1.143 ERROR: This AVD's is missing a kernel file
Error ketika running dengan Nexus 5 API … (“C:\Users\Imacho\AppData\Local\Android\sdk\tools\emulator.exe -avd Nexus_5_API_21_x86 -netspeed full -netdelay none emulator: ERROR: x86 emulation currently requires hardware acceleration! Please ensure Intel HAXM is properly installed and usable. CPU acceleration status: HAX kernel module is not installed!”)
70
Gambar 1.144 Failed to complete Gradle execution
Gambar 1.145 ERROR: requires hardware acceleration
Gambar 1.146 Cannot launch AVD in emulator
71
Solusinya adalah sebagai berikut :
a. Install HAXM dari path “C:\Users\[Nama Komput-er]\AppData\Local\Android\sdk\extras\intel\Hardware_Accelerated_Execution_Manager”
Gambar 1.147 intelhaxm-android.exe
Gambar 1.148 Install HAXM 1.1.1
Error ketika menjalankan kembali “Android Studio”
72
Gambar 1.149 Error launching Android Studio
Solusi dengan men-delete “JAVA_HOME” dari “Environment Variables” , atau dengan menganti variable value “JAVA_HOME” menjadi “C:\Program Files\Java\jdk1.8.0_31\”, solusi ini juga digunakan untuk mengatasi “Failed to complete Gradle execution”. Langkah alternatif ini akan dilakukan pada tahapan kedua.
Gambar 1.150 Delete “JAVA_HOME” dari “Environment Variables”
73
Gambar 1.151 After Delete “JAVA_HOME”
Gambar 1.152 Error launching Android Studio
Solusi dengan menganti variable value “JAVA_HOME” menjadi “C:\Program Files\Java\jdk1.8.0_31\”, solusi ini juga digunakan untuk mengatasi “Failed to complete Gradle execution”:
Gambar 1.153 Menganti variable value “JAVA_HOME”
74
Untuk mengkoneksikan Android Studio + Bluestack, yaitu dengan cara klik kanan file “adb.exe” di path “C:\Users\Imacho\AppData\Local\Android\sdk\platform-tools”, pilih “run as administrator”.
Gambar 1.154 Menghubungkan Android Studio + Bluestack I
Gambar 1.155 Menghubungkan Android Studio + Bluestack II
Proses di atas berjalan sangat cepat, dan hampir tidak terlihat secara jelas oleh mata. Untuk melihatnya, kita bisa menggunakan perintah berikut :
Menjalankan “cmd.exe” as administrator di “”, lalu men-jalankan file “adb.exe” yang ada pada file “C:\Users\Imacho\AppData\Local\Android\sdk\platform-tools\adb.exe”
75
Gambar 1.156 Run cmd.exe as Administrator
Gambar 1.157 Run adb.exe by cmd as Administrator
Tabel 1.1 Log “Run adb.exe by cmd as Administrator”
Log ‘‘Run adb.exe by cmd as Administrator’’
Microsoft Windows [Version 6.2.9200] (c) 2012 Microsoft Corporation. All rights reserved. C:\Windows\system32>cd C:\Users\Imacho\AppData\Local\Android\sdk\platform-tools C:\Users\Imacho\AppData\Local\Android\sdk\platform-tools>adb.exe Android Debug Bridge version 1.0.32
76
-a - directs adb to listen on all interfaces for a c onnection -d - directs command to the only connected USB devic e returns an error if more than one USB device is present. -e - directs command to the only running emulator. returns an error if more than one emulator is r unning. -s <specific device> - directs command to the device or emulator with the given serial number or qualifier. Overrides ANDROID_S ERIAL environment variable. -p <product name or path> - simple product name like 'sooner', or a relative/absolute path to a product out directory like 'out/target/product/sooner'. If -p is not speci-fied, the ANDROID_PRODUCT_OUT environment variable is used, which must be an absolute path. -H - Name of adb server host (default: localhost) -P - Port of adb server (default: 5037) devices [-l] - list all connected devices ('-l' will also list device qualifiers) connect <host>[:<port>] - connect to a device via TCP/IP Port 5555 is used by default if no port number is specified. disconnect [<host>[:<port>]] - disconnect from a TCP/IP device.
77
Port 5555 is used by default if no port number is specified. Using this command with no additional arguments will disconnect from all connected TCP/IP devic es. device commands: adb push [-p] <local> <remote> - copy file/dir to de-vice ('-p' to display the transfer progress) adb pull [-p] [-a] <remote> [<local>] - copy file/dir from device ('-p' to display the transfer progress) ('-a' means copy timestamp and mode) adb sync [ <directory> ] - copy host->device on-ly if changed (-l means list but don't copy) (see 'adb help all') adb shell - run remote shell in-teractively adb shell <command> - run remote shell com-mand adb emu <command> - run emulator console command adb logcat [ <filter-spec> ] - View device log adb forward --list - list all forward socket connections. the format is a list of lines with the followin g format: <serial> " " <lo-cal> " " <remote> "\n" adb forward <local> <remote> - forward socket con-nections forward specs are one of: tcp:<port> localabstract:<unix domain socket name>
78
localreserved:<unix domain socket name> localfilesys-tem:<unix domain socket name> dev:<character de-vice name> jdwp:<process pid> (remote only) adb forward --no-rebind <local> <remote> - same as 'adb forward <local> <remote>' but fail s if <local> is already forwarded adb forward --remove <local> - remove a specific forward socket connection adb forward --remove-all - remove all forward socket connections adb reverse --list - list all reverse socket connections from device adb reverse <remote> <local> - reverse socket con-nections reverse specs are one of: tcp:<port> localabstract:<unix domain socket name> localreserved:<unix domain socket name> localfilesys-tem:<unix domain socket name> adb reverse --norebind <remote> <local> - same as 'adb reverse <remote> <local>' but fail s if <remote> is al-ready reversed. adb reverse --remove <remote> - remove a specific re-versed socket connection adb reverse --remove-all - remove all reversed socket connections from dev ice adb jdwp - list PIDs of process-es hosting a JDWP transport adb install [-lrtsd] <file> adb install-multiple [-lrtsdp] <file...>
79
- push this package file to the device and instal l it (-l: forward lock ap-plication) (-r: replace existing application) (-t: allow test pack-ages) (-s: install applica-tion on sdcard) (-d: allow version code downgrade) (-p: partial applica-tion install) adb uninstall [-k] <package> - remove this app pack-age from the device ('-k' means keep the data and cache directories ) adb bugreport - return all infor-mation from the device that should be in-cluded in a bug report. adb backup [-f <file>] [-apk|-noapk] [-obb|-noobb] [-shared|-noshared] [-all] [-system|-nosystem] [<packages...>] - write an archive of the device's data to <file> . If no -f option is supplied then the data is wr itten to "backup.ab" in the current directory. (-apk|-noapk ena-ble/disable backup of the .apks themselves in the archive; the default is noapk.) (-obb|-noobb ena-ble/disable backup of any insta lled apk expansion (aka .obb) files associated with each applic ation; the default is noobb.) (-shared|-noshared
80
enable/disable backup of the device's shared storage / SD card contents; the defau lt is noshared.) (-all means to back up all installed applicatio ns) (-system|-nosystem toggles whether -all automat ically includes system applica-tions; the default is to inclu de system apps) (<packages...> is the list of applications to b e backed up. If the -all or -shared flags are passed, then t he package list is optional. Applications explicitly g iven on the command line will be included even if -nosys tem would ordinarily cause them to be omitted.) adb restore <file> - restore device con-tents from the <file> backup archive adb help - show this help mes-sage adb version - show version num scripting: adb wait-for-device - block until device is online adb start-server - ensure that there is a server running adb kill-server - kill the server if it is running adb get-state - prints: offline | bootloader | device adb get-serialno - prints: <serial-number> adb get-devpath - prints: <device-path>
81
adb status-window - continuously print device status for a specifie d device adb remount - remounts the /system and /vendor (if present) p artitions on the device read-write adb reboot [bootloader|recovery] - reboots the de-vice, optionally into the boo tloader or recovery program adb reboot-bootloader - reboots the device into the bootloader adb root - restarts the adbd daemon with root permissions adb usb - restarts the adbd daemon listening on USB adb tcpip <port> - restarts the adbd daemon listening on TCP on th e specified port networking: adb ppp <tty> [parameters] - Run PPP over USB. Note: you should not automatically start a PPP con-nection. <tty> refers to the tty for PPP stream. Eg. dev:/dev/omap_csmi_tty1 [parameters] - Eg. defaultroute debug dump local not-ty usepeerdns adb sync notes: adb sync [ <directory> ] <localdir> can be interpreted in several ways: - If <directory> is not specified, /system, /vendor (if present), and /data pa rtitions will be updated. - If it is "system", "vendor" or "data", only the corresponding partition is updated. environmental variables: ADB_TRACE - Print debug infor-mation. A comma separated list of the following values 1 or all, adb, sock-ets, packets, rwx, usb, sync , sysdeps, transport, jdwp ANDROID_SERIAL - The serial number to connect to. -s takes prior ity over this if given. ANDROID_LOG_TAGS - When used with the
82
logcat option, only these de bug tags are printed. C:\Users\Imacho\AppData\Local\Android\sdk\platform-tools>
Setelah run “adb.exe”, lalu lihatlah dari Android Studio apakah Bluestack sudah terkoneksi dengan Android Stu-dio, dengan Klik “Android Device Monitor”
Gambar 1.158 Klik “Android Device Monitor”
Tunggu beberapa saat, sampai terlihat bahwa Bluestack telah aktif
Gambar 1.159 Bluestack telah aktif di Android Studio
83
Gambar 1.160 Success run App (Android Studio + Bluestack)
Lokasi file *.apk hasil running
Gambar 1.161 Lokasi file *.apk hasil running
84
Error lainnya ketika setelah membuat Project baru “Failure [INSTALL_FAILED_OLDER_SDK]”:
Gambar 1.162 INSTALL FAILED OLDER SDK
Solusinya, Masuk ke “Gradle Scripts”, klik “build.gradle(Module:app)” ubah dibagian “compileSdkVer-sion 19” ubah dibagian “minSdkVersion & tar-getSdkVersion”:
Gambar 1.163 Klik “build.gradle(Module:app)”
Gambar 1.164 Ubah compileSdkVersion 19
85
Gambar 1.165 Ubah minSdkVersion & targetSdkVersion
Klik pada bagian Gradle files have changed since last pro-ject sync. A project sync may be necessary for the IDE to work properly "Sync Now".
Gambar 1.166 Klik "Sync Now"
Tunggu beberapa detik, maka akan muncul tampilan seperti ini :
Gambar 1.167 Gradle project sync in progress...
Klik “Yes” di Language Level Changed.
86
Gambar 1.168 Language Level Changed
Error “Files under the build folder are generated and should not be edited” atau
Error “Error:(50, 21) No resource found that matches the given name: attr 'android:actionModeShareDrawable'.”
Gambar 1.169 Files under the build folder are generated and should not be edited
Ubah “dependencies”.
Gambar 1.170 Ubah “dependencies”
87
Copykan file “android-support-v4.jar” ke “D:\ProjectAndroidStudio_2015\B_2_1Primitives_Object\app\libs”.
Gambar 1.171 File android-support-v4.jar
Klik “Sync Now”
Gambar 1.172 Klik “Sync Now”
Atau solusi untuk error “” adalah dengan langkah berikut :
Dalam Android Studio ketika mencoba menggunakan com-pileSdkVersion dan targetSdkVersion of 19, dengan mengubah file “build.gradle” dari :
dependencies {
compile fileTree(dir: 'libs', include:
['*.jar'])
compile 'com.android.support:appcompat-
v7:21.0.3'
}
Setting untuk older version dari appcompat library, menjadi :
dependencies {
compile fileTree(dir: 'libs', include:
['*.jar'])
compile 'com.android.support:appcompat-
v7:19.+'
}
88
Jika menggunakan “Setting untuk older version dari appcompat library”, maka anda tanpa perlu melakukan copy paste file “android-support-v4.jar” ke D:\ProjectAndroidStudio_2015\B_2_1Primitives_Object\app\libs”.
Gambar 1.173 Setting untuk old version dari appcompat library
Ubah “<style name="AppTheme" par-ent="Theme.AppCompat.Light.DarkActionBar">” “<style name="AppTheme" par-ent="android:Theme.Holo.Light.DarkActionBar">”.
Gambar 1.174 Ubah styles.xml
Jika ada error : Error:(4) No resource identifier found for attrib-ute 'showAsAction' in package 'com.example.imacho.bbprimitiveobjectblankactivity'.
Solusi :
Ubah file “menu_main.xml”
Gambar 1.175 Ubah file “menu_main.xml”
89
Gambar 1.176 Content Asli "menu_main.xml”
menjadi berikut :
Gambar 1.177 Ubah Content Asli "menu_main.xml”
Kemudian jika terdapat error “Unfortunately, [.Nama Project.] has stopped” saat menjalankan program, maka bisa jadi ada asset yang belum dimasukkan atau bahkan folder assetnya belum dibuat didalam folder main.
90
Gambar 1.178 Solusi error “Unfortunately, [NamaProject] has stopped”
Berikut tampilan ketika berhasil menjalankan tampilan primitive object :
Gambar 1.179 Tampilan Primitive Object
91
Cara menghapus Module pada Andorid Studio :
Klik "File -> Project Structure", lalu Pilih Module yang ingin anda hapus, lalu klik tanda “--”
Gambar 1.180 Project Structure
Gambar 1.181 Remove Module
Gambar 1.182 Gradle project sync in progress....
92
Klik “OK”
Gambar 1.183 Klik OK
Gambar 1.184 Delete directory "Nama Project..."
1.3.4 Compare Eclipse dengan Android Studio
Berikut ini perbandingan antara Eclipse dengan Android Studio (base IntelliJ IDEA) :
Tabel 1.2 Concepts Map : Eclipse Vs Android Studio
No Eclipse Android Studio
1 Ant Gradle
2 Workspace Project
3 Project Module
4 Project-specific JRE Module JDK
5 User library Global library
6 Classpath variable Path variable
7 Project dependency Module dependency
93
8 Library Module library
1.3.5 Membuat AVD baru dari AVD Manager
Klik “AVD Manager” Pada Tool bar Android Studio di pojok kanan atas
Gambar 1.185 AVD Manager
Daftar Virtual Device, Klik “Create Virtual Device….”
94
Gambar 1.186 Daftar Virtual Device
Pilih Phone, Klik “Next”
Gambar 1.187 Pilih Hardware (Phone)
Pilih System Image
95
Gambar 1.188 Pilih System Image (Lollipop)
Virtual Device Configuration, Lalu Klik “Show Advanced Setting”
96
Gambar 1.189 Virtual Device Configuration
Verify Configuration, misal mengubah SD card dari 200 MB menjadi 500 MB, Camera Front dari none menjadi Webcam0, lalu Klik “Finish”
Gambar 1.190 Verify Configuration
AVD baru sudah terbentuk
97
Gambar 1.191 Creating/Updating AVD
Gambar 1.192 AVD baru sudah terbentuk
Running AVD
Gambar 1.193 Running AVD di Android Studio
Tampilan AVD, Tunggu -+ 5 menit
98
Gambar 1.194 Tampilan Loading AVD di Android Studio
99
Gambar 1.195 Tampilan AVD di Android Studio I
100
Gambar 1.196 Tampilan AVD di Android Studio II
101
Gambar 1.197 Tampilan AVD di Android Studio III
102
Gambar 1.198 Tampilan AVD di Android Studio IV
1.3.6 Import Project Eclipse ke Android Studio
Gambar 1.199 Import Project
103
Select satu folder project, misal “1_1Introduction_To_OpenGL_ES” dari folder workspace “z_EclipseProjectAndroid_2014” Eclipse atau Gradle Project to Import, Lalu Klik OK
Gambar 1.200 Import Project ADT-Eclipse ke Android Studio
Gambar 1.201 Memilih Tipe Import Project
104
Karena Project dari Eclipse, maka pilihlah “Import Project from external model”, lalu Pilih Gradle.
Cara yang paling sederhana untuk Import dari Project Eclipse ke Android Studio adalah sebagai berikut :
Tutup semua project apapun yang ada di Android Studio
Gambar 1.202 Tutup semua Project yang masih aktif
Setelah muncul “Welcome to Android Studio’, lalu Klik “Im-
port Non-Android Studio project”
Gambar 1.203 Muncul “Welcome to Android Studio’
105
Gambar 1.204 Klik “Import Non-Android Studio project”
Langkahnya sama seperti sebelumnya, yaitu Select satu folder project, misal “1_1Introduction_To_OpenGL_ES” dari folder work-space “z_EclipseProjectAndroid_2014” Eclipse.
Gambar 1.205 Import Project ADT-Eclipse ke Android Studio
106
Gambar 1.206 Memilih Tipe Import (.. from external model Gradle)
Pada form “Import Project”, Klik Finish
Gambar 1.207 Proses Importing
107
Setelah Import, terdapat error “Can’t start Mercurial: hg.exe”
Gambar 1.208 List Project hasil Import
108
Gambar 1.209 Error Can’t start Mercurial: hg.exe setelah Import
Mencoba mengatasi Error diatas dengan Klik “Fix it”
Gambar 1.210 Klik “Fix it”
Import per Project From ADT Eclipse dengan memiih satu Project yang mau di-Import, Misal Project “1_1Introduction_To_OpenGL_ES”, lalu Klik OK
Gambar 1.211 Memiih satu Project yang mau di-Import
109
Memilih path tujuan untuk menyimpan hasil Import Project, Misal di “D:\Data Kuliah\!Genap 2014-2015\2. Grafika Komputer\z_ProjectAndroidStudio_2015\ 1_1Introduction_To_OpenGL_ES”
Gambar 1.212 Path tujuan untuk menyimpan hasil Import Project
Gambar 1.213 Import Destination Directory, Klik Next
Hilangkan atau uncheck “Replace jars …. when possible”, se-dangkan yang lainnya tetap di checked.
110
Gambar 1.214 Import per Project From ADT Eclipse
Proses Importing sedang dilakukan, tunggu beberapa wak-tu sampai selesai
Gambar 1.215 Proses Importing sedang dilakukan
Summary setelah proses Import
Gambar 1.216 Summary setelah proses Import
111
Tampilan Project hasil Import
Gambar 1.217 Tampilan Project hasil Import
Error Message “Gradle project sync failed. Basic function-
ality (e.g. editing debugging) will not work properly”
Gambar 1.218 Error Message “Gradle project sync failed
Solusi yang ditawarkan oleh Android Studio, Klik “Try Again”
Gambar 1.219 Klik “Try Again”
Akan tetapi jika solusi yang ditawarkan oleh Android Studio itu tidak berhasil, maka coba cara lainnya.
Buka salah satu code *.java yang ada pada Prohect. Jika muncul Error “Project SDK is not defined”
112
Gambar 1.220 Error “Project SDK is not defined”
Klik “Setup SDK”
Gambar 1.221 Klik “Setup SDK”
Select Project SDK, lalu Klik “OK”
Gambar 1.222 Select Project SDK
113
Coba Klik File “Invalidate Caches / Restart” Project, lalu Klik “Try Again” lagi
Gambar 1.223 Klik “Try Again” lagi
Masuk di “Setting”, lalu pilih “Grade”, isi Gradle home =
“C:/Program Files/Android/Android Studio/gradle/gradle-2.2.1” dan isilah seperti berikut :
Gambar 1.224 Masuk di “Setting”, lalu pilih “Grade”
114
Cara lainnya adalah dengan Klik kanan project lalu pilih “Open Module Settings”.
Klik “Open Module Settings”
Gambar 1.225 Buka “Open Module Settings”
115
Gambar 1.226 Lokasi SDK dan JDK
Gambar 1.227 Project Structure
116
Jika “Project Structure” pada bagian modules masih kosong, seperti pada gambar berikut.
Gambar 1.228 Project Structure modules masih kosong
Maka anda harus mengisikan dengan contoh sebagaimana pa-da gambar berikut ini, lalu klik Apply
Gambar 1.229 Project Structure modules telah disi
117
Cara lainnya mengatasi Error Message “Gradle project sync failed. Basic functionality (e.g. editing debugging) will not work proper-ly” adalah dengan membuka “Android SDK Manager”, kemudian In-stall “Extras Android Support Repository”. Lalu Klik “Tray Again”.
Gambar 1.230 Klik “Try Again”
“1_1Introduction_To_OpenGL_ES” adalah nama project dari ADT-Eclipse yang telah di-import ke Android Studio. Penyebab er-rornya adalah “failed to find target android-19 : C:\Users\Imacho\AppData\Local\Android\sdk”.
Gambar 1.231 Klik Install missing paltform(s) and sync project
Gambar 1.232 License Agreement
118
Kemudian pilih “Android SDK Platform 19”, pilih “Accept”, lalu klik “Next”.
Gambar 1.233 Pilih Android SDK Platform 19
Gambar 1.234 Installing Requested Components
119
Gambar 1.235 Installing Requested Components (Klik Finish)
Gambar 1.236 Terlihat Android 19 sudah terinstall
120
1.3.7 Konfigurasi pada Smartphone Android
Jika ingin menjadikan smartphone Android sebagai emulator, maka langkah-langkah konfigurasinya adalah sebagai berikut:
9. Siapkan smartphone Android. Pada contoh ini, smartphone An-droid yang digunakan adalah Samsung GT-i9070 Galaxy S Ad-vance.
10. Pada smartphone, pililh “setting”, lalu klik “Applica-tions/Application Manager” –> ”Development” –> klik/ beri tanda cek pada “USB debugging”.
Gambar 1.237 USB Debugging Pada Smartphone Samsung
11. Pasang kabel USB smartphone dengan PC, run app, lalu cek “Devices” pada Android Studio.
Gambar 1.238 Pilih Devices pada Android Studio
12. Konfigurasi selesai.
121
1.3.8 Konfigurasi "AS + Genymotion"
Langkah-langkah untuk install Genymotion Master installer genymotion-2.3.1-vbox.exe adalah sebagai berikut :
1. Install “Genymotion”
Gambar 1.239 Install Genymotion
2. Klik OK
Gambar 1.240 Select Setup Language
122
3. Setup Genymotion, Klik “Next”
Gambar 1.241 Setup – Genymotion I
Gambar 1.242 Setup – Genymotion II
123
Gambar 1.243 Setup – Genymotion III
Gambar 1.244 Setup – Genymotion IV
124
Gambar 1.245 Setup – Genymotion V
4. Proses Installing, Klik Yes To Install Virtual Box baru
Gambar 1.246 Proses Installing Genymotion
125
Gambar 1.247 Install VirtualBox I
Gambar 1.248 Install VirtualBox II
126
Gambar 1.249 Install VirtualBox III
Gambar 1.250 Install VirtualBox IV
127
Gambar 1.251 Install VirtualBox VI
Gambar 1.252 Install VirtualBox VII
128
5. Klik Finish
Gambar 1.253 Install VirtualBox VIII
Gambar 1.254 Yes, restart the computer now
129
Langkah-langkah untuk Konfigurasi Genymotion di Android Studio adalah sebagai berikut :
1. Android Studio, Klik File > Settings. 2. Pilih Plugins 3. Browse Repositories, ketik “Genymotion”, Klik “Install plugin”
Gambar 1.255 Ketik “Genymotion”, Klik “Install plugin”
4. Klik Yes
Gambar 1.256 Download and Install
130
Gambar 1.257 Download Plugins
5. Klik “Restart Android Studio”
Gambar 1.258 Klik “Close”
Gambar 1.259 Plugin Changed
131
Langkah-langkah untuk Running Project OpenGL dari Android Studio (dengan emulator Genymotion) adalah sebagai berikut :
1. Android Studio, Klik File > Settings.
Gambar 1.260 Android Studio, Klik File > Settings.
2. Klik Genymotion
Gambar 1.261 Klik Genymotion
132
3. Tekan Tombol “Shift + Enter” atau Klik “Kotak Kecil” disebelah kanan text field “Select the path to the Genymotion folder”
Gambar 1.262 Klik “Kotak Kecil” disebelah kanan text field
4. Browse lokasi dimana anda menginstall Genymotion misal di “C:\Program Files\Genymobile\Genymotion”, lalu klik OK
Gambar 1.263 Browse lokasi menginstall Genymotion
133
5. Sehingga di “” tampil seperti gambar berikut, lalu klik OK
Gambar 1.264 Content Select the path to the Genymotion folder
6. Jalankan Genymotion di Android Studio dengan klik logo Genymotion
Gambar 1.265 Logo Genymotion di Android Studio
7. Tampilan beberapa list virtual device (emulator) Android di Genymotion yang sudah anda download sebelumnya dari Genymotion yang dijalankan melalui Program Files atau double klik logo Genymotion di Desktop. Jika belum ada yang tampil di list, klik Refresh
Gambar 1.266 Genymotion Device Manager
134
8. Pilih salah satu virtual device yang ingin anda jalankan
Gambar 1.267 Pilih salah satu virtual device
9. Klik Start untuk menjalankan virtual device
Gambar 1.268 Klik Start (Run Virtual Device)
Gambar 1.269 Initializing virtual device
135
10. Loading Android di virtual device
Gambar 1.270 Loading Android di virtual device
136
11. Tampilan awal virtual device Genymotion
Gambar 1.271 Virtual device Genymotion I
137
Gambar 1.272 Virtual device Genymotion II
138
Gambar 1.273 Virtual device Genymotion III
139
Gambar 1.274 Virtual device Genymotion IV
140
12. Tampilan kode program
Gambar 1.275 MainActivity.java
Gambar 1.276 Point_n_Lines_with_Points_Object.java
141
Gambar 1.277 ESRender.java
13. Detail Sourcecode
Source Code 1.1 MainActivity.java
MainActivity.java
package com.introduction_to_opengl_es; import android.opengl.GLSurfaceView; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.Window; import android.view.WindowManager; // By : Imam Cholissodin ([email protected]) public class MainActivity extends Activity { /** The OpenGL view */ private GLSurfaceView glSurfaceView; @Override protected void onCreate(Bundle savedIn-stanceState) { super.onCreate(savedInstanceState); // requesting to turn the title OFF requestWindowFea-ture(Window.FEATURE_NO_TITLE);
142
// making it full screen getWin-dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManag-er.LayoutParams.FLAG_FULLSCREEN); // Initiate the Open GL view and create an instance with this activity glSurfaceView = new GLSurfaceView(this); // set our renderer to be the main ren-derer with the current activity context glSurfaceView.setRenderer(new ESRen-der()); setContentView(glSurfaceView); } /** * Remember to resume the glSurface */ @Override protected void onResume() { super.onResume(); glSurfaceView.onResume(); } /** * Also pause the glSurface */ @Override protected void onPause() { super.onPause(); glSurfaceView.onPause(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } }
143
Source Code 1.2 Point_n_Lines_with_Points_Object.java
Point_n_Lines_with_Points_Object.java
package com.introduction_to_opengl_es; import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer; import javax.microedition.khronos.opengles.GL10; import android.util.Log; // By : Imam Cholissodin ([email protected]) public class Point_n_Lines_with_Points_Object { private float vertices_line_with_points[] = null; private float vertices_line_with_points_color[] = null; float x, y; float step_loop = 0.001f; float x1, y1; float x2, y2; float array_factor = 2.0f; private int loop_line, loop_line_color; public Point_n_Lines_with_Points_Object() { // ============ start to generate verti-ces to create line with point ========================== x1 = -1.0f; y1 = -1.0f; x2 = 1.0f; y2 = 1.0f; loop_line = 0; loop_line_color = 0; vertices_line_with_points = new float[(int)(array_factor*(x2 - x1) / step_loop) * 3]; // 3 is number of dimension x,y,z vertices_line_with_points_color = new float[(int)(array_factor*(x2 - x1) / step_loop) * 4]; // 4 is number of channel color r,g,b,a float m = (y2 - y1) / (x2 - x1); // count gradient for (x = x1; x <= x2; x += step_loop) {
144
verti-ces_line_with_points[loop_line] = (float)(x); // as x value verti-ces_line_with_points[loop_line + 1] = (float)(m*(x - x1) + y1); // as y value verti-ces_line_with_points[loop_line + 2] = 0; // as z val-ue, z=0 is to assume that the object is on 2D loop_line += 3; //Generate color for each vertex verti-ces_line_with_points_color[loop_line_color] = (float)Math.abs(Math.sin(x)); // Red Channel verti-ces_line_with_points_color[loop_line_color + 1] = (float)Math.abs(Math.cos((m*(x - x1) + y1))); // Green Channel verti-ces_line_with_points_color[loop_line_color + 2] = 0.0f; // Blue Channel verti-ces_line_with_points_color[loop_line_color + 3] = 1.0f; // set transparant value (alpha) loop_line_color += 4; } /* x=x1; while(x<=x2){ vertices_line_with_points[loop_line] = (float) (x); // as x value vertices_line_with_points[loop_line+1] = (float) (m*(x-x1)+y1); // as y value vertices_line_with_points[loop_line+2]=0; // as z value, z=0 is to assume that the object is on 2D loop_line+=3; //Generate color for each vertex verti-ces_line_with_points_color[loop_line_color]=(float) Math.abs(Math.sin(x)); // Red Channel verti-ces_line_with_points_color[loop_line_color+1]=(float) Math.abs(Math.cos((m*(x-x1)+y1))); // Green Channel verti-ces_line_with_points_color[loop_line_color+2]=0.0f; //
145
Blue Channel verti-ces_line_with_points_color[loop_line_color+3]=1.0f; // set transparant value (alpha) loop_line_color+=4; x+=step_loop; } */ // ============= end for generate verti-ces to create line with point ==================== } // Point to our vertex buffer, return buffer holding the vertices public static FloatBuffer makeFloatBuff-er(float[] arr) { ByteBuffer bb = ByteBuff-er.allocateDirect(arr.length * 4); bb.order(ByteOrder.nativeOrder()); FloatBuffer fb = bb.asFloatBuffer(); fb.put(arr); fb.position(0); return fb; } /** The draw method for the primitive object with the GL context */ public void draw_points(GL10 gl) { gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); // set the global colour for all the points gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f); // List Point to our vertex buffer with manually gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(new float [] { 1.0f, 1.0f, 0.0f, // V1 - first vertex (x,y,z) 1.0f, 0.8f, 0.0f, // V2 1.0f, 0.6f, 0.0f, // V3 1.0f, 0.4f, 0.0f, // V4 1.0f, 0.2f, 0.0f,
146
// V5 1.0f, 0.0f, 0.0f, // V6 1.0f, -0.2f, 0.0f, // V7 1.0f, -0.4f, 0.0f, // V8 1.0f, -0.6f, 0.0f, // V9 1.0f, -0.8f, 0.0f, // V10 1.0f, -1.0f, 0.0f, // V11 0.8f, -1.0f, 0.0f, // V12 0.6f, -1.0f, 0.0f, // V13 0.4f, -1.0f, 0.0f, // V14 0.2f, -1.0f, 0.0f, // V15 0.0f, -1.0f, 0.0f, // V16 -0.2f, -1.0f, 0.0f, // V17 -0.4f, -1.0f, 0.0f, // V18 -0.6f, -1.0f, 0.0f, // V19 -0.7f, -1.0f, 0.0f, // V20 -0.8f, -1.0f, 0.0f, // V21 -1.0f, -1.0f, 0.0f, // V22 })); // Draw the vertices as points gl.glDrawArrays(GL10.GL_POINTS, 0, 22); // 0 is start index, 22 is length of list points //Disable the client state before leaving gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); } /*public void draw_line(GL10 gl){ gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); // set the global colour for the line gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
147
// Point to our vertex buffer gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-FloatBuffer(new float [] { 1.0f, 1.0f, 0.0f, // V1 - first vertex (x,y,z) -1.0f, -1.0f, 0.0f, // V2 - second vertex })); // Draw the vertices as lines gl.glDrawArrays(GL10.GL_LINES, 0, 2); //Disable the client state before leaving gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); }*/ public void draw_line_with_points_color(GL10 gl) { gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glEnableClientState(GL10.GL_COLOR_ARRAY); // Lish all points to our vertex buffer gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_line_with_points)); // Set/ mapping the colour for the line each vertex gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_line_with_points_color)); // Draw the vertices as lines with points : /////////////////////////////////////////// // start draw with exact length of array // /////////////////////////////////////////// gl.glDrawArrays(GL10.GL_POINTS, 0, (int)(loop_line / 3)); // 3 is number of dimension x,y,z // or
148
//gl.glDrawArrays(GL10.GL_POINTS, 0, (int) (loop_line_color / 4)); // 4 is number of chan-nel color r,g,b,a /////////////////////////////////////////// // end draw with exact length of array // /////////////////////////////////////////// /////////////////////////////////////////////// // start draw with not exact length of array // /////////////////////////////////////////////// //gl.glDrawArrays(GL10.GL_POINTS, 0, (int) (Math.abs((x2 - x1)) / step_loop)); // or //gl.glDrawArrays(GL10.GL_POINTS, 0, (int) (verti-ces_line_with_points.length/(array_factor*3))); // 3 is number of dimension x,y,z // or //gl.glDrawArrays(GL10.GL_POINTS, 0, (int) (verti-ces_line_with_points_color.length/(array_factor*4)));
149
// 3 is number of dimension x,y,z /////////////////////////////////////////////// // end draw with not exact length of array // /////////////////////////////////////////////// // to tracking log.v // try type like this "tag:value.loop_" without quotes on search "verbose". Log.v("value loop_line", "" + loop_line); Log.v("value loop_line/3", "" + loop_line / 3); Log.v("value loop_line_color", "" + loop_line_color); Log.v("value loop_line_color/4", "" + loop_line_color / 4); Log.v("value Math.abs((x2 - x1)) / step_loop)", "" + (Math.abs((x2 - x1)) / step_loop)); Log.v("value verti-ces_line_with_points.length", "" + verti-ces_line_with_points.length); Log.v("value verti-ces_line_with_points.length/(array_factor*3)", "" + (int)(vertices_line_with_points.length / (array_factor * 3))); Log.v("value verti-ces_line_with_points_color.length", "" + verti-ces_line_with_points_color.length); Log.v("value verti-ces_line_with_points_color.length/(array_factor*4)", "" + (int)(vertices_line_with_points_color.length / (array_factor * 4))); //Disable the client state before leaving gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
150
gl.glDisableClientState(GL10.GL_COLOR_ARRAY); } }
Source Code 1.3 ESRender.java
ESRender.java
package com.introduction_to_opengl_es; import javax.microedition.khronos.egl.EGLConfig; import javax.microedition.khronos.opengles.GL10; import android.opengl.GLSurfaceView.Renderer; import android.opengl.GLU; // By : Imam Cholissodin ([email protected]) public class ESRender implements Renderer { private Point_n_Lines_with_Points_Object point_n_linesobject; // the object to be drawn /** Constructor to set the handed over context */ public ESRender() { this.point_n_linesobject = new Point_n_Lines_with_Points_Object(); } @Override public void onDrawFrame(GL10 gl) { gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f); // set background with white color //gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // set background with black color gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT); // clear Screen and Depth Buffer // display drawing points
151
gl.glPushMatrix(); // start freeze state/event to each object gl.glTranslatef(0.0f, 0.0f, -5.0f); gl.glPointSize(3); gl.glEnable(GL10.GL_POINT_SMOOTH); point_n_linesobject.draw_points(gl); gl.glPopMatrix(); // end freeze state/event to each object // display drawing create line with points gl.glPushMatrix(); gl.glTranslatef(0.0f, 0.0f, -5.0f); gl.glPointSize(3); // set size of points gl.glEnable(GL10.GL_POINT_SMOOTH); point_n_linesobject.draw_line_with_points_color(gl); gl.glPopMatrix(); } @Override public void onSurfaceChanged(GL10 gl, int width, int height) { if (height == 0) height = 1; // To prevent divide by zero float aspect = (float)width / height; // Set the viewport (display area) to cover the entire window gl.glViewport(0, 0, width, height); // Setup perspective projection, with as-pect ratio matches viewport gl.glMatrixMode(GL10.GL_PROJECTION); // Select projection matrix gl.glLoadIdentity(); // Reset projection matrix // Use perspective projection GLU.gluPerspective(gl, 45, aspect, 0.1f, 100.f); gl.glMatrixMode(GL10.GL_MODELVIEW); // Select model-view matrix gl.glLoadIdentity(); // Reset } @Override public void onSurfaceCreated(GL10 gl, EGLConfig config) {
152
point_n_linesobject = new Point_n_Lines_with_Points_Object(); } }
14. Klik Run ‘app’ untuk menjalankan project OpenGL
Gambar 1.278 Run 'app'
Gambar 1.279 Gradle: Executing Tasks [:app:assembleDebug]
15. Pilih running device, klik OK
Gambar 1.280 Pilih running device
16. Tampilan aplikasi OpenGL “Membuat Titik dan Garis dengan Titik”
153
Gambar 1.281 Gradle build finished
Gambar 1.282 Tampilah aplikasi OpenGL
154
17. “Log.v” di kode program
Gambar 1.283 “Log.v” di kode program
18. Tampilan tracking log.v “try type like this "tag:value.loop_" without
quotes on search "verbose" di Android Device Monitor.
Gambar 1.284 Tracking log.v
155
1.3.9 Membuat Project Baru di AS
1. Android Studio, Klik “Start a new Android Studio project”
Gambar 1.285 Klik “Start a new Android Studio project”
2. Atau Klik File > New Project….
Gambar 1.286 Android Studio, Klik File > New Project….
3. Berikan nama aplikasi, misal “Primitive Object ES”, dan project location-nya di “D:\ProjectAndroidStudio_2015\PrimitiveObjectES” lalu klik Next
156
Gambar 1.287 Berikan nama aplikasi yang anda buat
4. Pilih “Phone and Tablet” dan Minimum SDK “API 8:Android 2.2
(Froyo)”, lalu klik Next
Gambar 1.288 Pilih “Phone and Tablet” dan “API 8:.. (Froyo)”
157
Gambar 1.289 API Level:Froyo sampai Lollipop
Gambar 1.290 APIs Level:Froyo for OpenGL ES 2.0
158
Gambar 1.291 APIs Level:Gingerbread
Gambar 1.292 APIs Level:Ice Cream Sandwicth
159
Gambar 1.293 APIs Level:Jelly Bean 16
Gambar 1.294 APIs Level:Jelly Bean 17
160
Gambar 1.295 APIs Level:Jelly Bean 18
Gambar 1.296 APIs Level:Kit Kat 19
161
Gambar 1.297 APIs Level:Lollipop 21
5. Pilih “Blank Activity”, lalu klik Next
Gambar 1.298 Pilih “Blank Activity”
162
6. Biarkan saja isi dari tampilan berikut, lalu klik Finish
Gambar 1.299 Choose options for your new file
7. Tunggu beberapa saat
Gambar 1.300 Building PrimitiveObjectES
Gambar 1.301 Initializing Rendering Library
163
Jika muncul “Missing styles. Is the correct theme chosen for this layout? Use Theme combo box above the layout to choose a dif-ferent layout, or fix the theme style references. Failed to find styles ‘textViewStyle’ in current theme (4 similar errors not shows) ”. Abaikan, ini tidak akan membuat error aplikasi OpenGL ES.
Gambar 1.302 Missing styles. Is the correct theme chosen
8. Klik “java com.example.imacho.primitiveobjectes”
Gambar 1.303 “java -> com.example.imacho.primitiveobjectes”
164
9. Isikan dengan file-file project yang sudah anda siapkan, misal se-bagai berikut
Gambar 1.304 Siapkan file-file project
10. Project siap dijalankan. Selesai
1.3.10 Membuat Module Baru di Project AS
1. Setelah membuat project, maka module default yang ada hanya
satu, yaitu “app”
Gambar 1.305 module default "app"
165
2. Untuk menambah module baru pada project “Primitive Object ES” di Android Studio, Klik “Android Studio, Klik File > New Module….”
Gambar 1.306 Android Studio, Klik File > New Module….
3. Pilih “Phone and Tablet Application”, lalu Klik Next
Gambar 1.307 Pilih “Phone and Tablet Application”
166
4. Berikan nama Aplikasi/Library name, misal “Create Point”, lalu Klik Next
Gambar 1.308 Berikan nama Aplikasi/Library name
5. Pilih “Blank Activity”, lalu Klik Next
Gambar 1.309 Pilih “Blank Activity”
167
6. Biarkan secara default isi dari “Choose options for your new file”. Silahkan jika ingin mengubah Title, misal dengan ”CreatePoint”, lalu Klik Finish
Gambar 1.310 Default isi dari “Choose options for your new file”
7. Tunggu beberapa saat “Gradle project sync in progress...”
Gambar 1.311 Tunggu beberapa saat “Gradle in progress...”
8. Module siap dikoding
Gambar 1.312 Module siap dikoding
168
9. Sekarang dapat dilihat bahwa terdapat dua module, yaitu “app” dan “createpoint”
Gambar 1.313 Module “app” dan “createpoint”
10. Selesai
169
BAB 2 Primitives Object
2.1 Pengertian Primitives Object
Primitive object merupakan objek dasar yang nantinya dapat dibuat untuk menghasilkan bentuk komplek tertentu yang diinginkan oleh programmer dengan menggabungkan atau mengkombinasikan bentuk-bentuk seperti titik (points), garis (lines), segiempat (quads), dan segitiga (triangles). Pada masing-masing sub bab akan dijelaskan contoh pembuatan dan cara me-render objek primitives. Berikut beberapa parameter ditanda “[..]” pada “gl.glDrawArrays(GL10.[..] , IndexAwal, BanyakData)”.
Gambar 2.1 GL_POINTS & GL_[LINES/LINE_STRIP/LINE_LOOP]
GL_POINTS
1 2 3
4 5 6
7
170
Gambar 2.2 GL_[TRIANGLES/TRIANGLE_STRIP/TRIANGLE_FAN]
2.2 Membuat Titik
Dalam membuat titik, disini kita dapat menggunakan “gl.glDrawArrays(GL10.GL_POINTS, 0, 21);”, dimana “0” merupakan start index dan “21” merupakan banyaknya titik yang akan di-plot. Misalnya kita ingin membuat titik secara manual, maka kita cukup memanggil perintah
“gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuff-er(new float [ ] {
x1,y1,z1, // titik ke-1
x2,y2,z2, // titik ke-2
…. ,
x21, y21, z21 // titik ke-21
}));”
Pada glVertexPointer, nilai “3” menyatakan besarnya dimensi dari titik vertex, sedangkan “0” menyatakan nilai start index. Artinya anda ingin menampilkan titik mulai dari index ke-0. GL_FLOAT, kare-na memang tipe data pada titik-titiknya adalah float, sedangkan “makeFloatBuffer” digunakan untuk membangun vertex buffer dari titik vertices yang sudah dimasukkan oleh user.
Kemudian script untuk mengenerate titik-titik secara otomatis menggunakan persamaan garis lurus dengan ukuran titik yang berva-riasi dan step_loop “0.2” dapat dilakukan dengan cara berikut.
“float size_point=1;
for(x=x1;x<=x2;x+=step_loop) {
171
coord_x=(float) (x);
coord_y=(float) (m * (x - x1) + y1);
coord_z=0.0f;
gl.glPushMatrix();
gl.glTranslatef(0.0f, 0.0f, -5.0f);
gl.glEnable(GL10.GL_POINT_SMOOTH);
gl.glPointSize(size_point);
size_point+=1;
points_object.draw_points2(gl,coord_x,coord_y,coord_z);
gl.glPopMatrix();
}”
Hasil ketika kode tersebut dijalankan, maka akan 21 titik yang diset manual dan beberapa titik pada arah sisi miring yang memiliki ukuran dinamis.
Gambar 2.3 Titik manual dan generate
Source Code 2.1 Code Membuat Titik (Ukuran Dinamis)
ESRender.java
package com.example.introduction_to_opengl_es;
import android.opengl.GLSurfaceView.Renderer;
import android.opengl.GLU;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
172
/**
* Created by Imacho on 4/4/2015.
*/
public class ESRender implements Renderer {
private Create_Points points_object; // the ob-
ject to be drawn
private float coord_x,coord_y,coord_z;
float x,y;
float step_loop=0.2f;
float x1,y1;
float x2,y2;
float m;
//private int loop_line,loop_line_color;
/** Constructor to set the handed over context */
public ESRender() {
this.points_object = new Create_Points();
// ============ set parameter to generate verti-
ces to create dynamic point ==========================
x1 = -1.0f; y1 = -1.0f;
x2= 1.0f; y2 = 1.0f;
m = (y2-y1)/(x2-x1); // count gradient
}
@Override
public void onDrawFrame(GL10 gl) {
gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f); // set
background with white color
//gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); //
set background with black color
gl.glClear(GL10.GL_COLOR_BUFFER_BIT |
GL10.GL_DEPTH_BUFFER_BIT); // clear Screen and Depth
Buffer
// display drawing points
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(0.0f, 0.0f, -5.0f);
gl.glPointSize(3);
gl.glEnable(GL10.GL_POINT_SMOOTH);
points_object.draw_points(gl);
gl.glPopMatrix(); // end freeze state/event to
each object
// display drawing points with dynamic size
float size_point=1;
for(x=x1;x<=x2;x+=step_loop) {
coord_x=(float) (x);
coord_y=(float) (m * (x - x1) + y1);
coord_z=0.0f;
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(0.0f, 0.0f, -5.0f);
gl.glEnable(GL10.GL_POINT_SMOOTH);
gl.glPointSize(size_point);
173
size_point+=1;
points_object.draw_points2(gl,coord_x,coord_y,coord_z);
gl.glPopMatrix(); // end freeze state/event
to each object
}
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int
height) {
if (height == 0)
height = 1; // To prevent divide by zero
float aspect = (float) width / height;
// Set the viewport (display area) to cover the
entire window
gl.glViewport(0, 0, width, height);
// Setup perspective projection, with aspect ra-
tio matches viewport
gl.glMatrixMode(GL10.GL_PROJECTION); // Select
projection matrix
gl.glLoadIdentity(); // Reset projection matrix
// Use perspective projection
GLU.gluPerspective(gl, 45, aspect, 0.1f, 100.f);
gl.glMatrixMode(GL10.GL_MODELVIEW); // Select
model-view matrix
gl.glLoadIdentity(); // Reset
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig con-
fig) {
points_object = new Create_Points();
}
}
MainActivity.java
package com.example.introduction_to_opengl_es;
//import javax.microedition.khronos.egl.EGLConfig;
//import javax.microedition.khronos.opengles.GL10;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import android.app.Activity;
import android.view.Window;
import android.view.WindowManager;
/**
* Created by Imacho on 4/4/2015.
174
*/
public class MainActivity extends Activity {
/** The OpenGL View */
private GLSurfaceView glSurfaceView;
@Override
protected void onCreate(Bundle savedInstanceS-
tate) {
super.onCreate(savedInstanceState);
// requesting to turn the title OFF
requestWindowFea-
ture(Window.FEATURE_NO_TITLE);
// making it full screen
getWin-
dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSC
REEN,
WindowManag-
er.LayoutParams.FLAG_FULLSCREEN);
glSurfaceView = new GLSurfaceView(this);
glSurfaceView.setRenderer(new ESRender());
setContentView(glSurfaceView);
//setContentView(R.layout.activity_main);
}
/**
* Remember to resume the glSurface
*/
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
/**
* Also pause the glSurface
*/
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
}
Create_Points.java
package com.example.introduction_to_opengl_es;
//import android.util.Log;
175
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.opengles.GL10;
/**
* Created by Imacho on 4/4/2015.
*/
public class Create_Points {
/** Constructor */
public Create_Points() {}
// Point to our vertex buffer, return buffer holding
the vertices
public static FloatBuffer makeFloatBuffer(float[]
arr) {
ByteBuffer bb = ByteBuff-
er.allocateDirect(arr.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
fb.position(0);
return fb;
}
/** The draw method for the primitive object with
the GL context */
public void draw_points(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for all the points
gl.glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
// List Point to our vertex buffer with manually
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] {
1.0f, 1.0f, 0.0f, // V1 -
first vertex (x,y,z)
1.0f, 0.8f, 0.0f, // V2
1.0f, 0.6f, 0.0f, // V3
1.0f, 0.4f, 0.0f, // V4
1.0f, 0.2f, 0.0f, // V5
1.0f, 0.0f, 0.0f, // V6
1.0f, -0.2f, 0.0f, // V7
1.0f, -0.4f, 0.0f, // V8
1.0f, -0.6f, 0.0f, // V9
1.0f, -0.8f, 0.0f, // V10
1.0f, -1.0f, 0.0f, // V11
0.8f, -1.0f, 0.0f, // V12
0.6f, -1.0f, 0.0f, // V13
0.4f, -1.0f, 0.0f, // V14
0.2f, -1.0f, 0.0f, // V15
0.0f, -1.0f, 0.0f, // V16
-0.2f, -1.0f, 0.0f, // V17
-0.4f, -1.0f, 0.0f, // V18
-0.6f, -1.0f, 0.0f, // V19
-0.8f, -1.0f, 0.0f, // V20
-1.0f, -1.0f, 0.0f, // V21
176
}));
// Draw the vertices as points
gl.glDrawArrays(GL10.GL_POINTS, 0, 21); // 0 is
start index, 22 is length of list points
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void draw_points2(GL10 gl,float coord_x,float
coord_y,float coord_z) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for all the points
gl.glColor4f(0.0f, 0.0f,1.0f, 1.0f);
// List Point to our vertex buffer with manually
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] {
coord_x, coord_y,coord_z //
V1 - first vertex (x,y,z)
}));
// Draw the vertices as points
gl.glDrawArrays(GL10.GL_POINTS, 0, 1); // 0 is
start index, 22 is length of list points
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
}
Source Code 2.2 Code Lain Membuat Titik Sederhana
ESRender.java
package com.introduction_to_opengl_es;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
import android.opengl.GLSurfaceView.Renderer;
import android.opengl.GLU;
public class ESRender implements Renderer {
// the object to be drawn
private Point_n_Lines_with_Points_Object
point_n_linesobject;
/** Constructor to set the handed over context */
public ESRender() {
this.point_n_linesobject = new
Point_n_Lines_with_Points_Object();
}
@Override
public void onDrawFrame(GL10 gl) {
177
// set background with white color
gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
// clear Screen and Depth Buffer
gl.glClear(GL10.GL_COLOR_BUFFER_BIT |
GL10.GL_DEPTH_BUFFER_BIT);
// display drawing points
// start freeze state/event to each object
gl.glPushMatrix();
gl.glTranslatef(0.0f, 0.0f, -5.0f);
gl.glPointSize(3);
gl.glEnable(GL10.GL_POINT_SMOOTH);
point_n_linesobject.draw_points(gl);
// end freeze state/event to each object
gl.glPopMatrix();
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int
height) {
if (height == 0)
// To prevent divide by zero
height = 1;
float aspect = (float) width / height;
// Set the viewport (display area) to cover the en-
tire window
gl.glViewport(0, 0, width, height);
// Setup perspective projection, with aspect ratio
matches viewport
// Select projection matrix
gl.glMatrixMode(GL10.GL_PROJECTION);
// Reset projection matrix
gl.glLoadIdentity();
// Use perspective projection
GLU.gluPerspective(gl, 45, aspect, 0.1f, 100.f);
// Select model-view matrix
gl.glMatrixMode(GL10.GL_MODELVIEW);
// Reset
gl.glLoadIdentity();
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config)
{
point_n_linesobject = new
Point_n_Lines_with_Points_Object();
}
}
MainActivity.java
package com.introduction_to_opengl_es;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
178
import android.app.Activity;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;
public class MainActivity extends Activity {
/** The OpenGL view */
private GLSurfaceView glSurfaceView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// requesting to turn the title OFF
requestWindowFeature(Window.FEATURE_NO_TITLE);
// making it full screen
getWin-
dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSC
REEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and create an instance
with this activity
glSurfaceView = new GLSurfaceView(this);
// set our renderer to be the main renderer with the
current activity context
glSurfaceView.setRenderer(new ESRender());
setContentView(glSurfaceView);
}
/**
* Remember to resume the glSurface
*/
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
/**
* Also pause the glSurface
*/
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action
bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
179
Point_n_Lines_Points_Object.java
package com.introduction_to_opengl_es;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.opengles.GL10;
import android.util.Log;
public class Point_n_Lines_with_Points_Object {
private float vertices_line_with_points[]=null;
private float vertices_line_with_points_color[] = null;
float x,y;
float step_loop=0.001f;
float x1,y1;
float x2,y2;
float array_factor=2.0f;
private int loop_line,loop_line_color;
public Point_n_Lines_with_Points_Object() {
// ============ start to generate vertices to create
line with point ==========================
x1 = -1.0f; y1 = -1.0f;
x2= 1.0f; y2 = 1.0f;
loop_line=0;
loop_line_color=0;
vertices_line_with_points=new
float[(int)(array_factor*(x2-x1)/step_loop)*3];
// 3 is number of dimension x,y,z
vertices_line_with_points_color=new
float[(int)(array_factor*(x2-x1)/step_loop)*4];
// 4 is number of channel color r,g,b,a
// count gradient
float m = (y2-y1)/(x2-x1);
for(x=x1;x<=x2;x+=step_loop){
// as x value
vertices_line_with_points[loop_line] = (float) (x);
// as y value
vertices_line_with_points[loop_line+1] = (float)
(m*(x-x1)+y1);
// as z value, z=0 is to assume that the object is
on 2D
vertices_line_with_points[loop_line+2]=0;
loop_line+=3;
//Generate color for each vertex
// Red Channel
verti-
180
ces_line_with_points_color[loop_line_color]=(float)
Math.abs(Math.sin(x));
// Green Channel
verti-
ces_line_with_points_color[loop_line_color+1]=(float
) Math.abs(Math.cos((m*(x-x1)+y1)));
// Blue Channel
verti-
ces_line_with_points_color[loop_line_color+2]=0.0f;
// set transparant value (alpha)
verti-
ces_line_with_points_color[loop_line_color+3]=1.0f;
loop_line_color+=4;
}
// ============= end for generate vertices to create
line with point ====================
}
// Point to our vertex buffer, return buffer holding
the vertices
public static FloatBuffer makeFloatBuffer(float[] arr)
{
ByteBuffer bb = ByteBuffer.allocateDirect(arr.length
* 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
fb.position(0);
return fb;
}
/** The draw method for the primitive object with the
GL context */
public void draw_points(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for all the points
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
// List Point to our vertex buffer with manually
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloat-
Buffer(new float [] {
1.0f, 1.0f, 0.0f, // V1 - first vertex
(x,y,z)
1.0f, 0.8f, 0.0f, // V2
1.0f, 0.6f, 0.0f, // V3
1.0f, 0.4f, 0.0f, // V4
1.0f, 0.2f, 0.0f, // V5
1.0f, 0.0f, 0.0f, // V6
1.0f, -0.2f, 0.0f, // V7
1.0f, -0.4f, 0.0f, // V8
1.0f, -0.6f, 0.0f, // V9
1.0f, -0.8f, 0.0f, // V10
1.0f, -1.0f, 0.0f, // V11
0.8f, -1.0f, 0.0f, // V12
0.6f, -1.0f, 0.0f, // V13
0.4f, -1.0f, 0.0f, // V14
0.2f, -1.0f, 0.0f, // V15
0.0f, -1.0f, 0.0f, // V16
181
-0.2f, -1.0f, 0.0f, // V17
-0.4f, -1.0f, 0.0f, // V18
-0.6f, -1.0f, 0.0f, // V19
-0.7f, -1.0f, 0.0f, // V20
-0.8f, -1.0f, 0.0f, // V21
-1.0f, -1.0f, 0.0f, // V22
}));
// Draw the vertices as points
gl.glDrawArrays(GL10.GL_POINTS, 0, 22);
// 0 is start index, 22 is length of list points
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void draw_line_with_points_color(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// List all points to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloat-
Buffer(vertices_line_with_points));
// Set/ mapping the colour for the line each vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuff-
er(vertices_line_with_points_color));
// Draw the vertices as lines with points :
///////////////////////////////////////////
// start draw with exact length of array //
///////////////////////////////////////////
gl.glDrawArrays(GL10.GL_POINTS, 0, (int) (loop_line /
3));
// 3 is number of dimension x,y,z
///////////////////////////////////////////
// end draw with exact length of array //
///////////////////////////////////////////
// to tracking log.v
// try type like this "tag:value.loop_" without
quotes on search "verbose".
Log.v("value loop_line", ""+ loop_line);
Log.v("value loop_line/3", ""+ loop_line/3);
Log.v("value loop_line_color", ""+ loop_line_color);
Log.v("value loop_line_color/4", ""+
loop_line_color/4);
Log.v("value Math.abs((x2 - x1)) / step_loop)", ""+
(Math.abs((x2 - x1)) / step_loop));
Log.v("value vertices_line_with_points.length",
""+vertices_line_with_points.length);
Log.v("value verti-
ces_line_with_points.length/(array_factor*3)",
""+(int) (verti-
ces_line_with_points.length/(array_factor*3)));
Log.v("value vertices_line_with_points_color.length",
""+vertices_line_with_points_color.length);
Log.v("value verti-
182
ces_line_with_points_color.length/(array_factor*4)",
""+(int) (verti-
ces_line_with_points_color.length/(array_factor*4)));
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
}
Gambar 2.4 Membuat Titik Sederhana
2.3 Membuat Garis dengan Titik
Logika pembentukannya adalah membuat garis lurus dari dua buah titik, misal (x1,y1) dan (x2,y2) yang kemudian digunakan untuk membentuk persamaan garis lurus, y=mx+c. Adapun penghitungan gradient adalah
m = (y2-y1)/(x2-x1)
Setelah mendapatkan nilai m, maka dengan menggunakan persamaan
y-y1 = m(x-x1)
akan didapatkan persamaan garis lurusnya. Dari setiap nilai x dan y akan dipasangkan menjadi satu titik dalam vertex untuk menyusun garis secara berurutan. Dari segitiga pada Gambar 2.5, untuk sisi yang miring dibentuk dengan titik-titik dan warna yang ditampung da-lam array 2D menggunakan potongan script
183
“float m = (y2-y1)/(x2-x1); // count gradient
for(x=x1;x<=x2;x+=step_loop){
// Generate (x,y,z) for vertex
vert..points[loop_line] = .. (x); // as x
vert..points[loop_line+1] = .. (m*(x-x1)+y1); // as y
vert..points[loop_line+2]=0; // as z
loop_line+=3;
//Generate color (r,g,b,a) for each vertex
vert..color[loop_line_color]=.. abs(sin(x));
vert..color[loop_line_color+1]=.. abs(cos((m * (x - x1) + y1)));
vert..color[loop_line_color+2]=0.0f;
vert..color[loop_line_color+3]=1.0f;
loop_line_color+=4;
}”
Dimana “vet..point” menyatakan “vertices_line_with_points” dan “vert..color” menyatakan “vertices_line_with_points_color” yang keduanya diinisialisasi dengan
“private float vertices_line_with_points[]=null;
private float vertices_line_with_points_color[] = null;”
dengan step_loop=0.001f; dan memiliki ukuran 2 kali defult size.
Nilai 2 tersebut merupakan “array_factor=2.0f” yang digunakan untuk menghidari ukuran array yang dipesan di memory kurang dari array yang dibutuhkan setelah degenerate titik-titiknya. Sehingga lebih baik dibuat lebih yaitu dengan mengalikan 2 kali default size-nya. Script untuk ukuran masing-masing array tersebut adalah
“vertices_line_with_points=
new float[(int)(array_factor*(x2-x1)/step_loop)*3];
// 3 is number of dimension x,y,z
vertices_line_with_points_color=
new float[(int)(array_factor*(x2-x1)/step_loop)*4];
// 4 is number of channel color r,g,b,a”
184
Gambar 2.5 Membuat garis dengan GL_POINTS
Untuk melakukan “tracking log.v” pada Eclipse, misal ketik “val-ue Math.abs((x2 - x1))” sebagai mana kata yang ada pada Log.v("value Math.abs((x2 - x1)) / step_loop)", "" + (Math.abs((x2 - x1)) / step_loop));
Gambar 2.6 Log.v("value Math.abs((..
Gambar 2.7 Tracking log.v (logcat)
185
Source Code 2.3 Code Membuat Garis dengan Titik (Solid)
ESRender.java
package com.example.imacho.createlinewithpoints;
import android.opengl.GLSurfaceView.Renderer;
import android.opengl.GLU;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
/**
* Created by Imacho on 4/5/2015.
*/
public class ESRender implements Renderer {
private Line_With_Points linewithpoints; // the ob-
ject to be drawn
/** Constructor to set the handed over context */
public ESRender() {
this.linewithpoints = new Line_With_Points();
}
@Override
public void onDrawFrame(GL10 gl) {
gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f); // set
background with white color
//gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); //
set background with black color
gl.glClear(GL10.GL_COLOR_BUFFER_BIT |
GL10.GL_DEPTH_BUFFER_BIT); // clear Screen and Depth
Buffer
// display drawing lines with gl_lines
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(0.0f, 0.0f, -5.0f);
gl.glLineWidth(4); // set size of line
gl.glEnable(GL10.GL_LINE_SMOOTH);
linewithpoints.draw_lines_with_gl_lines(gl);
gl.glPopMatrix(); // end freeze state/event to
each object
// display drawing create line with points
gl.glPushMatrix();
gl.glTranslatef(0.0f, 0.0f, -5.0f);
gl.glPointSize(3); // set size of points
gl.glEnable(GL10.GL_POINT_SMOOTH);
linewith-
points.draw_line_with_points_color(gl);
gl.glPopMatrix();
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int
height) {
186
if (height == 0)
height = 1; // To prevent divide by zero
float aspect = (float) width / height;
// Set the viewport (display area) to cover the
entire window
gl.glViewport(0, 0, width, height);
// Setup perspective projection, with aspect ra-
tio matches viewport
gl.glMatrixMode(GL10.GL_PROJECTION); // Select
projection matrix
gl.glLoadIdentity(); // Reset projection matrix
// Use perspective projection
GLU.gluPerspective(gl, 45, aspect, 0.1f, 100.f);
gl.glMatrixMode(GL10.GL_MODELVIEW); // Select
model-view matrix
gl.glLoadIdentity(); // Reset
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig con-
fig) {
linewithpoints = new Line_With_Points();
}
}
MainActivity.java
package com.example.imacho.createlinewithpoints;
import android.app.Activity;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;
/**
* Created by Imacho on 4/5/2015.
*/
public class MainActivity extends Activity {
/** The OpenGL view */
private GLSurfaceView glSurfaceView;
@Override
protected void onCreate(Bundle savedInstanceS-
tate) {
super.onCreate(savedInstanceState);
// requesting to turn the title OFF
requestWindowFeature(Window.FEATURE_NO_TITLE);
// making it full screen
getWin-
dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREE
187
N,
WindowManag-
er.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and create an in-
stance with this activity
glSurfaceView = new GLSurfaceView(this);
// set our renderer to be the main renderer with
the current activity context
glSurfaceView.setRenderer(new ESRender());
setContentView(glSurfaceView);
}
/**
* Remember to resume the glSurface
*/
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
/**
* Also pause the glSurface
*/
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to
the action bar if it is present.
getMenuInflat-
er().inflate(R.menu.menu_main, menu);
return true;
}
}
Line_With_Points.java
package com.example.imacho.createlinewithpoints;
import android.util.Log;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.opengles.GL10;
/**
* Created by Imacho on 4/5/2015.
*/
public class Line_With_Points {
188
private float vertices_line_with_points[]=null;
private float vertices_line_with_points_color[] =
null;
float x,y;
float step_loop=0.001f;
float x1,y1;
float x2,y2;
float array_factor=2.0f;
private int loop_line,loop_line_color;
public Line_With_Points() {
// ============ start to generate vertices to
create line with point ==========================
x1 = -1.0f; y1 = -1.0f;
x2= 1.0f; y2 = 1.0f;
loop_line=0;
loop_line_color=0;
vertices_line_with_points=new
float[(int)(array_factor*(x2-x1)/step_loop)*3]; // 3 is
number of dimension x,y,z
vertices_line_with_points_color=new
float[(int)(array_factor*(x2-x1)/step_loop)*4]; // 4 is
number of channel color r,g,b,a
float m = (y2-y1)/(x2-x1); // count gradient
for(x=x1;x<=x2;x+=step_loop){
vertices_line_with_points[loop_line] =
(float) (x); // as x value
vertices_line_with_points[loop_line+1] =
(float) (m*(x-x1)+y1); // as y value
vertices_line_with_points[loop_line+2]=0; //
as z value, z=0 is to assume that the object is on 2D
loop_line+=3;
//Generate color for each vertex
verti-
ces_line_with_points_color[loop_line_color]=(float)
Math.abs(Math.sin(x)); // Red Channel
verti-
ces_line_with_points_color[loop_line_color+1]=(float)
Math.abs(Math.cos((m * (x - x1) + y1))); // Green Chan-
nel
verti-
ces_line_with_points_color[loop_line_color+2]=0.0f; //
Blue Channel
verti-
ces_line_with_points_color[loop_line_color+3]=1.0f; //
set transparant value (alpha)
loop_line_color+=4;
}
/*
x=x1;
while(x<=x2){
vertices_line_with_points[loop_line] =
(float) (x); // as x value
vertices_line_with_points[loop_line+1] =
189
(float) (m*(x-x1)+y1); // as y value
vertices_line_with_points[loop_line+2]=0;
// as z value, z=0 is to assume that the object is on 2D
loop_line+=3;
//Generate color for each vertex
verti-
ces_line_with_points_color[loop_line_color]=(float)
Math.abs(Math.sin(x)); // Red Channel
verti-
ces_line_with_points_color[loop_line_color+1]=(float)
Math.abs(Math.cos((m*(x-x1)+y1))); // Green Channel
verti-
ces_line_with_points_color[loop_line_color+2]=0.0f; //
Blue Channel
verti-
ces_line_with_points_color[loop_line_color+3]=1.0f; //
set transparant value (alpha)
loop_line_color+=4;
x+=step_loop;
}
*/
// ============= end for generate vertices to
create line with point ====================
}
// Point to our vertex buffer, return buffer holding
the vertices
public static FloatBuffer makeFloatBuffer(float[]
arr) {
ByteBuffer bb = ByteBuff-
er.allocateDirect(arr.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
fb.position(0);
return fb;
}
/** The draw method for the primitive object with
the GL context */
public void draw_lines_with_gl_lines(GL10 gl){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the global colour for the line
//gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Set/ mapping the colour for each line
/*gl.glColorPointer(4, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] {
0.0f, 0.0f, 1.0f, 1.0f, // first color
(r,g,b,a)
0.0f, 0.0f, 1.0f, 1.0f, // second col-
or (r,g,b,a)
0.0f, 1.0f, 0.0f, 1.0f, // third color
(r,g,b,a)
190
0.0f, 1.0f, 0.0f, 1.0f // fourth
color (r,g,b,a)
}));*/
// Set/ mapping the colour for each line (half)
gl.glColorPointer(4, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] {
0.0f, 0.0f, 1.0f, 1.0f, // first color
(r,g,b,a)
0.0f, 1.0f, 0.0f, 1.0f, // second col-
or (r,g,b,a)
0.0f, 0.0f, 1.0f, 1.0f, // third color
(r,g,b,a)
0.0f, 1.0f, 0.0f, 1.0f // fourth
color (r,g,b,a)
}));
// Point to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float [] {
-1.0f, -1.0f, 0.0f,
// V1 - first vertex (x,y,z)
1.0f, -1.0f, 0.0f, //
V2 - second vertex
1.0f, -1.0f, 0.0f, // V3 - third ver-
tex (x,y,z)
1.0f, 1.0f, 0.0f // V4 - fourth ver-
tex
}));
// Draw the vertices as lines
gl.glDrawArrays(GL10.GL_LINES, 0, 4);
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_line_with_points_color(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// Lish all points to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_line_with_points));
// Set/ mapping the colour for the line each
vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_line_with_points_color));
// Draw the vertices as lines with points :
///////////////////////////////////////////
// start draw with exact length of array //
///////////////////////////////////////////
gl.glDrawArrays(GL10.GL_POINTS, 0, (int)
(loop_line / 3)); // 3 is number of dimension x,y,z
191
// or
//gl.glDrawArrays(GL10.GL_POINTS, 0, (int)
(loop_line_color / 4)); // 4 is number of channel color
r,g,b,a
///////////////////////////////////////////
// end draw with exact length of array //
///////////////////////////////////////////
///////////////////////////////////////////////
// start draw with not exact length of array //
///////////////////////////////////////////////
//gl.glDrawArrays(GL10.GL_POINTS, 0, (int)
(Math.abs((x2 - x1)) / step_loop));
// or
//gl.glDrawArrays(GL10.GL_POINTS, 0, (int) (ver-
tices_line_with_points.length/(array_factor*3))); // 3
is number of dimension x,y,z
// or
//gl.glDrawArrays(GL10.GL_POINTS, 0, (int) (ver-
tices_line_with_points_color.length/(array_factor*4)));
// 3 is number of dimension x,y,z
///////////////////////////////////////////////
// end draw with not exact length of array //
///////////////////////////////////////////////
// to tracking log.v
// try type like this "tag:value.loop_" without
quotes on search "verbose".
// or
// "value loop_line" without quotes on search
"verbose".
Log.v("value loop_line", "" + loop_line);
Log.v("value loop_line/3", "" + loop_line / 3);
Log.v("value loop_line_color", "" +
loop_line_color);
Log.v("value loop_line_color/4", "" +
loop_line_color / 4);
Log.v("value Math.abs((x2 - x1)) / step_loop)",
"" + (Math.abs((x2 - x1)) / step_loop));
Log.v("value vertices_line_with_points.length",
"" + vertices_line_with_points.length);
Log.v("value verti-
ces_line_with_points.length/(array_factor*3)", "" +
(int) (vertices_line_with_points.length / (array_factor
* 3)));
Log.v("value verti-
ces_line_with_points_color.length", "" + verti-
ces_line_with_points_color.length);
Log.v("value verti-
ces_line_with_points_color.length/(array_factor*4)", ""
+ (int) (vertices_line_with_points_color.length / (ar-
ray_factor * 4)));
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
}
192
Source Code 2.4 Code Lain Membuat Garis dengan Titik
ESRender.java
package com.introduction_to_opengl_es;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
import android.opengl.GLSurfaceView.Renderer;
import android.opengl.GLU;
public class ESRender implements Renderer {
// the object to be drawn
private Point_n_Lines_with_Points_Object
point_n_linesobject;
/** Constructor to set the handed over context */
public ESRender() {
this.point_n_linesobject = new
Point_n_Lines_with_Points_Object();
}
@Override
public void onDrawFrame(GL10 gl) {
// set background with white color
gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
// clear Screen and Depth Buffer
gl.glClear(GL10.GL_COLOR_BUFFER_BIT |
GL10.GL_DEPTH_BUFFER_BIT);
// display drawing points
// start freeze state/event to each object
gl.glPushMatrix();
gl.glTranslatef(0.0f, 0.0f, -5.0f);
gl.glPointSize(3);
gl.glEnable(GL10.GL_POINT_SMOOTH);
point_n_linesobject.draw_points(gl);
// end freeze state/event to each object
gl.glPopMatrix();
// display drawing create line with points
gl.glPushMatrix();
gl.glTranslatef(0.0f, 0.0f, -5.0f);
// set size of points
gl.glPointSize(3);
gl.glEnable(GL10.GL_POINT_SMOOTH);
point_n_linesobject.draw_line_with_points_color(gl);
gl.glPopMatrix();
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int
height) {
if (height == 0)
// To prevent divide by zero
height = 1;
193
float aspect = (float) width / height;
// Set the viewport (display area) to cover the en-
tire window
gl.glViewport(0, 0, width, height);
// Setup perspective projection, with aspect ratio
matches viewport
// Select projection matrix
gl.glMatrixMode(GL10.GL_PROJECTION);
// Reset projection matrix
gl.glLoadIdentity();
// Use perspective projection
GLU.gluPerspective(gl, 45, aspect, 0.1f, 100.f);
// Select model-view matrix
gl.glMatrixMode(GL10.GL_MODELVIEW);
// Reset
gl.glLoadIdentity();
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config)
{
point_n_linesobject = new
Point_n_Lines_with_Points_Object();
}
}
MainActivity.java
package com.introduction_to_opengl_es;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;
public class MainActivity extends Activity {
/** The OpenGL view */
private GLSurfaceView glSurfaceView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// requesting to turn the title OFF
requestWindowFeature(Window.FEATURE_NO_TITLE);
// making it full screen
getWin-
dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSC
REEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and create an instance
194
with this activity
glSurfaceView = new GLSurfaceView(this);
// set our renderer to be the main renderer with the
current activity context
glSurfaceView.setRenderer(new ESRender());
setContentView(glSurfaceView);
}
/**
* Remember to resume the glSurface
*/
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
/**
* Also pause the glSurface
*/
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action
bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Point_n_Lines_Points_Object.java
package com.introduction_to_opengl_es;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.opengles.GL10;
import android.util.Log;
public class Point_n_Lines_with_Points_Object {
private float vertices_line_with_points[]=null;
private float vertices_line_with_points_color[] = null;
float x,y;
float step_loop=0.001f;
float x1,y1;
float x2,y2;
float array_factor=2.0f;
195
private int loop_line,loop_line_color;
public Point_n_Lines_with_Points_Object() {
// ============ start to generate vertices to create
line with point ==========================
x1 = -1.0f; y1 = -1.0f;
x2= 1.0f; y2 = 1.0f;
loop_line=0;
loop_line_color=0;
vertices_line_with_points=new
float[(int)(array_factor*(x2-x1)/step_loop)*3];
// 3 is number of dimension x,y,z
vertices_line_with_points_color=new
float[(int)(array_factor*(x2-x1)/step_loop)*4];
// 4 is number of channel color r,g,b,a
// count gradient
float m = (y2-y1)/(x2-x1);
for(x=x1;x<=x2;x+=step_loop){
// as x value
vertices_line_with_points[loop_line] = (float) (x);
// as y value
vertices_line_with_points[loop_line+1] = (float)
(m*(x-x1)+y1);
// as z value, z=0 is to assume that the object is
on 2D
vertices_line_with_points[loop_line+2]=0;
loop_line+=3;
//Generate color for each vertex
// Red Channel
verti-
ces_line_with_points_color[loop_line_color]=(float)
Math.abs(Math.sin(x));
// Green Channel
verti-
ces_line_with_points_color[loop_line_color+1]=(float
) Math.abs(Math.cos((m*(x-x1)+y1)));
// Blue Channel
verti-
ces_line_with_points_color[loop_line_color+2]=0.0f;
// set transparant value (alpha)
verti-
ces_line_with_points_color[loop_line_color+3]=1.0f;
loop_line_color+=4;
}
// ============= end for generate vertices to create
line with point ====================
}
// Point to our vertex buffer, return buffer holding
the vertices
public static FloatBuffer makeFloatBuffer(float[] arr)
{
ByteBuffer bb = ByteBuffer.allocateDirect(arr.length
196
* 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
fb.position(0);
return fb;
}
/** The draw method for the primitive object with the
GL context */
public void draw_points(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for all the points
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
// List Point to our vertex buffer with manually
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloat-
Buffer(new float [] {
1.0f, 1.0f, 0.0f, // V1 - first vertex
(x,y,z)
1.0f, 0.8f, 0.0f, // V2
1.0f, 0.6f, 0.0f, // V3
1.0f, 0.4f, 0.0f, // V4
1.0f, 0.2f, 0.0f, // V5
1.0f, 0.0f, 0.0f, // V6
1.0f, -0.2f, 0.0f, // V7
1.0f, -0.4f, 0.0f, // V8
1.0f, -0.6f, 0.0f, // V9
1.0f, -0.8f, 0.0f, // V10
1.0f, -1.0f, 0.0f, // V11
0.8f, -1.0f, 0.0f, // V12
0.6f, -1.0f, 0.0f, // V13
0.4f, -1.0f, 0.0f, // V14
0.2f, -1.0f, 0.0f, // V15
0.0f, -1.0f, 0.0f, // V16
-0.2f, -1.0f, 0.0f, // V17
-0.4f, -1.0f, 0.0f, // V18
-0.6f, -1.0f, 0.0f, // V19
-0.7f, -1.0f, 0.0f, // V20
-0.8f, -1.0f, 0.0f, // V21
-1.0f, -1.0f, 0.0f, // V22
}));
// Draw the vertices as points
gl.glDrawArrays(GL10.GL_POINTS, 0, 22);
// 0 is start index, 22 is length of list points
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void draw_line_with_points_color(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// List all points to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloat-
Buffer(vertices_line_with_points));
197
// Set/ mapping the colour for the line each vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuff-
er(vertices_line_with_points_color));
// Draw the vertices as lines with points :
///////////////////////////////////////////
// start draw with exact length of array //
///////////////////////////////////////////
gl.glDrawArrays(GL10.GL_POINTS, 0, (int) (loop_line /
3));
// 3 is number of dimension x,y,z
///////////////////////////////////////////
// end draw with exact length of array //
///////////////////////////////////////////
// to tracking log.v
// try type like this "tag:value.loop_" without
quotes on search "verbose".
Log.v("value loop_line", ""+ loop_line);
Log.v("value loop_line/3", ""+ loop_line/3);
Log.v("value loop_line_color", ""+ loop_line_color);
Log.v("value loop_line_color/4", ""+
loop_line_color/4);
Log.v("value Math.abs((x2 - x1)) / step_loop)", ""+
(Math.abs((x2 - x1)) / step_loop));
Log.v("value vertices_line_with_points.length",
""+vertices_line_with_points.length);
Log.v("value verti-
ces_line_with_points.length/(array_factor*3)",
""+(int) (verti-
ces_line_with_points.length/(array_factor*3)));
Log.v("value vertices_line_with_points_color.length",
""+vertices_line_with_points_color.length);
Log.v("value verti-
ces_line_with_points_color.length/(array_factor*4)",
""+(int) (verti-
ces_line_with_points_color.length/(array_factor*4)));
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
}
198
Gambar 2.8 Membuat Garis dan Titik
2.4 Membuat Segitiga & Segiempat
Segitiga dibuat dengan “GL_TRIANGLES”. Dan khusus untuk yang segiempat akan dibuat dengan 2 segitiga yang menjadi primitive object-nya. Ada beberapa cara yang dapat digunakan untuk membuat segiempat, diantaranya :
a. Menggunakan GL_TRIANGLE_STRIP “// Draw the vertices as rectangle gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0,4); // 4 is number of data vertices_rect”
b. Menggunakan GL_TRIANGLES “// Draw the vertices as rectangle gl.glDrawElements(GL10.GL_TRIANGLES, Indices.length, GL10.GL_UNSIGNED_SHORT, makeShortBuffer(Indices));” Indices menyatakan urutan dari index vertex yang akan dikon-eksikan untuk membentuk segiempat. Masing-masing cara menggunakan buffer yang sedikit berbeda, untuk GL_TRIANGLE_STRIP menggunakan “makeFloatBuffer” untuk membuffer semua posisi vertice dan warna penyusun objek. Potongan scriptnya sebagai berikut
“// List all points to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
199
makeFloatBuffer(vertices_rect));
// Set/ mapping the colour for object
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuffer(color_rect));”
Sedangkan untuk GL_TRIANGLES menggunakan “make-FloatBuffer” dan sekaligus “makeShortBuffer”, pada cara yang kedua ini “makeShortBuffer” digunakan untuk draw objek segitiga. Spesifi-kasi kedua metode “public static FloatBuffer makeFloatBuffer(float[] arr)” untuk 4 bytes untuk membangun vertices dan color penyusun ob-jek, “public static ShortBuffer makeShortBuffer(short[] arr)” untuk 2 bytes untuk membangun urutan index dari vertex untuk draw objek sesuai dengan yang diinginkan.
“gl.glFrontFace(GL10.GL_CCW);
// Front face in counter-clockwise / Counter-clockwise winding.
// orientation
gl.glEnable(GL10.GL_CULL_FACE); // Enable cull face
gl.glCullFace(GL10.GL_BACK);
// Cull the back face (don't display) remove face with culling.”
Gambar 2.9 Membuat Segiempat dengan 2 Segitiga
Karena segiempat tersebut dibentuk dengan menggunakan dua segitiga, maka efek persilangkan pada sisi miring dari kedua segitiga akan nampak jelas. Untuk menghilangkan efek tersebut, dapat digunakan script di atas.
Pada Gambar 2.9, nilai-nilai “Indices” dapat dibentuk dengan cara mengambil index masing-masing vertex penyusun objek. Misal (x1,y1,z1) disimpan pada vertices index 0, (x2,y2,z2) pada index 1, (x3,y3,z3) pada index 2, dan (x4,y4,z4) pada index 3. Misal diketahui nilai vertex-vertex sebagai berikut
(x4,y4,z4) (x1,y1,z1)
(x3,y3,z3) (x2,y2,z2)
200
“private float[] vertices_rect = {
-1.0f, -1.0f, 0.0f, // 0. left-bottom-front
1.0f, -1.0f, 0.0f, // 1. right-bottom-front
-1.0f, 1.0f, 0.0f, // 2. left-top-front
1.0f, 1.0f, 0.0f // 3. right-top-front
};”
maka list dari index-index pada tersebut “Indices” adalah
“// The order vertices_rect to connect them
//(diagonal must crossing)
private short[] Indices = { 0, 1, 2, 2, 1, 3 };”
Nilai dalam “Indices” tidak selalu sama, tetapi akan menghasilkan urutan yang berbeda jika diketahui urutan index dari nilai vertex-vertex juga berbeda, contoh diketahui
“private float[] vertices_rect = {
-1.0f, 1.0f, 0.0f, // 0, Top Left
-1.0f, -1.0f, 0.0f, // 1, Bottom Left
1.0f, -1.0f, 0.0f, // 2, Bottom Right
1.0f, 1.0f, 0.0f, // 3, Top Right
};”
Gambar 2.10 Segitiga dan segiempat
201
maka list dari index-index pada tersebut “Indices” akan benar jika diisi dengan urutan berikut ini
“// The order vertices_rect to connect them
//(diagonal must crossing)
private short[] Indices = { 0, 1, 2, 0, 2, 3 };”
Source Code 2.5 Code Membuat Segitiga & Segiempat
ESRender.java
package com.example.imacho.createtrianglenrect;
import android.opengl.GLSurfaceView.Renderer;
import android.opengl.GLU;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
/**
* Created by Imacho on 4/5/2015.
*/
public class ESRender implements Renderer {
private Triangle_n_Rectangle trian-
gle_n_rectangle; // the object to be drawn
/** Constructor to set the handed over context */
public ESRender() {
this.triangle_n_rectangle = new Trian-
gle_n_Rectangle();
}
@Override
public void onDrawFrame(GL10 gl) {
gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f); //
set background with white color
//gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); //
set background with black color
gl.glClear(GL10.GL_COLOR_BUFFER_BIT |
GL10.GL_DEPTH_BUFFER_BIT); // clear Screen and Depth
Buffer
// display drawing triangle one color
/*gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(0.0f, -2.0f, -5.0f);
trian-
gle_n_rectangle.draw_triangle_one_color(gl);
gl.glPopMatrix(); // end freeze state/event
to each object
*/
// display drawing triangle three color
202
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(0.0f, 0.0f, -5.0f);
trian-
gle_n_rectangle.draw_triangle_three_color(gl);
gl.glPopMatrix(); // end freeze state/event
to each object
// display rectangle dengan cara ke-1
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(2.5f, 0.0f, 0.0f);
gl.glTranslatef(0.0f, 0.0f, -5.0f);
trian-
gle_n_rectangle.draw_rectangle_cara1(gl);
gl.glPopMatrix();
// display rectangle dengan cara ke-2
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(-2.5f, 0.0f, 0.0f);
gl.glTranslatef(0.0f, 0.0f, -5.0f);
trian-
gle_n_rectangle.draw_rectangle_cara2(gl);
gl.glPopMatrix();
}
@Override
public void onSurfaceChanged(GL10 gl, int width,
int height) {
if (height == 0)
height = 1; // To prevent divide by zero
float aspect = (float) width / height;
// Set the viewport (display area) to cover
the entire window
gl.glViewport(0, 0, width, height);
// Setup perspective projection, with aspect
ratio matches viewport
gl.glMatrixMode(GL10.GL_PROJECTION); // Se-
lect projection matrix
gl.glLoadIdentity(); // Reset projection ma-
trix
// Use perspective projection
GLU.gluPerspective(gl, 45, aspect, 0.1f,
100.f);
gl.glMatrixMode(GL10.GL_MODELVIEW); // Select
model-view matrix
gl.glLoadIdentity(); // Reset
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig
config) {
triangle_n_rectangle = new Trian-
gle_n_Rectangle();
}
203
}
MainActivity.java
package com.example.imacho.createtrianglenrect;
import android.app.Activity;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;
/**
* Created by Imacho on 4/5/2015.
*/
public class MainActivity extends Activity {
/** The OpenGL view */
private GLSurfaceView glSurfaceView;
@Override
protected void onCreate(Bundle savedIn-
stanceState) {
super.onCreate(savedInstanceState);
// requesting to turn the title OFF
requestWindowFea-
ture(Window.FEATURE_NO_TITLE);
// making it full screen
getWin-
dow().setFlags(WindowManager.LayoutParams.FLAG_
FULLSCREEN,
WindowManag-
er.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and create
an instance with this activity
glSurfaceView = new GLSur-
faceView(this);
// set our renderer to be the main ren-
derer with the current activity context
glSurfaceView.setRenderer(new ESRen-
204
der());
setContentView(glSurfaceView);
}
/**
* Remember to resume the glSurface
*/
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
/**
* Also pause the glSurface
*/
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
@Override
public boolean onCreateOptionsMenu(Menu
menu) {
// Inflate the menu; this adds items
to the action bar if it is present.
getMenuInflat-
er().inflate(R.menu.menu_main, menu);
return true;
}
}
Triangle_n_Rectangle.java
package com.example.imacho.createtrianglenrect;
import android.util.Log;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import java.nio.ShortBuffer;
import javax.microedition.khronos.opengles.GL10;
/**
* Created by Imacho on 4/5/2015.
*/
public class Triangle_n_Rectangle {
205
private float vertices_line_with_points[]=null;
private float vertices_line_with_points_color[] =
null;
float x,y;
float step_loop=0.001f;
float x1,y1;
float x2,y2;
float array_factor=2.0f;
private int loop_line,loop_line_color;
private float[] vertices_rect = {
-1.0f, -1.0f, 0.0f, // 0. left-bottom-
front
1.0f, -1.0f, 0.0f, // 1. right-bottom-
front
-1.0f, 1.0f, 0.0f, // 2. left-top-front
1.0f, 1.0f, 0.0f // 3. right-top-front
};
private float[] color_rect = { // Vertices for
color
1.0f, 0.0f, 0.0f, 1.0f,
0.0f, 0.5f, 0.0f, 1.0f,
0.0f, 0.0f, 0.5f, 1.0f,
1.0f, 0.0f, 0.0f, 1.0f
};
// The order vertices_rect to connect them (diag-
onal must crossing)
private short[] Indices = { 0, 1, 2, 2, 1, 3 };
public Triangle_n_Rectangle() {
}
// Point to our vertex buffer, return buffer
holding the vertices
// a float is 4 bytes, therefore we multiply the
number if
// vertices with 4.
public static FloatBuffer makeFloatBuffer(float[]
arr) {
ByteBuffer bb = ByteBuff-
er.allocateDirect(arr.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
fb.position(0);
return fb;
}
// short is 2 bytes, therefore we multiply the
number if
// vertices with 2.
public static ShortBuffer makeShortBuffer(short[]
arr) {
ByteBuffer bb = ByteBuff-
er.allocateDirect(arr.length * 2);
bb.order(ByteOrder.nativeOrder());
ShortBuffer sb = bb.asShortBuffer();
206
sb.put(arr);
sb.position(0);
return sb;
}
/** The draw method for the primitive object with
the GL context */
public void draw_triangle_one_color(GL10 gl){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for the triangle
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] {
-1.0f, -1.0f, 0.0f, // V1 - first
vertex (x,y,z)
1.0f, -1.0f, 0.0f, // V2 -
second vertex
0.0f, 1.0f, 0.0f // V3 - third ver-
tex (x,y,z)
}));
// Draw the vertices as triangle
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0,
3);
// set the global colour for wire the trian-
gle
gl.glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
// Draw the wire as edge triangle
gl.glDrawArrays(GL10.GL_LINE_LOOP, 0, 3);
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void draw_triangle_three_color(GL10 gl){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// Point to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] {
-1.0f, -1.0f, 0.0f, // V1 - first
vertex (x,y,z)
1.0f, -1.0f, 0.0f, // V2 -
second vertex
0.0f, 1.0f, 0.0f // V3 - third ver-
tex (x,y,z)
}));
// Set/ mapping the colour for object
gl.glColorPointer(4, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float[]{
1.0f, 0.0f, 0.0f, 1.0f, // first
207
color (r,g,b,a)
0.0f, 1.0f, 0.0f, 1.0f, // second
color (r,g,b,a)
0.0f, 0.0f, 1.0f, 1.0f // third col-
or (r,g,b,a)
}));
// Draw the vertices as triangle
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0,
3);
// set the global colour for wire the trian-
gle
gl.glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
// Draw the wire as edge triangle
gl.glDrawArrays(GL10.GL_LINE_LOOP, 0, 3);
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_rectangle_cara1(GL10 gl) {
gl.glFrontFace(GL10.GL_CCW); // Front face in
counter-clockwise / Counter-clockwise winding.
// orientation
gl.glEnable(GL10.GL_CULL_FACE); // Enable
cull face
gl.glCullFace(GL10.GL_BACK); // Cull the back
face (don't display) / What faces to remove with the
face culling.
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the global colour for the triangle
//gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// List all points to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_rect));
// Set/ mapping the colour for object
gl.glColorPointer(4, GL10.GL_FLOAT, 0, make-
FloatBuffer(color_rect));
// Draw the vertices as rectangle
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0,4);
// 4 is number of data vertices_rect
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
// Disable face culling.
gl.glDisable(GL10.GL_CULL_FACE);
208
}
public void draw_rectangle_cara2(GL10 gl) {
gl.glFrontFace(GL10.GL_CCW); // Front face in
counter-clockwise / Counter-clockwise winding.
// orientation
gl.glEnable(GL10.GL_CULL_FACE); // Enable
cull face
gl.glCullFace(GL10.GL_BACK); // Cull the back
face (don't display) / What faces to remove with the
face culling.
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the global colour for the triangle
//gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Lish all points to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_rect));
// Set/ mapping the colour for object
gl.glColorPointer(4, GL10.GL_FLOAT, 0, make-
FloatBuffer(color_rect));
// Draw the vertices as rectangle
gl.glDrawElements(GL10.GL_TRIANGLES, Indi-
ces.length,
GL10.GL_UNSIGNED_SHORT, makeShort-
Buffer(Indices));
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
// Disable face culling.
gl.glDisable(GL10.GL_CULL_FACE);
}
}
Source Code 2.6 Code Lain Membuat Segitiga Sederhana
ESRender.java
package com.example.primitives_project_es;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
//import android.opengl.GLU;
import android.opengl.GLSurfaceView.Renderer;
import android.opengl.GLU;
209
public class ESRender implements Renderer {
// the primitive object to be drawn
private PrimitivesObject primitivesobject;
private PrimitivesPolarObject primitivespolarobject;
float sudut=0.0f;
float step_sudut=0.0f;
/** Constructor to set the handed over context */
public ESRender() {
this.primitivesobject = new PrimitivesObject();
this.primitivespolarobject = new PrimitivesPolar-
Object();
}
@Override
public void onDrawFrame(GL10 gl) {
// clear Screen and Depth Buffer
// set background dgn warna putih
gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
gl.glClear(GL10.GL_COLOR_BUFFER_BIT |
GL10.GL_DEPTH_BUFFER_BIT);
// Reset the Modelview Matrix
gl.glLoadIdentity();
// segitiga dengan gradasi warna
gl.glPushMatrix();
gl.glRotatef(-sudut, 0.0f, 0.0f, 1.0f);
gl.glTranslatef(0.0f, 0.0f, -6.5f);
gl.glRotatef(180, 0.0f, 0.0f, 1.0f);
primitivesobject.draw_segitiga(gl);
gl.glPopMatrix();
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int
height) {
if (height == 0)
height = 1; // To prevent divide by zero
float aspect = (float) width / height;
// Set the viewport (display area) to cover the
entire window
gl.glViewport(0, 0, width, height);
// Setup perspective projection, with aspect ra-
tio matches viewport
gl.glMatrixMode(GL10.GL_PROJECTION); // Select
projection matrix
gl.glLoadIdentity(); // Reset projection matrix
// Use perspective projection
GLU.gluPerspective(gl, 45, aspect, 0.1f, 100.f);
gl.glMatrixMode(GL10.GL_MODELVIEW); // Select
model-view matrix
gl.glLoadIdentity(); // Reset
}
@Override
210
public void onSurfaceCreated(GL10 gl, EGLConfig con-
fig) {
primitivesobject = new PrimitivesObject();
primitivespolarobject = new PrimitivesPolar-
Object();
}
}
MainActivity.java
package com.example.primitives_project_es;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;
public class MainActivity extends Activity {
/** The OpenGL view */
private GLSurfaceView glSurfaceView;
@Override
protected void onCreate(Bundle savedIn-
stanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
// requesting to turn the title OFF
requestWindowFea-
ture(Window.FEATURE_NO_TITLE);
// making it full screen
getWin-
dow().setFlags(WindowManager.LayoutParams.FLAG_
FULLSCREEN,
WindowManag-
er.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and
// create an instance with this activi-
ty
glSurfaceView = new GLSur-
faceView(this);
// set our renderer to be the main ren-
211
derer with
// the current activity context
glSurfaceView.setRenderer(new ESRen-
der());
setContentView(glSurfaceView);
}
/**
* Remember to resume the glSurface
*/
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
/**
* Also pause the glSurface
*/
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
@Override
public boolean onCreateOptionsMenu(Menu
menu) {
// Inflate the menu; this adds items
to the action bar if it is present.
getMenuInflat-
er().inflate(R.menu.main, menu);
return true;
}
}
PrimitivesObject.java
package com.example.primitives_project_es;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.opengles.GL10;
import android.opengl.GLES20;
public class PrimitivesObject {
private float vertices[] = { -0.5f, -0.5f, 0.0f,
212
// V1 - first vertex
//
(x,y,z)
-0.5f, 0.5f, 0.0f, // V2
0.5f, 0.5f, 0.0f, // V3
0.5f, -0.5f, 0.0f, // V4
-0.5f, -0.5f, 0.0f // V5
};
private float[] vertices_quad = { // Vertices for
the square
-1.0f, -1.0f, 0.0f, // 0. left-bottom
1.0f, -1.0f, 0.0f, // 1. right-
bottom
-1.0f, 1.0f, 0.0f, // 2. left-top
1.0f, 1.0f, 0.0f // 3. right-top
};
private float vertices_color[] = { 1.0f, 0.0f,
0.0f, 1.0f, // CV1 - first
// color
// (red,green,blue)
0.0f, 1.0f, 0.0f, 1.0f, // CV2
0.0f, 0.0f, 1.0f, 1.0f, // CV3
0.0f, 1.0f, 0.0f, 1.0f, // CV4
1.0f, 0.0f, 0.0f, 1.0f // CV5
};
private float vertices_circle[] = { 0.0f, 0.0f,
0.0f };
private float vertices_circle_color[] = { 0.0f,
0.0f, 0.0f, 0.5f };
private float vertices_line[] = { 0.0f, 0.0f,
0.0f };
private float vertices_line_color[] = { 0.0f,
0.0f, 0.0f, 1.0f };
private int batas_sudut = 360;
float jari_jari;
float a, b;
float x, y;
float step = 3.0f, step_line = 0.2f;
float x1, y1;
float x2, y2;
private int loop, loop_color, loop_line,
loop_line_color;
public PrimitivesObject() {
// ============ start to generate verti-
ces to circle
// ==========================
// Inisialisasi
jari_jari = 1.0f;
// Titik Pusat
a = 0.0f;
b = 0.0f;
213
x = a + jari_jari;
y = b;
loop = 3;
loop_color = 4;
vertices_circle = new float[(int) (3 *
batas_sudut / step) * 3];
vertices_circle_color = new float[(int)
(3 * batas_sudut / step) * 4];
for (float teta = 0; teta <= 2 * ba-
tas_sudut; teta += step) {
vertices_circle[loop] = (float)
((x - a)
* Math.cos((teta /
180) * (22 / 7))
- ((y - b) *
Math.sin((teta / 180) * (22 / 7))) + a);
vertices_circle[loop + 1] =
(float) ((x - a)
* Math.sin((teta /
180) * (22 / 7))
- ((y - b) *
Math.cos((teta / 180) * (22 / 7))) + b);
vertices_circle[loop + 2] = 0;
loop += 3;
// mengenerate warna untuk setiap
vertex
vertices_circle_color[loop_color]
= (float) ((x - a)
* Math.cos((teta /
180) * (22 / 7))
- ((y - b) *
Math.sin((teta / 180) * (22 / 7))) + a);
vertices_circle_color[loop_color +
1] = (float) ((x - a)
* Math.sin((teta /
180) * (22 / 7))
- ((y - b) *
Math.cos((teta / 180) * (22 / 7))) + b);
vertices_circle_color[loop_color +
2] = 0.5f;
vertices_circle_color[loop_color +
3] = 0.5f;
loop_color += 4;
}
// ============= end for generate verti-
ces to circle
// ====================
// ============ start to generate verti-
ces to line
// ==========================
x1 = -1.0f;
y1 = -1.0f;
x2 = 1.0f;
y2 = 1.0f;
loop_line = 3;
214
loop_line_color = 4;
vertices_line = new float[(int) (2 * (x2
- x1) / step_line) * 3];
vertices_line_color = new float[(int) (2
* (x2 - x1) / step_line) * 4];
float m = (y2 - y1) / (x2 - x1);
for (x = x1; x <= x2; x += step_line) {
vertices_line[loop_line] = (float)
(x);
vertices_line[loop_line + 1] =
(float) (m * (x - x1) + y1);
vertices_line[loop_line + 2] = 0;
loop_line += 3;
// mengenerate warna untuk setiap
vertex
verti-
ces_line_color[loop_line_color] = (float) (0.5 * x);
verti-
ces_line_color[loop_line_color + 1] = (float) (0.5 *
m
* (x - x1) + y1);
verti-
ces_line_color[loop_line_color + 2] = 1.0f;
verti-
ces_line_color[loop_line_color + 3] = 1.0f;
loop_line_color += 4;
}
// ============= end for generate verti-
ces to line ====================
}
// Point to our vertex buffer, return buffer
holding the vertices
public static FloatBuffer makeFloatBuffer(float[]
arr) {
ByteBuffer bb = ByteBuff-
er.allocateDirect(arr.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
fb.position(0);
return fb;
}
/** The draw method for the primitive object with
the GL context */
public void draw_points(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
//
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the points (pem-
berian warna untuk titik)
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
215
// Point to our vertex buffer (mendata
nilai lokasi/posisi titik)
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float[] {
1.0f, 1.0f, 0.0f, // V1 -
first vertex (x,y,z)
1.0f, 0.8f, 0.0f, // V2
1.0f, 0.6f, 0.0f, // V3
1.0f, 0.4f, 0.0f, // V4
1.0f, 0.2f, 0.0f, // V5
1.0f, 0.0f, 0.0f, // V6
1.0f, -0.2f, 0.0f, // V7
1.0f, -0.4f, 0.0f, // V8
1.0f, -0.6f, 0.0f, // V9
1.0f, -0.8f, 0.0f, // V10
1.0f, -1.0f, 0.0f, // V11
0.8f, -1.0f, 0.0f, // V12
0.6f, -1.0f, 0.0f, // V13
0.4f, -1.0f, 0.0f, // V14
0.2f, -1.0f, 0.0f, // V15
0.0f, -1.0f, 0.0f, // V16
-0.2f, -1.0f, 0.0f, // V17
-0.4f, -1.0f, 0.0f, // V18
-0.6f, -1.0f, 0.0f, // V19
-0.7f, -1.0f, 0.0f, // V20
-0.8f, -1.0f, 0.0f, // V21
-1.0f, -1.0f, 0.0f, // V22
}));
// Draw the vertices as points (menggam-
bar titik-titik)
gl.glDrawArrays(GL10.GL_POINTS, 0, 22);
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
//
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_line(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
//
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the line (pemberian
warna untuk garis)
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer (mendata
nilai lokasi/posisi titik yang
// menyusun garis)
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float[] {
216
1.0f, 1.0f, 0.0f, // V1 -
first vertex (x,y,z)
-1.0f, -1.0f, 0.0f, // V2
- second vertex
}));
// Draw the vertices as lines (menggambar
garis dari titik-titik)
gl.glDrawArrays(GL10.GL_LINES, 0, 2);
/*
* gl.glDrawElements(GL10.GL_LINES, 2,
GL10.GL_UNSIGNED_SHORT,
* makeFloatBuffer(new float [] { 1.0f,
1.0f, 0.0f, // V1 - first vertex
* (x,y,z) -1.0f, -1.0f, 0.0f, // V2 -
second vertex }));
*/
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
//
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_line_color(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the line (pemberian
warna untuk garis)
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer (mendata
nilai lokasi/posisi titik yang
// menyusun garis)
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_line));
// memetakan warna untuk setiap vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(vertices_line_color));
// Draw the vertices as lines (menggambar
garis dari titik-titik)
gl.glDrawArrays(GL10.GL_LINE_STRIP, 0,
(int) (2 * (x2 - x1) /
step_line));
/*
* gl.glDrawElements(GL10.GL_LINES, 2,
GL10.GL_UNSIGNED_SHORT,
* makeFloatBuffer(new float [] { 1.0f,
1.0f, 0.0f, // V1 - first vertex
217
* (x,y,z) -1.0f, -1.0f, 0.0f, // V2 -
second vertex }));
*/
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_circle(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
//
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the object circle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
// create VBO from buffer with glBuffer-
Data()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(vertices_circle));
// draw circle as filled shape
// gl.glDrawArrays(GL10.GL_TRIANGLE_FAN,
1, (int) ((int)
// 2*batas_sudut/step));
// draw circle contours
// gl.glDrawArrays(GL10.GL_LINES, 1,
(int) ((int) 2*batas_sudut/step));
// // membuat garis putus-putus pada tepi
lingkaran
gl.glDrawArrays(GL10.GL_LINES, 1, (int)
((int) 2 * batas_sudut / step));
// gl.glDrawArrays(GL10.GL_LINE_STRIP, 1,
(int) ((int)
// 2*batas_sudut/step));
// gl.glDrawArrays(GL10.GL_POINTS, 1,
(int) ((int) 2*batas_sudut/step));
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
//
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_circle_color(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
218
// set the colour edge for the object
circle
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// create VBO from buffer with glBuffer-
Data()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(vertices_circle));
// memetakan warna untuk setiap vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(vertices_circle_color));
// draw circle as filled shape
// gl.glDrawArrays(GL10.GL_TRIANGLE_FAN,
1, (int) ((int)
// 2*batas_sudut/step));
gl.glDrawArrays(GL10.GL_LINE_STRIP, 1,
(int) ((int) 2 * ba-
tas_sudut / step));
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_kotak(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// Point to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices));
// Draw the vertices as square
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_color));
gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3);
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_color));
gl.glDrawArrays(GL10.GL_TRIANGLES, 2, 3);
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
219
}
public void draw_segitiga(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the triangle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float[] {
-0.5f, -0.5f, 0.0f, // V1
- first vertex (x,y,z)
0.5f, -0.5f, 0.0f, // V2 -
second vertex
0.0f, 0.5f, 0.0f // V3 -
third vertex
}));
// Draw the vertices as triangle
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_color));
gl.glDrawArrays(GLES20.GL_TRIANGLES, 0,
3);
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
// Render the shape quad
public void draw_quad(GL10 gl) {
// Enable vertex-array and define its
buffer
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_quad));
// Draw the primitives from the vertex-
array directly
gl.glPolygonOffset(0.0f, 1.0f);
gl.glScalef(0.5f, 0.5f, 0.5f);
gl.glColor4f(0.5f, 0.5f, 1.0f, 1.0f); //
Set the current color (NEW)
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP,
0, vertices_quad.length / 3);
//gl.glDrawArrays(GL10.GL_TRIANGLES, 0,
vertices_quad.length / 3);
//gl.glDrawArrays(GL10.GL_LINES, 0, ver-
tices_quad.length / 3);
220
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
}
Gambar 2.11 Membuat Segitiga Sederhana
Source Code 2.7 Code Membuat Segiempat
ESRender.java
package com.example.primitives_project_es;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
//import android.opengl.GLU;
import android.opengl.GLSurfaceView.Renderer;
import android.opengl.GLU;
public class ESRender implements Renderer {
private PrimitivesObject primitivesobject; //
the primitive object to be drawn
private PrimitivesPolarObject primitivespolar-
object;
float sudut=0.0f;
float step_sudut=0.0f;
/** Constructor to set the handed over context */
public ESRender() {
this.primitivesobject = new Primi-
tivesObject();
this.primitivespolarobject = new Primi-
tivesPolarObject();
221
}
@Override
public void onDrawFrame(GL10 gl) {
// clear Screen and Depth Buffer
gl.glClearColor(1.0f, 1.0f, 1.0f,
1.0f); // set background dgn warna putih
//gl.glClearColor(0.0f, 0.0f,
0.0f, 1.0f); // set background dgn warna hitam
gl.glClear(GL10.GL_COLOR_BUFFER_BIT |
GL10.GL_DEPTH_BUFFER_BIT);
// Reset the Modelview Matrix
gl.glLoadIdentity();
// menampilkan persegi dengan gradasi
warna
gl.glPushMatrix();
gl.glTranslatef(0.0f, 0.0f, -
5.0f);
primitivesobject.draw_kotak(gl);
gl.glPopMatrix();
}
@Override
public void onSurfaceChanged(GL10 gl, int width,
int height) {
if (height == 0)
height = 1; // To prevent divide
by zero
float aspect = (float) width / height;
// Set the viewport (display area) to
cover the entire window
gl.glViewport(0, 0, width, height);
// Setup perspective projection, with as-
pect ratio matches viewport
gl.glMatrixMode(GL10.GL_PROJECTION); //
Select projection matrix
gl.glLoadIdentity(); // Reset projection
matrix
// Use perspective projection
GLU.gluPerspective(gl, 45, aspect, 0.1f,
100.f);
gl.glMatrixMode(GL10.GL_MODELVIEW); //
Select model-view matrix
gl.glLoadIdentity(); // Reset }
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig
config) {
//primitivesobject = new Primi-
tivesObject();
primitivesobject = new Primi-
tivesObject();
primitivespolarobject = new PrimitivesPo-
larObject();
222
}
}
MainActivity.java
package com.example.primitives_project_es;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;
public class MainActivity extends Activity {
/** The OpenGL view */
private GLSurfaceView glSurfaceView;
@Override
protected void onCreate(Bundle savedInstanceS-
tate) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
// requesting to turn the title OFF
requestWindowFea-
ture(Window.FEATURE_NO_TITLE);
// making it full screen
getWin-
dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSC
REEN,
WindowManag-
er.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and
// create an instance with this activity
glSurfaceView = new GLSurfaceView(this);
// set our renderer to be the main renderer
with
// the current activity context
glSurfaceView.setRenderer(new ESRender());
setContentView(glSurfaceView);
}
/**
* Remember to resume the glSurface
*/
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
/**
223
* Also pause the glSurface
*/
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to
the action bar if it is present.
getMenuInflater().inflate(R.menu.main,
menu);
return true;
}
}
PrimitivesObject.java
package com.example.primitives_project_es;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.opengles.GL10;
import android.opengl.GLES20;
public class PrimitivesObject {
private float vertices[] = { -0.5f, -0.5f, 0.0f,
// V1 - first vertex
//
(x,y,z)
-0.5f, 0.5f, 0.0f, // V2
0.5f, 0.5f, 0.0f, // V3
0.5f, -0.5f, 0.0f, // V4
-0.5f, -0.5f, 0.0f // V5
};
private float[] vertices_quad = { // Vertices for
the square
-1.0f, -1.0f, 0.0f, // 0. left-bottom
1.0f, -1.0f, 0.0f, // 1. right-
bottom
-1.0f, 1.0f, 0.0f, // 2. left-top
1.0f, 1.0f, 0.0f // 3. right-top
};
private float vertices_color[] = { 1.0f, 0.0f,
0.0f, 1.0f, // CV1 - first
// color
224
// (red,green,blue)
0.0f, 1.0f, 0.0f, 1.0f, // CV2
0.0f, 0.0f, 1.0f, 1.0f, // CV3
0.0f, 1.0f, 0.0f, 1.0f, // CV4
1.0f, 0.0f, 0.0f, 1.0f // CV5
};
private float vertices_circle[] = { 0.0f, 0.0f,
0.0f };
private float vertices_circle_color[] = { 0.0f,
0.0f, 0.0f, 0.5f };
private float vertices_line[] = { 0.0f, 0.0f,
0.0f };
private float vertices_line_color[] = { 0.0f,
0.0f, 0.0f, 1.0f };
private int batas_sudut = 360;
float jari_jari;
float a, b;
float x, y;
float step = 3.0f, step_line = 0.2f;
float x1, y1;
float x2, y2;
private int loop, loop_color, loop_line,
loop_line_color;
public PrimitivesObject() {
// ============ start to generate verti-
ces to circle
// ==========================
// Inisialisasi
jari_jari = 1.0f;
// Titik Pusat
a = 0.0f;
b = 0.0f;
x = a + jari_jari;
y = b;
loop = 3;
loop_color = 4;
vertices_circle = new float[(int) (3 *
batas_sudut / step) * 3];
vertices_circle_color = new float[(int)
(3 * batas_sudut / step) * 4];
for (float teta = 0; teta <= 2 * ba-
tas_sudut; teta += step) {
vertices_circle[loop] = (float)
((x - a)
* Math.cos((teta /
180) * (22 / 7))
- ((y - b) *
Math.sin((teta / 180) * (22 / 7))) + a);
vertices_circle[loop + 1] =
(float) ((x - a)
* Math.sin((teta /
180) * (22 / 7))
- ((y - b) *
225
Math.cos((teta / 180) * (22 / 7))) + b);
vertices_circle[loop + 2] = 0;
loop += 3;
// mengenerate warna untuk setiap
vertex
vertices_circle_color[loop_color]
= (float) ((x - a)
* Math.cos((teta /
180) * (22 / 7))
- ((y - b) *
Math.sin((teta / 180) * (22 / 7))) + a);
vertices_circle_color[loop_color +
1] = (float) ((x - a)
* Math.sin((teta /
180) * (22 / 7))
- ((y - b) *
Math.cos((teta / 180) * (22 / 7))) + b);
vertices_circle_color[loop_color +
2] = 0.5f;
vertices_circle_color[loop_color +
3] = 0.5f;
loop_color += 4;
}
// ============= end for generate verti-
ces to circle
// ====================
// ============ start to generate verti-
ces to line
// ==========================
x1 = -1.0f;
y1 = -1.0f;
x2 = 1.0f;
y2 = 1.0f;
loop_line = 3;
loop_line_color = 4;
vertices_line = new float[(int) (2 * (x2
- x1) / step_line) * 3];
vertices_line_color = new float[(int) (2
* (x2 - x1) / step_line) * 4];
float m = (y2 - y1) / (x2 - x1);
for (x = x1; x <= x2; x += step_line) {
vertices_line[loop_line] = (float)
(x);
vertices_line[loop_line + 1] =
(float) (m * (x - x1) + y1);
vertices_line[loop_line + 2] = 0;
loop_line += 3;
// mengenerate warna untuk setiap
vertex
verti-
ces_line_color[loop_line_color] = (float) (0.5 * x);
verti-
ces_line_color[loop_line_color + 1] = (float) (0.5 *
m
226
* (x - x1) + y1);
verti-
ces_line_color[loop_line_color + 2] = 1.0f;
verti-
ces_line_color[loop_line_color + 3] = 1.0f;
loop_line_color += 4;
}
// ============= end for generate verti-
ces to line ====================
}
// Point to our vertex buffer, return buffer
holding the vertices
public static FloatBuffer makeFloatBuffer(float[]
arr) {
ByteBuffer bb = ByteBuff-
er.allocateDirect(arr.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
fb.position(0);
return fb;
}
/** The draw method for the primitive object with
the GL context */
public void draw_points(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
//
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the points (pem-
berian warna untuk titik)
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer (mendata
nilai lokasi/posisi titik)
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float[] {
1.0f, 1.0f, 0.0f, // V1 -
first vertex (x,y,z)
1.0f, 0.8f, 0.0f, // V2
1.0f, 0.6f, 0.0f, // V3
1.0f, 0.4f, 0.0f, // V4
1.0f, 0.2f, 0.0f, // V5
1.0f, 0.0f, 0.0f, // V6
1.0f, -0.2f, 0.0f, // V7
1.0f, -0.4f, 0.0f, // V8
1.0f, -0.6f, 0.0f, // V9
1.0f, -0.8f, 0.0f, // V10
1.0f, -1.0f, 0.0f, // V11
0.8f, -1.0f, 0.0f, // V12
0.6f, -1.0f, 0.0f, // V13
0.4f, -1.0f, 0.0f, // V14
0.2f, -1.0f, 0.0f, // V15
0.0f, -1.0f, 0.0f, // V16
227
-0.2f, -1.0f, 0.0f, // V17
-0.4f, -1.0f, 0.0f, // V18
-0.6f, -1.0f, 0.0f, // V19
-0.7f, -1.0f, 0.0f, // V20
-0.8f, -1.0f, 0.0f, // V21
-1.0f, -1.0f, 0.0f, // V22
}));
// Draw the vertices as points (menggam-
bar titik-titik)
gl.glDrawArrays(GL10.GL_POINTS, 0, 22);
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
//
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_line(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
//
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the line (pemberian
warna untuk garis)
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer (mendata
nilai lokasi/posisi titik yang
// menyusun garis)
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float[] {
1.0f, 1.0f, 0.0f, // V1 -
first vertex (x,y,z)
-1.0f, -1.0f, 0.0f, // V2
- second vertex
}));
// Draw the vertices as lines (menggambar
garis dari titik-titik)
gl.glDrawArrays(GL10.GL_LINES, 0, 2);
/*
* gl.glDrawElements(GL10.GL_LINES, 2,
GL10.GL_UNSIGNED_SHORT,
* makeFloatBuffer(new float [] { 1.0f,
1.0f, 0.0f, // V1 - first vertex
* (x,y,z) -1.0f, -1.0f, 0.0f, // V2 -
second vertex }));
*/
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
228
//
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_line_color(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the line (pemberian
warna untuk garis)
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer (mendata
nilai lokasi/posisi titik yang
// menyusun garis)
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_line));
// memetakan warna untuk setiap vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(vertices_line_color));
// Draw the vertices as lines (menggambar
garis dari titik-titik)
gl.glDrawArrays(GL10.GL_LINE_STRIP, 0,
(int) (2 * (x2 - x1) /
step_line));
/*
* gl.glDrawElements(GL10.GL_LINES, 2,
GL10.GL_UNSIGNED_SHORT,
* makeFloatBuffer(new float [] { 1.0f,
1.0f, 0.0f, // V1 - first vertex
* (x,y,z) -1.0f, -1.0f, 0.0f, // V2 -
second vertex }));
*/
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_circle(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
//
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the object circle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
229
// create VBO from buffer with glBuffer-
Data()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(vertices_circle));
// draw circle as filled shape
// gl.glDrawArrays(GL10.GL_TRIANGLE_FAN,
1, (int) ((int)
// 2*batas_sudut/step));
// draw circle contours
// gl.glDrawArrays(GL10.GL_LINES, 1,
(int) ((int) 2*batas_sudut/step));
// // membuat garis putus-putus pada tepi
lingkaran
gl.glDrawArrays(GL10.GL_LINES, 1, (int)
((int) 2 * batas_sudut / step));
// gl.glDrawArrays(GL10.GL_LINE_STRIP, 1,
(int) ((int)
// 2*batas_sudut/step));
// gl.glDrawArrays(GL10.GL_POINTS, 1,
(int) ((int) 2*batas_sudut/step));
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
//
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_circle_color(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour edge for the object
circle
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// create VBO from buffer with glBuffer-
Data()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(vertices_circle));
// memetakan warna untuk setiap vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(vertices_circle_color));
// draw circle as filled shape
// gl.glDrawArrays(GL10.GL_TRIANGLE_FAN,
1, (int) ((int)
// 2*batas_sudut/step));
gl.glDrawArrays(GL10.GL_LINE_STRIP, 1,
(int) ((int) 2 * ba-
230
tas_sudut / step));
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_kotak(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// Point to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices));
// Draw the vertices as square
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_color));
gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3);
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_color));
gl.glDrawArrays(GL10.GL_TRIANGLES, 2, 3);
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_segitiga(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the triangle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float[] {
-0.5f, -0.5f, 0.0f, // V1
- first vertex (x,y,z)
0.5f, -0.5f, 0.0f, // V2 -
second vertex
0.0f, 0.5f, 0.0f // V3 -
third vertex
}));
231
// Draw the vertices as triangle
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_color));
gl.glDrawArrays(GLES20.GL_TRIANGLES, 0,
3);
// Disable the client state before leav-
ing
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
// Render the shape quad
public void draw_quad(GL10 gl) {
// Enable vertex-array and define its
buffer
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_quad));
// Draw the primitives from the vertex-
array directly
gl.glPolygonOffset(0.0f, 1.0f);
gl.glScalef(0.5f, 0.5f, 0.5f);
gl.glColor4f(0.5f, 0.5f, 1.0f, 1.0f); //
Set the current color (NEW)
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP,
0, vertices_quad.length / 3);
//gl.glDrawArrays(GL10.GL_TRIANGLES, 0,
vertices_quad.length / 3);
//gl.glDrawArrays(GL10.GL_LINES, 0, ver-
tices_quad.length / 3);
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
}
232
Gambar 2.12 Membuat Segiempat
2.5 Membuat Polygon/Segibanyak
Polygon adalah bangun dua dimensi yang memiliki sejumlah si-si dan sudut. Segitiga merupakan bentuk polygon dengan tiga sisi dan sudut. Segiempat merupakan bentuk polygon dengan empat sisi dan empat sudut. Segilima (pentagon) merupakan bentuk polygon dengan lima sisi dan sudut. Segienam (hexagon) merupakan bentuk polygon dengan enam sisi dan sudut. Dan Polygon dengan sisi terbanyak adaalah bangun lingkaran. Berikut adalah potongan script untuk membuat pentagon,
“public void draw_polygon3(GL10 gl, boolean myGL_Wire){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for the triangle
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_poly3));
if(myGL_Wire==false) {
// Draw the vertices as polygon
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0,
vertices_poly3.length/3);
}else {
233
// set the global colour for wire the triangle
gl.glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
// Draw the wire as edge polygon
gl.glDrawArrays(GL10.GL_LINE_LOOP, 0,
vertices_poly3.length / 3);
}
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}”
Gambar 2.13 Wired-Flat-Color Segilima (Pentagon)
Pada Gambar 2.14, objek-objek tersebut merupakan hasil run-ning kode program di file “ESRender.java” yaitu
“polygonObject.draw_polygon3_multi_color(gl,true);
..
polygonObject.draw_polygon3(gl,false);
..
polygonObject.draw_polygon3_multi_color(gl,false);”
Jika parameter ke-2 dalam setiap kode program di atas bernilai “true”, maka wire (garis tepian) dari objek akan nampak, tetapi jika “false” maka akan nampak warna dari keseluruhan pada permukaan objek, baik satu warna maupun beberapa warna disetiap vertex atau sudut objek.
234
Gambar 2.14 Polygon statis dan dinamis (n-sisi)
Source Code 2.8 Membuat Polygon Statis dan Dinamis
ESRender.java
package com.example.imacho.createpolygon;
import android.opengl.GLSurfaceView.Renderer;
import android.opengl.GLU;
import android.os.SystemClock;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
/**
* Created by Imacho on 4/5/2015.
*/
public class ESRender implements Renderer {
private PolygonObject polygonObject; // the ob-
ject to be drawn
private long prevtime = SystemClock.uptimeMillis();
private int sisi = 3;
private int runMode=1;
/** Constructor to set the handed over context */
public ESRender() {
this.polygonObject = new PolygonObject();
}
@Override
public void onDrawFrame(GL10 gl) {
gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f); // set
background with white color
//gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); //
set background with black color
gl.glClear(GL10.GL_COLOR_BUFFER_BIT |
GL10.GL_DEPTH_BUFFER_BIT); // clear Screen and Depth
235
Buffer
// display drawing polygon wire
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(-3.5f, -1.0f, -7.0f);
polygonObject.draw_polygon3(gl, true);
gl.glPopMatrix(); // end freeze state/event to
each object
// display drawing polygon wire color
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(-1.2f, -1.0f, -7.0f);
polygonOb-
ject.draw_polygon3_multi_color(gl,true);
gl.glPopMatrix(); // end freeze state/event to
each object
// display drawing polygon flat
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(1.2f, -1.0f, -7.0f);
polygonObject.draw_polygon3(gl, false);
gl.glPopMatrix(); // end freeze state/event to
each object
// display drawing polygon color
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(3.5f, -1.0f, -7.0f);
polygonObject.draw_polygon3_multi_color(gl,
false);
gl.glPopMatrix(); // end freeze state/event to
each object
//======================================================
=========
// display drawing polygon dinamis wire
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(-3.5f, 1.0f, -7.0f);
polygonObject.draw_polygon_dinamis(gl, 10,
true);
gl.glPopMatrix(); // end freeze state/event to
each object
// display drawing polygon dinamis wire color
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(-1.2f, 1.0f, -7.0f);
polygonOb-
ject.draw_polygon_dinamis_multi_color(gl, 10, true);
gl.glPopMatrix(); // end freeze state/event to
each object
// display drawing polygon dinamis flat
gl.glPushMatrix(); // start freeze
236
state/event to each object
gl.glTranslatef(1.2f, 1.0f, -7.0f);
polygonObject.draw_polygon_dinamis(gl, 10,
false);
gl.glPopMatrix(); // end freeze state/event to
each object
// display drawing polygon dinamis color
long curtime = SystemClock.uptimeMillis();
if ((curtime - prevtime) > 2000)
{
prevtime = curtime;
if (runMode==1) {
sisi += 1;
if (sisi > 20)
{
runMode=0;
}
}
else{
sisi -= 1;
if (sisi == 3)
{
runMode=1;
}
}
}
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(3.5f, 1.0f, -7.0f);
polygonOb-
ject.draw_polygon_dinamis_multi_color(gl, sisi, false);
gl.glPopMatrix(); // end freeze state/event to
each object
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int
height) {
if (height == 0)
height = 1; // To prevent divide by zero
float aspect = (float) width / height;
// Set the viewport (display area) to cover the
entire window
gl.glViewport(0, 0, width, height);
// Setup perspective projection, with aspect ra-
tio matches viewport
gl.glMatrixMode(GL10.GL_PROJECTION); // Select
projection matrix
gl.glLoadIdentity(); // Reset projection matrix
// Use perspective projection
GLU.gluPerspective(gl, 45, aspect, 0.1f, 100.f);
gl.glMatrixMode(GL10.GL_MODELVIEW); // Select
model-view matrix
gl.glLoadIdentity(); // Reset
}
@Override
237
public void onSurfaceCreated(GL10 gl, EGLConfig con-
fig) {
polygonObject = new PolygonObject();
}
}
MainActivity.java
package com.example.imacho.createpolygon;
import android.app.Activity;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;
public class MainActivity extends Activity {
/** The OpenGL view */
private GLSurfaceView glSurfaceView;
@Override
protected void onCreate(Bundle savedInstanceS-
tate) {
super.onCreate(savedInstanceState);
// requesting to turn the title OFF
requestWindowFea-
ture(Window.FEATURE_NO_TITLE);
// making it full screen
getWin-
dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSC
REEN,
WindowManag-
er.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and create an
instance with this activity
glSurfaceView = new GLSurfaceView(this);
// set our renderer to be the main renderer
with the current activity context
glSurfaceView.setRenderer(new ESRender());
setContentView(glSurfaceView);
}
/**
* Remember to resume the glSurface
*/
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
/**
* Also pause the glSurface
238
*/
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to
the action bar if it is present.
getMenuInflat-
er().inflate(R.menu.menu_main, menu);
return true;
}
}
PolygonObject.java
package com.example.imacho.createpolygon;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import java.nio.ShortBuffer;
import javax.microedition.khronos.opengles.GL10;
/**
* Created by Imacho on 4/5/2015.
*/
public class PolygonObject {
private float vertices_poly_dinamis[]=null;
private float color_poly_dinamis[]=null;
private float[] vertices_poly1 = {
-1.0f, -1.0f, 0.0f, // V1 - first vertex
(x,y,z)
1.0f, -1.0f, 0.0f, // V2 - second ver-
tex
0.0f, 1.0f, 0.0f // V3 - third vertex
(x,y,z)
};
private float[] vertices_poly2 = {
-1.0f, -1.0f, 0.0f, // V1 - first vertex
(x,y,z)
1.0f, -1.0f, 0.0f, // V2 - second ver-
tex
2.0f, 1.0f, 0.0f, // V3 - third ver-
tex (x,y,z)
0.0f, 1.0f, 0.0f // V4
};
private float[] color_poly2 = { // Vertices for col-
or
1.0f, 0.0f, 0.0f, 1.0f,
0.0f, 1.0f, 0.0f, 1.0f,
0.0f, 0.0f, 1.0f, 1.0f,
1.0f, 0.0f, 0.0f, 1.0f
239
};
private float[] vertices_poly3 = {
-1.0f, -1.0f, 0.0f, // V1 - first vertex
(x,y,z)
1.0f, -1.0f, 0.0f, // V2 - second ver-
tex
1.0f, 0.0f, 0.0f, // V3 - third ver-
tex (x,y,z)
0.0f, 1.0f, 0.0f, // V4
-1.0f, 0.0f, 0.0f // V5
};
private float[] color_poly3 = { // Vertices for col-
or
1.0f, 0.0f, 0.0f, 1.0f,
0.0f, 1.0f, 0.0f, 0.5f,
0.0f, 0.0f, 1.0f, 0.5f,
1.0f, 0.0f, 0.0f, 1.0f,
1.0f, 0.0f, 0.0f, 0.5f
};
public PolygonObject() {
}
// Point to our vertex buffer, return buffer holding
the vertices
// a float is 4 bytes, therefore we multiply the
number if
// vertices with 4.
public static FloatBuffer makeFloatBuffer(float[]
arr) {
ByteBuffer bb = ByteBuff-
er.allocateDirect(arr.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
fb.position(0);
return fb;
}
public float[] getAngleArrays(int sides)
{
float[] angleArray = new float[sides];
float commonAngle = 360.0f/sides;
float halfAngle = commonAngle/2.0f;
float firstAngle = 360.0f - (90+halfAngle);
angleArray[0] = firstAngle;
float curAngle = firstAngle;
for(int i=1;i<sides;i++)
{
float newAngle = curAngle - commonAngle;
angleArray[i] = newAngle;
curAngle = newAngle;
}
//printArray(angleArray, "angleArray");
return angleArray;
}
240
private float getApproxValue(float f)
{
if (Math.abs(f) < 0.001)
{
return 0;
}
return f;
}
public float[] rotasi_titik2D(float titik_pusat_x,
float titik_pusat_y, float jari_jari, float nilai_sudut)
{
// Titik Pusat dan titik awal
float a = titik_pusat_x;
float b = titik_pusat_y;
float x = a + jari_jari;
float y = b;
float[] vertices_rotate = new float[3];
vertices_rotate[0] = (float) ((x - a)
* getApprox-
Value((float)Math.cos(Math.toRadians(nilai_sudut)))
- ((y - b) * getApprox-
Value((float)Math.sin(Math.toRadians(nilai_sudut)))) +
a);
vertices_rotate[1] = (float) ((x - a)
* getApprox-
Value((float)Math.sin(Math.toRadians(nilai_sudut)))
- ((y - b) * getApprox-
Value((float)Math.cos(Math.toRadians(nilai_sudut)))) +
b);
vertices_rotate[2] = 0;
return vertices_rotate;
}
// short is 2 bytes, therefore we multiply the num-
ber if
// vertices with 2.
public static ShortBuffer makeShortBuffer(short[]
arr) {
ByteBuffer bb = ByteBuff-
er.allocateDirect(arr.length * 2);
bb.order(ByteOrder.nativeOrder());
ShortBuffer sb = bb.asShortBuffer();
sb.put(arr);
sb.position(0);
return sb;
}
/** The draw method for the primitive object with
the GL context */
public void draw_polygon(GL10 gl){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for the triangle
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
241
// Point to our vertex buffer
/*gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] {
-1.0f, -1.0f, 0.0f, // V1 - first ver-
tex (x,y,z)
1.0f, -1.0f, 0.0f, // V2 - second ver-
tex
0.0f, 1.0f, 0.0f // V3 - third ver-
tex (x,y,z)
}));*/
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_poly1));
// Draw the vertices as polygon
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0, verti-
ces_poly1.length/3);
// set the global colour for wire the triangle
gl.glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
// Draw the wire as edge polygon
//gl.glDrawArrays(GL10.GL_LINE_LOOP, 0, verti-
ces_poly1.length/3);
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void draw_polygon2(GL10 gl, boolean
myGL_Wire){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for the triangle
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer
/*gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] {
-1.0f, -1.0f, 0.0f, // V1 - first ver-
tex (x,y,z)
1.0f, -1.0f, 0.0f, // V2 - second ver-
tex
2.0f, 1.0f, 0.0f, // V3 - third ver-
tex (x,y,z)
0.0f, 1.0f, 0.0f // V3 - third ver-
tex (x,y,z)
}));*/
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_poly2));
// Draw the vertices as polygon
//gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0, ver-
tices_poly2.length/3);
// set the global colour for wire the polygon
gl.glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
// Draw the wire as edge polygon
242
gl.glDrawArrays(GL10.GL_LINE_LOOP, 0, verti-
ces_poly2.length/3);
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void draw_polygon2_multi_color(GL10 gl, bool-
ean myGL_Wire){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the global colour for the triangle
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer
/*gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] {
-1.0f, -1.0f, 0.0f, // V1 - first ver-
tex (x,y,z)
1.0f, -1.0f, 0.0f, // V2 - second ver-
tex
2.0f, 1.0f, 0.0f, // V3 - third ver-
tex (x,y,z)
0.0f, 1.0f, 0.0f // V3 - third ver-
tex (x,y,z)
}));*/
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_poly2));
gl.glColorPointer(4,GL10.GL_FLOAT,0, makeFloat-
Buffer(color_poly2));
if(myGL_Wire==false) {
// Draw the vertices as polygon
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0,
vertices_poly2.length/3);
}else {
// set the global colour for wire the poly-
gon
gl.glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
// Draw the wire as edge polygon
gl.glDrawArrays(GL10.GL_LINE_LOOP, 0, verti-
ces_poly2.length / 3);
}
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_polygon3(GL10 gl, boolean
myGL_Wire){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for the triangle
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer
243
/*gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] {
-1.0f, -1.0f, 0.0f, // V1 - first ver-
tex (x,y,z)
1.0f, -1.0f, 0.0f, // V2 - second ver-
tex
1.0f, 0.0f, 0.0f, // V3 - third ver-
tex (x,y,z)
0.0f, 1.0f, 0.0f, // V3 - third ver-
tex (x,y,z)
-1.0f, 0.0f, 0.0f // V3 - third ver-
tex (x,y,z)
}));*/
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_poly3));
if(myGL_Wire==false) {
// Draw the vertices as polygon
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0,
vertices_poly3.length/3);
}else {
// set the global colour for wire the trian-
gle
gl.glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
// Draw the wire as edge polygon
gl.glDrawArrays(GL10.GL_LINE_LOOP, 0, verti-
ces_poly3.length / 3);
}
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void draw_polygon3_multi_color(GL10 gl, bool-
ean myGL_Wire){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the global colour for the triangle
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer
/*gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] {
-1.0f, -1.0f, 0.0f, // V1 - first ver-
tex (x,y,z)
1.0f, -1.0f, 0.0f, // V2 - second ver-
tex
1.0f, 0.0f, 0.0f, // V3 - third ver-
tex (x,y,z)
0.0f, 1.0f, 0.0f, // V3 - third ver-
tex (x,y,z)
-1.0f, 0.0f, 0.0f // V3 - third ver-
tex (x,y,z)
}));*/
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_poly3));
gl.glColorPointer(4,GL10.GL_FLOAT,0, makeFloat-
244
Buffer(color_poly3));
if(myGL_Wire==false) {
// Draw the vertices as polygon
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0,
vertices_poly3.length/3);
}else {
// set the global colour for wire the trian-
gle
gl.glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
// Draw the wire as edge polygon
gl.glDrawArrays(GL10.GL_LINE_LOOP, 0, verti-
ces_poly3.length / 3);
}
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_polygon_dinamis(GL10 gl, int sisi,
boolean myGL_Wire){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for the polygon dinamis
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// get sudut polygon dengan sides=sisi
float [] ArraySudut=new float[sisi];
ArraySudut=getAngleArrays(sisi);
// init nilai x,y,z
float [] ArrayNilaiXYZ=new float[sisi];
float sudutTemp;
int loop=0;
// set ukuran dari vertices_poly_dinamis = new
float[sisi * 3];
vertices_poly_dinamis = new float[sisi * 3];
for(int i=1;i<=sisi;i++){
// get sudut ke-i
sudutTemp=ArraySudut[i-1];
// transformasi titik
ArrayNilaiXYZ=rotasi_titik2D(0.0f, 0.0f,
1.0f, sudutTemp);
verti-
ces_poly_dinamis[loop]=ArrayNilaiXYZ[0];
verti-
ces_poly_dinamis[loop+1]=ArrayNilaiXYZ[1];
verti-
ces_poly_dinamis[loop+2]=ArrayNilaiXYZ[2];
loop+=3;
}
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
245
FloatBuffer(vertices_poly_dinamis));
if(myGL_Wire==false) {
// Draw the vertices as polygon
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0,
vertices_poly_dinamis.length/3);
}else {
// set the global colour for wire the poly-
gon dinamis
gl.glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
// Draw the wire as edge polygon
gl.glDrawArrays(GL10.GL_LINE_LOOP, 0, verti-
ces_poly_dinamis.length / 3);
}
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void draw_polygon_dinamis_multi_color(GL10
gl, int sisi, boolean myGL_Wire){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the global colour for the polygon dinamis
//gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// init titik pusat dan jari-jari
float titik_pusat_x=0.0f;
float titik_pusat_y=0.0f;
float jari_jari=1.0f;
// get sudut polygon dengan sides=sisi
float [] ArraySudut=new float[sisi];
ArraySudut=getAngleArrays(sisi);
// init nilai x,y,z
float [] ArrayNilaiXYZ=new float[sisi];
float sudutTemp;
int loop=0;
int loop_color=0;
// set ukuran dari vertices_poly_dinamis = new
float[sisi * 3];
vertices_poly_dinamis = new float[sisi * 3];
// set ukuran dari color_poly_dinamis = new
float[sisi * 4];
color_poly_dinamis = new float[sisi * 4];
for(int i=1;i<=sisi;i++){
// get sudut ke-i
sudutTemp=ArraySudut[i-1];
// transformasi titik
ArrayNilaiXYZ=rotasi_titik2D(titik_pusat_x,
titik_pusat_y, jari_jari, sudutTemp);
246
// set nilai x, y, z dari polygon
verti-
ces_poly_dinamis[loop]=ArrayNilaiXYZ[0];
verti-
ces_poly_dinamis[loop+1]=ArrayNilaiXYZ[1];
verti-
ces_poly_dinamis[loop+2]=ArrayNilaiXYZ[2];
loop+=3;
// set nilai warna setiap vertex (x,y,z) -->
(r,g,b,a)
float a = titik_pusat_x;
float b = titik_pusat_y;
float x = a + jari_jari;
float y = b;
color_poly_dinamis[loop_color] = (float) ((x
- a)
*
Math.cos(Math.toRadians(sudutTemp))
- ((y - b) *
Math.sin(Math.toRadians(sudutTemp))) + a);
color_poly_dinamis[loop_color + 1] = (float)
((x - a)
*
Math.sin(Math.toRadians(sudutTemp))
- ((y - b) *
Math.cos(Math.toRadians(sudutTemp))) + b);
color_poly_dinamis[loop_color + 2] = 0.5f;
color_poly_dinamis[loop_color + 3] = 0.5f;
loop_color += 4;
}
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_poly_dinamis));
gl.glColorPointer(4,GL10.GL_FLOAT,0, makeFloat-
Buffer(color_poly_dinamis));
if(myGL_Wire==false) {
// Draw the vertices as polygon
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0,
vertices_poly_dinamis.length/3);
}else {
// set the global colour for wire the poly-
gon dinamis
//gl.glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
// Draw the wire as edge polygon
gl.glDrawArrays(GL10.GL_LINE_LOOP, 0, verti-
ces_poly_dinamis.length / 3);
}
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
}
247
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/androi
d"
package="com.example.imacho.createpolygon" >
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" an-
droid:screenOrientation="landscape"
an-
droid:configChanges="orientation|screenSize" >
<intent-filter>
<action an-
droid:name="android.intent.action.MAIN" />
<category an-
droid:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
2.6 Membuat Lingkaran
Lingkaran merupakan bangun 2D yang memiliki titik pusat (a,b) dan jari-jari (r). Bangun tersebut dapat dibentuk dengan cara merotasi titik pada koordinat (a+r,b) mulai dari sudut 0 sampai 360 derajat.
Gambar 2.15 Ilustrasi membuat Lingkaran
(a,b)
(0,0) x
y
(a+r,b)
248
Ilustrasi dalam membuat lingkaran dapat digunakan sebagai dasar untuk membuat objek visual bola. Bola secara teori sudah dapat dikatakan sebagai objek yang komplek, sehingga codenya tidak dimasukkan pada bab Primitive Object. Pada beberapa bab berikutnya akan diberikan source code Bola secara lengkap. Langkah pertama dalam membuat Bola dengan mengenerate titik-titik dari sudut 0o sampai 180o secara vertikal, mulai dari ujung atas sampai ujung bawah (top-down) atau sebaliknya dengan step atau interval tertentu (latitude). Kemudian setiap titik tersebut akan menjadi titik awal untuk membentuk lingkaran, yang digerakkan secara horizontal, mulai dari sudut 0o sampai 360o dengan step atau interval tertentu (azimuth).
Gambar 2.16 Ilustrasi Membuat Bola
Kembali lagi pada lingkaran, rumus untuk merotasi titik (a+r,b) menggunakan konsep transformasi geometri dengan inisialisasi jari_jari = 1.0f; titik pusat lingkaran (a = 0.0f;, b = 0.0f;) dan titik awal (x,y) = (x = a + jari_jari;, y = b;) step = 3.0f;, yaitu sebagai berikut
“for (float teta = batas_sudut_lower;
teta <= batas_sudut_upper+step; teta += step) {
vertices_circle[loop] = (float) ((x - a)*
getApproxValue((float)Math.cos(Math.toRadians(teta)))-
((y - b) *getApproxValue((float)Math.sin(Math.toRadians(teta))))
x
y
z
249
+ a);
vertices_circle[loop + 1] = (float) ((x - a)*
getApproxValue((float)Math.sin(Math.toRadians(teta)))-
((y - b)*getApproxValue((float)Math.cos(Math.toRadians(teta))))
+ b);
vertices_circle[loop + 2] = 0;
loop += 3;
}”
Kode program untuk mewarnai bagian dalam lingkaran dapat menggunakan inisialisasi loop_color = 0;
“ ….
vertices_circle_color[loop_color] = (float) ((x - a)
* Math.cos(Math.toRadians(teta))
- ((y - b) * Math.sin(Math.toRadians(teta))) + a);
vertices_circle_color[loop_color + 1] = (float) ((x - a)
* Math.sin(Math.toRadians(teta))
- ((y - b) * Math.cos(Math.toRadians(teta))) + b);
vertices_circle_color[loop_color + 2] = 0.5f;
vertices_circle_color[loop_color + 3] = 0.5f;
loop_color += 4;
”
Kedua potongan kode di atas menggunakan penghitungan banyaknya titik dan juga warnanya untuk menentukan alokasi panjang array berdasarkan nilai sesilih batas sudut dan step-nya.
“ …..
byk_vertices=(((int) Math.round((batas_sudut_upper-batas_sudut_lower)/ step))+1);
”
Hasil running program menampilkan beberapa macam dari lingkaran, mulai dari yang hanya satu warna di bagian tepiannya, bahkan sampai yang memiliki gradasi warna.
250
Gambar 2.17 Membuat Lingkaran Flat dan Gradasi
Gambar 2.18 Membuat Lingkaran Flat dan Gradasi dinamis
Source Code 2.9 Code Membuat Lingkaran Gradasi & Dinamis
ESRender.java
package com.example.imacho.createcircle;
import android.opengl.GLSurfaceView.Renderer;
import android.opengl.GLU;
import android.os.SystemClock;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
/**
* Created by Imacho on 4/5/2015.
*/
public class ESRender implements Renderer {
251
private Circle circle; // the object to be drawn
private long prevtime = System-
Clock.uptimeMillis();
private float sudut_max = 0.0f;
private int runMode=1;
/** Constructor to set the handed over context */
public ESRender() {
this.circle = new Circle();
}
@Override
public void onDrawFrame(GL10 gl) {
gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f); //
set background with white color
//gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); //
set background with black color
gl.glClear(GL10.GL_COLOR_BUFFER_BIT |
GL10.GL_DEPTH_BUFFER_BIT); // clear Screen and Depth
Buffer
// display drawing polygon dinamis color
long curtime = SystemClock.uptimeMillis();
if ((curtime - prevtime) > 1000.0f)
{
prevtime = curtime;
if (runMode==1) {
sudut_max += 10;
if (sudut_max == 360.0f)
{
runMode=0;
}
}
else{
sudut_max -= 10;
if (sudut_max == 0)
{
runMode=1;
}
}
}
// display drawing circle
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(-3.5f, 1.5f, -7.0f);
circle.draw_circle_fraction(gl);
gl.glPopMatrix(); // end freeze state/event
to each object
// display drawing circle fraction with no
fill function sudut_min dan sudut_max
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(-3.5f, -1.5f, -7.0f);
cir-
cle.draw_circle_fraction_one_color_with_nofill_functi
on(gl,0,sudut_max);
252
gl.glPopMatrix(); // end freeze state/event
to each object
// display drawing circle one color
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(-1.2f, 1.5f, -7.0f);
circle.draw_circle_one_color(gl);
gl.glPopMatrix(); // end freeze state/event
to each object
// display drawing circle with no fill func-
tion sudut_min dan sudut_max
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(-1.2f, -1.5f, -7.0f);
cir-
cle.draw_circle_one_color_with_nofill_function(gl,0,s
udut_max);
gl.glPopMatrix(); // end freeze state/event
to each object
// display drawing circle color
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(1.2f, 1.5f, -7.0f);
circle.draw_circle_color(gl);
gl.glPopMatrix(); // end freeze state/event
to each object
// display drawing circle with no fill func-
tion sudut_min dan sudut_max
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(1.2f, -1.5f, -7.0f);
cir-
cle.draw_circle_color_with_nofill_function(gl,0,sudut
_max);
gl.glPopMatrix(); // end freeze state/event
to each object
// display drawing circle color2
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(3.5f, 1.5f, -7.0f);
cir-
cle.draw_circle_dinamic_color_fill(gl);
gl.glPopMatrix(); // end freeze state/event
to each object
// display drawing circle with function
sudut_min dan sudut_max center
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(3.5f, -1.5f, -7.0f);
cir-
cle.draw_circle_color_with_fill_function_center(gl,0,
sudut_max);
gl.glPopMatrix(); // end freeze state/event
253
to each object
// display drawing circle with function
sudut_min dan sudut_max
gl.glPushMatrix(); // start freeze
state/event to each object
gl.glTranslatef(0.0f, 0.0f, -7.0f);
gl.glScalef(0.5f,0.5f,0.5f);
cir-
cle.draw_circle_color_with_fill_function(gl,0,sudut_m
ax);
gl.glPopMatrix(); // end freeze state/event
to each object
}
@Override
public void onSurfaceChanged(GL10 gl, int width,
int height) {
if (height == 0)
height = 1; // To prevent divide by zero
float aspect = (float) width / height;
// Set the viewport (display area) to cover
the entire window
gl.glViewport(0, 0, width, height);
// Setup perspective projection, with aspect
ratio matches viewport
gl.glMatrixMode(GL10.GL_PROJECTION); // Se-
lect projection matrix
gl.glLoadIdentity(); // Reset projection ma-
trix
// Use perspective projection
GLU.gluPerspective(gl, 45, aspect, 0.1f,
100.f);
gl.glMatrixMode(GL10.GL_MODELVIEW); // Select
model-view matrix
gl.glLoadIdentity(); // Reset
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig
config) {
circle = new Circle();
}
}
MainActivity.java
package com.example.imacho.createcircle;
import android.app.Activity;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;
254
/**
* Created by Imacho on 4/5/2015.
*/
public class MainActivity extends Activity {
/** The OpenGL view */
private GLSurfaceView glSurfaceView;
@Override
protected void onCreate(Bundle savedInstanceS-
tate) {
super.onCreate(savedInstanceState);
// requesting to turn the title OFF
requestWindowFea-
ture(Window.FEATURE_NO_TITLE);
// making it full screen
getWin-
dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSC
REEN,
WindowManag-
er.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and create an
instance with this activity
glSurfaceView = new GLSurfaceView(this);
// set our renderer to be the main renderer
with the current activity context
glSurfaceView.setRenderer(new ESRender());
setContentView(glSurfaceView);
}
/**
* Remember to resume the glSurface
*/
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
/**
* Also pause the glSurface
*/
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to
the action bar if it is present.
getMenuInflat-
255
er().inflate(R.menu.menu_main, menu);
return true;
}
}
Circle.java
package com.example.imacho.createcircle;
import android.util.Log;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.opengles.GL10;
/**
* Created by Imacho on 4/12/2015.
*/
public class Circle {
private float vertices[] = { -0.5f, -0.5f, 0.0f,
// V1 - first vertex
// (x,y,z)
-0.5f, 0.5f, 0.0f, // V2
0.5f, 0.5f, 0.0f, // V3
0.5f, -0.5f, 0.0f, // V4
-0.5f, -0.5f, 0.0f // V5
};
private float[] vertices_quad = { // Vertices for
the square
-1.0f, -1.0f, 0.0f, // 0. left-bottom
1.0f, -1.0f, 0.0f, // 1. right-bottom
-1.0f, 1.0f, 0.0f, // 2. left-top
1.0f, 1.0f, 0.0f // 3. right-top
};
private float vertices_color[] = { 1.0f, 0.0f,
0.0f, 1.0f, // CV1 - first
// color
// (red,green,blue)
0.0f, 1.0f, 0.0f, 1.0f, // CV2
0.0f, 0.0f, 1.0f, 1.0f, // CV3
0.0f, 1.0f, 0.0f, 1.0f, // CV4
1.0f, 0.0f, 0.0f, 1.0f // CV5
};
//private float vertices_circle[] = { 0.0f, 0.0f,
0.0f };
//private float vertices_circle_color[] = { 0.0f,
0.0f, 0.0f, 0.5f };
private float vertices_circle[] = null;
private float vertices_circle_color[] = null;
private float ba-
tas_sudut_lower=0.0f,batas_sudut_upper = 360.0f;
256
float jari_jari;
float a, b;
float x, y;
private int loop, loop_color;
float step;
int byk_vertices,byk_vertices1; // menyatakan
banyaknya titik yang di-generate
int realloop;
private float getApproxValue(float f)
{
if (Math.abs(f) < 0.001)
{
return 0;
}
return f;
}
public Circle() {
// ============ start to generate vertices to
circle
// ==========================
// Inisialisasi
jari_jari = 1.0f;
// Titik Pusat
a = 0.0f;
b = 0.0f;
x = a + jari_jari;
y = b;
//step = 1.0f;
step = 3.0f;
byk_vertices1=(int) (((batas_sudut_upper-
batas_sudut_lower)+step)/ step);
//byk_vertices=(((int)
Math.floor((batas_sudut_upper-batas_sudut_lower)/
step))+1); // 4.7/0.1 = 46.9999 ??
byk_vertices=(((int)
Math.round((batas_sudut_upper-batas_sudut_lower)/
step))+1);
loop = 0;
loop_color = 0;
realloop=0;
// menambah nilai +1 untuk byk_vertices untuk
menghindari pemesanan memori yang kurang
vertices_circle = new float[(byk_vertices+1)
* 3];
vertices_circle_color = new
float[(byk_vertices+1) * 4];
// dengan menggunakan while
/*float teta = batas_sudut_lower;
while(teta <= batas_sudut_upper+step){ //
+step untuk batas_sudut_upper, untuk mengatasi loop-
ing yang kurang pada while dikarenakan bug pada nilai
257
update tetanya karena float dan double android studio
tidak stabil
vertices_circle[loop] = (float) ((x - a)
* getApprox-
Value((float)Math.cos(Math.toRadians(teta)))
- ((y - b) * getApprox-
Value((float)Math.sin(Math.toRadians(teta)))) + a);
vertices_circle[loop + 1] = (float) ((x -
a)
* getApprox-
Value((float)Math.sin(Math.toRadians(teta)))
- ((y - b) * getApprox-
Value((float)Math.cos(Math.toRadians(teta)))) + b);
vertices_circle[loop + 2] = 0;
loop += 3;
realloop=realloop+1;
// mengenerate warna untuk setiap vertex
vertices_circle_color[loop_color] =
(float) ((x - a)
* Math.cos(Math.toRadians(teta))
- ((y - b) *
Math.sin(Math.toRadians(teta))) + a);
vertices_circle_color[loop_color + 1] =
(float) ((x - a)
* Math.sin(Math.toRadians(teta))
- ((y - b) *
Math.cos(Math.toRadians(teta))) + b);
vertices_circle_color[loop_color + 2] =
0.5f;
vertices_circle_color[loop_color + 3] =
0.5f;
loop_color += 4;
teta += step;
}*/
// dengan for
for (float teta = batas_sudut_lower; teta <=
batas_sudut_upper+step; teta += step) {
vertices_circle[loop] = (float) ((x - a)
* getApprox-
Value((float)Math.cos(Math.toRadians(teta)))
- ((y - b) * getApprox-
Value((float)Math.sin(Math.toRadians(teta)))) + a);
vertices_circle[loop + 1] = (float) ((x -
a)
* getApprox-
Value((float)Math.sin(Math.toRadians(teta)))
- ((y - b) * getApprox-
Value((float)Math.cos(Math.toRadians(teta)))) + b);
vertices_circle[loop + 2] = 0;
loop += 3;
realloop=realloop+1;
// mengenerate warna untuk setiap vertex
vertices_circle_color[loop_color] =
(float) ((x - a)
258
* Math.cos(Math.toRadians(teta))
- ((y - b) *
Math.sin(Math.toRadians(teta))) + a);
vertices_circle_color[loop_color + 1] =
(float) ((x - a)
* Math.sin(Math.toRadians(teta))
- ((y - b) *
Math.cos(Math.toRadians(teta))) + b);
vertices_circle_color[loop_color + 2] =
0.5f;
vertices_circle_color[loop_color + 3] =
0.5f;
loop_color += 4;
}
// ============= end for generate vertices to
circle
// ====================
}
public float[] create_circle(float fnti-
tik_pusat_x, float fntitik_pusat_y, float
fnjari_jari, float fnbatas_sudut_lower,float
fnbatas_sudut_upper, float fnstep)
{
// Titik Pusat dan titik awal
float fna = fntitik_pusat_x;
float fnb = fntitik_pusat_y;
float fnx = fna + fnjari_jari;
float fny = fnb;
//int byk_vertices1=(int) (((ba-
tas_sudut_upper-batas_sudut_lower)+step)/ step);
//byk_vertices=(((int)
Math.floor((batas_sudut_upper-batas_sudut_lower)/
step))+1); // 4.7/0.1 = 46.9999 ??
int fnbyk_vertices=(((int)
Math.round((fnbatas_sudut_upper-fnbatas_sudut_lower)/
fnstep))+1);
int fnloop = 0;
int fnloop_color = 0;
int fnrealloop=0;
// menambah nilai +1 untuk byk_vertices untuk
menghindari pemesanan memori yang kurang
float[] fnvertices_circle = new
float[(fnbyk_vertices+1) * 3];
float[] fnvertices_circle_color = new
float[(fnbyk_vertices+1) * 4];
// dengan menggunakan while
/*float teta = batas_sudut_lower;
while(teta <= batas_sudut_upper+step){ //
+step untuk batas_sudut_upper, untuk mengatasi loop-
ing yang kurang pada while dikarenakan bug pada nilai
update tetanya karena float dan double android studio
tidak stabil
vertices_circle[loop] = (float) ((x - a)
259
* getApprox-
Value((float)Math.cos(Math.toRadians(teta)))
- ((y - b) * getApprox-
Value((float)Math.sin(Math.toRadians(teta)))) + a);
vertices_circle[loop + 1] = (float) ((x -
a)
* getApprox-
Value((float)Math.sin(Math.toRadians(teta)))
- ((y - b) * getApprox-
Value((float)Math.cos(Math.toRadians(teta)))) + b);
vertices_circle[loop + 2] = 0;
loop += 3;
realloop=realloop+1;
// mengenerate warna untuk setiap vertex
vertices_circle_color[loop_color] =
(float) ((x - a)
* Math.cos(Math.toRadians(teta))
- ((y - b) *
Math.sin(Math.toRadians(teta))) + a);
vertices_circle_color[loop_color + 1] =
(float) ((x - a)
* Math.sin(Math.toRadians(teta))
- ((y - b) *
Math.cos(Math.toRadians(teta))) + b);
vertices_circle_color[loop_color + 2] =
0.5f;
vertices_circle_color[loop_color + 3] =
0.5f;
loop_color += 4;
teta += step;
}*/
// dengan for
for (float fnteta = fnbatas_sudut_lower;
fnteta <= fnbatas_sudut_upper+fnstep; fnteta +=
fnstep) {
fnvertices_circle[fnloop] = (float) ((fnx
- fna)
* getApprox-
Value((float)Math.cos(Math.toRadians(fnteta)))
- ((fny - fnb) * getApprox-
Value((float)Math.sin(Math.toRadians(fnteta)))) +
fna);
fnvertices_circle[fnloop + 1] = (float)
((fnx - fna)
* getApprox-
Value((float)Math.sin(Math.toRadians(fnteta)))
- ((fny - fnb) * getApprox-
Value((float)Math.cos(Math.toRadians(fnteta)))) +
fnb);
fnvertices_circle[fnloop + 2] = 0;
fnloop += 3;
fnrealloop=fnrealloop+1;
}
return fnvertices_circle;
260
}
public float[] create_circle_color(float fnti-
tik_pusat_x, float fntitik_pusat_y, float
fnjari_jari, float fnbatas_sudut_lower,float
fnbatas_sudut_upper, float fnstep)
{
// Titik Pusat dan titik awal
float fna = fntitik_pusat_x;
float fnb = fntitik_pusat_y;
float fnx = fna + fnjari_jari;
float fny = fnb;
//int byk_vertices1=(int) (((ba-
tas_sudut_upper-batas_sudut_lower)+step)/ step);
//byk_vertices=(((int)
Math.floor((batas_sudut_upper-batas_sudut_lower)/
step))+1); // 4.7/0.1 = 46.9999 ??
int fnbyk_vertices=(((int)
Math.round((fnbatas_sudut_upper-fnbatas_sudut_lower)/
fnstep))+1);
//int fnloop = 0;
int fnloop_color = 0;
//int fnrealloop=0;
// menambah nilai +1 untuk byk_vertices untuk
menghindari pemesanan memori yang kurang
//float[] fnvertices_circle = new
float[(fnbyk_vertices+1) * 3];
float[] fnvertices_circle_color = new
float[(fnbyk_vertices+1) * 4];
// dengan menggunakan while
/*float teta = batas_sudut_lower;
while(teta <= batas_sudut_upper+step){ //
+step untuk batas_sudut_upper, untuk mengatasi loop-
ing yang kurang pada while dikarenakan bug pada nilai
update tetanya karena float dan double android studio
tidak stabil
vertices_circle[loop] = (float) ((x - a)
* getApprox-
Value((float)Math.cos(Math.toRadians(teta)))
- ((y - b) * getApprox-
Value((float)Math.sin(Math.toRadians(teta)))) + a);
vertices_circle[loop + 1] = (float) ((x -
a)
* getApprox-
Value((float)Math.sin(Math.toRadians(teta)))
- ((y - b) * getApprox-
Value((float)Math.cos(Math.toRadians(teta)))) + b);
vertices_circle[loop + 2] = 0;
loop += 3;
realloop=realloop+1;
// mengenerate warna untuk setiap vertex
vertices_circle_color[loop_color] =
(float) ((x - a)
* Math.cos(Math.toRadians(teta))
261
- ((y - b) *
Math.sin(Math.toRadians(teta))) + a);
vertices_circle_color[loop_color + 1] =
(float) ((x - a)
* Math.sin(Math.toRadians(teta))
- ((y - b) *
Math.cos(Math.toRadians(teta))) + b);
vertices_circle_color[loop_color + 2] =
0.5f;
vertices_circle_color[loop_color + 3] =
0.5f;
loop_color += 4;
teta += step;
}*/
// dengan for
for (float fnteta = fnbatas_sudut_lower;
fnteta <= fnbatas_sudut_upper+fnstep; fnteta +=
fnstep) {
// mengenerate warna untuk setiap vertex
fnvertices_circle_color[fnloop_color] =
(float) ((fnx - fna)
*
Math.cos(Math.toRadians(fnteta))
- ((fny - fnb) *
Math.sin(Math.toRadians(fnteta))) + fna);
fnvertices_circle_color[fnloop_color + 1]
= (float) ((fnx - fna)
*
Math.sin(Math.toRadians(fnteta))
- ((fny - fnb) *
Math.cos(Math.toRadians(fnteta))) + fnb);
fnvertices_circle_color[fnloop_color + 2]
= 0.5f;
fnvertices_circle_color[fnloop_color + 3]
= 0.5f;
fnloop_color += 4;
}
return fnvertices_circle_color;
}
public float[] create_circle_center(float fnti-
tik_pusat_x, float fntitik_pusat_y, float
fnjari_jari, float fnbatas_sudut_lower,float
fnbatas_sudut_upper, float fnstep)
{
// Titik Pusat dan titik awal
float fna = fntitik_pusat_x;
float fnb = fntitik_pusat_y;
float fnx = fna + fnjari_jari;
float fny = fnb;
//int byk_vertices1=(int) (((ba-
tas_sudut_upper-batas_sudut_lower)+step)/ step);
//byk_vertices=(((int)
262
Math.floor((batas_sudut_upper-batas_sudut_lower)/
step))+1); // 4.7/0.1 = 46.9999 ??
int fnbyk_vertices=(((int)
Math.round((fnbatas_sudut_upper-fnbatas_sudut_lower)/
fnstep))+1);
//int fnloop = 0;
int fnloop = 3; // dimulai dengan 3, karena
terdapat inisialisasi vertex awal fnvertices_circle[]
= {0.0f,0.0f,0.0f};
// yang membutuhkan 3 lokasi
// karena fnloop = 3, maka
fnbyk_vertices=fnbyk_vertices+1;
fnbyk_vertices=fnbyk_vertices+1;
//int fnloop_color = 0;
int fnrealloop=0;
float fnvertices_circle[] = {0.0f,0.0f,0.0f};
// menambah nilai +1 untuk byk_vertices untuk
menghindari pemesanan memori yang kurang
//float[] fnvertices_circle = new
float[(fnbyk_vertices+1) * 3];
fnvertices_circle = new
float[(fnbyk_vertices+1) * 3];
// dengan menggunakan while
/*float teta = batas_sudut_lower;
while(teta <= batas_sudut_upper+step){ //
+step untuk batas_sudut_upper, untuk mengatasi loop-
ing yang kurang pada while dikarenakan bug pada nilai
update tetanya karena float dan double android studio
tidak stabil
vertices_circle[loop] = (float) ((x - a)
* getApprox-
Value((float)Math.cos(Math.toRadians(teta)))
- ((y - b) * getApprox-
Value((float)Math.sin(Math.toRadians(teta)))) + a);
vertices_circle[loop + 1] = (float) ((x -
a)
* getApprox-
Value((float)Math.sin(Math.toRadians(teta)))
- ((y - b) * getApprox-
Value((float)Math.cos(Math.toRadians(teta)))) + b);
vertices_circle[loop + 2] = 0;
loop += 3;
realloop=realloop+1;
// mengenerate warna untuk setiap vertex
vertices_circle_color[loop_color] =
(float) ((x - a)
* Math.cos(Math.toRadians(teta))
- ((y - b) *
Math.sin(Math.toRadians(teta))) + a);
vertices_circle_color[loop_color + 1] =
263
(float) ((x - a)
* Math.sin(Math.toRadians(teta))
- ((y - b) *
Math.cos(Math.toRadians(teta))) + b);
vertices_circle_color[loop_color + 2] =
0.5f;
vertices_circle_color[loop_color + 3] =
0.5f;
loop_color += 4;
teta += step;
}*/
// dengan for
for (float fnteta = fnbatas_sudut_lower;
fnteta <= fnbatas_sudut_upper+fnstep; fnteta +=
fnstep) {
fnvertices_circle[fnloop] = (float) ((fnx
- fna)
* getApprox-
Value((float)Math.cos(Math.toRadians(fnteta)))
- ((fny - fnb) * getApprox-
Value((float)Math.sin(Math.toRadians(fnteta)))) +
fna);
fnvertices_circle[fnloop + 1] = (float)
((fnx - fna)
* getApprox-
Value((float)Math.sin(Math.toRadians(fnteta)))
- ((fny - fnb) * getApprox-
Value((float)Math.cos(Math.toRadians(fnteta)))) +
fnb);
fnvertices_circle[fnloop + 2] = 0;
fnloop += 3;
fnrealloop=fnrealloop+1;
}
return fnvertices_circle;
}
public float[] create_circle_color_center(float
fntitik_pusat_x, float fntitik_pusat_y, float
fnjari_jari, float fnbatas_sudut_lower,float
fnbatas_sudut_upper, float fnstep)
{
// Titik Pusat dan titik awal
float fna = fntitik_pusat_x;
float fnb = fntitik_pusat_y;
float fnx = fna + fnjari_jari;
float fny = fnb;
//int byk_vertices1=(int) (((ba-
tas_sudut_upper-batas_sudut_lower)+step)/ step);
//byk_vertices=(((int)
Math.floor((batas_sudut_upper-batas_sudut_lower)/
step))+1); // 4.7/0.1 = 46.9999 ??
int fnbyk_vertices=(((int)
Math.round((fnbatas_sudut_upper-fnbatas_sudut_lower)/
264
fnstep))+1);
int fnloop_color = 4; // dimulai dengan 4,
karena terdapat inisialisasi color awal fnverti-
ces_circle_color[] = {0.0f,0.0f,0.0f,0.0f};
// yang membutuhkan 4 lokasi, dengan warna
dibuat transparan (alpha=0.0f)
// karena fnloop_color = 4, maka
fnbyk_vertices=fnbyk_vertices+1;
fnbyk_vertices=fnbyk_vertices+1;
float fnvertices_circle_color[] =
{0.0f,0.0f,0.0f,0.0f};
// menambah nilai +1 untuk byk_vertices untuk
menghindari pemesanan memori yang kurang
//float[] fnvertices_circle_color = new
float[(fnbyk_vertices+1) * 4];
fnvertices_circle_color = new
float[(fnbyk_vertices+1) * 4];
// dengan menggunakan while
/*float teta = batas_sudut_lower;
while(teta <= batas_sudut_upper+step){ //
+step untuk batas_sudut_upper, untuk mengatasi loop-
ing yang kurang pada while dikarenakan bug pada nilai
update tetanya karena float dan double android studio
tidak stabil
vertices_circle[loop] = (float) ((x - a)
* getApprox-
Value((float)Math.cos(Math.toRadians(teta)))
- ((y - b) * getApprox-
Value((float)Math.sin(Math.toRadians(teta)))) + a);
vertices_circle[loop + 1] = (float) ((x -
a)
* getApprox-
Value((float)Math.sin(Math.toRadians(teta)))
- ((y - b) * getApprox-
Value((float)Math.cos(Math.toRadians(teta)))) + b);
vertices_circle[loop + 2] = 0;
loop += 3;
realloop=realloop+1;
// mengenerate warna untuk setiap vertex
vertices_circle_color[loop_color] =
(float) ((x - a)
* Math.cos(Math.toRadians(teta))
- ((y - b) *
Math.sin(Math.toRadians(teta))) + a);
vertices_circle_color[loop_color + 1] =
(float) ((x - a)
* Math.sin(Math.toRadians(teta))
- ((y - b) *
Math.cos(Math.toRadians(teta))) + b);
vertices_circle_color[loop_color + 2] =
0.5f;
265
vertices_circle_color[loop_color + 3] =
0.5f;
loop_color += 4;
teta += step;
}*/
// dengan for
for (float fnteta = fnbatas_sudut_lower;
fnteta <= fnbatas_sudut_upper+fnstep; fnteta +=
fnstep) {
// mengenerate warna untuk setiap vertex
fnvertices_circle_color[fnloop_color] =
(float) ((fnx - fna)
*
Math.cos(Math.toRadians(fnteta))
- ((fny - fnb) *
Math.sin(Math.toRadians(fnteta))) + fna);
fnvertices_circle_color[fnloop_color + 1]
= (float) ((fnx - fna)
*
Math.sin(Math.toRadians(fnteta))
- ((fny - fnb) *
Math.cos(Math.toRadians(fnteta))) + fnb);
fnvertices_circle_color[fnloop_color + 2]
= 0.5f;
fnvertices_circle_color[fnloop_color + 3]
= 0.5f;
fnloop_color += 4;
}
return fnvertices_circle_color;
}
// Point to our vertex buffer, return buffer
holding the vertices
public static FloatBuffer makeFloatBuffer(float[]
arr) {
ByteBuffer bb = ByteBuff-
er.allocateDirect(arr.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
fb.position(0);
return fb;
}
/** The draw method for the primitive object with
the GL context */
public void draw_circle_fraction(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the colour for the object circle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
// create VBO from buffer with glBufferData()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_circle));
266
// draw circle contours
gl.glDrawArrays(GL10.GL_LINES, 0,
byk_vertices);
/*Log.v("value loop", "" + loop);
Log.v("value realloop", "" + realloop);
Log.v("value loop/3", "" + loop / 3);
Log.v("value loop/3", "" + (int) (loop / 3));
Log.v("value byk_vertices1", "" +
byk_vertices1);
Log.v("value byk_vertices", "" +
byk_vertices);*/
//Log.v("value vertices_circle.length", "" +
vertices_circle.length);
//Log.v("value batas_sudut / step", "" +
(int) Math.ceil(batas_sudut_upper /step));
//Log.v("value byk_vertices dgn Ceil", "" +
(int) Math.ceil((((batas_sudut_upper-
batas_sudut_lower)+step)/ step)));
/*Log.v("value byk_vertices dgn Floor", "" +
(((int) Math.floor((batas_sudut_upper-
batas_sudut_lower)/ step))+1) );
Log.v("value batas_sudut_upper-
batas_sudut_lower", "" + (batas_sudut_upper-
batas_sudut_lower));
Log.v("value batas_sudut_upper-
batas_sudut_lower/ step", "" + (batas_sudut_upper-
batas_sudut_lower)/ step);
Log.v("value batas_sudut_upper-
batas_sudut_lower/ step ceil ", "" +
Math.ceil((batas_sudut_upper-
batas_sudut_lower)/step));
Log.v("value batas_sudut_upper-
batas_sudut_lower/ step floor", "" +
Math.ceil((batas_sudut_upper-
batas_sudut_lower)/step));
Log.v("value batas_sudut_upper-
batas_sudut_lower/ step round", "" +
Math.round((batas_sudut_upper-
batas_sudut_lower)/step));*/
/*if(0.9f<=1.0f){
//Log.v("value 0.9f<=1.0f", "" + "True");
}else{
//Log.v("value 0.9f<=1.0f", "" +
"False");
}
float aa=0.1f;
float bb=1.0f;
float cc=0.1f;
while(aa<=bb+cc){
Log.v("value "+aa+"<="+ bb +"", "" + aa);
aa=aa+cc;
Log.v("value -----------"+aa+"<="+ bb
+"", "" + aa);
267
}
Log.v("value 0.6f+0.1f", "" + (0.6f+0.1f));
Log.v("value 0.6+0.1", "" + (0.6+0.1));*/
/*Log.v("value round 9.0", "" +
Math.round(9.0f));
Log.v("value round 9.1", "" +
Math.round(9.1f));
Log.v("value round 9.2", "" +
Math.round(9.2f));
Log.v("value round 9.3", "" +
Math.round(9.3f));
Log.v("value round 9.4", "" +
Math.round(9.4f));
Log.v("value round 9.5", "" +
Math.round(9.5f));
Log.v("value round 9.6", "" +
Math.round(9.6f));
Log.v("value round 9.7", "" +
Math.round(9.7f));
Log.v("value round 9.8", "" +
Math.round(9.8f));
Log.v("value round 9.9", "" +
Math.round(9.9f));*/
/*Log.v("value step", "" + step);*/
//Log.v("value (int) (batas_sudut / step) *
3", "" + (int) (batas_sudut_upper / step) * 3);
/*Log.v("value ceil 2.5 ", "" +
Math.ceil(2.5));
Log.v("value int ceil 2.5 ", "" + (int)
Math.ceil(2.5));
Log.v("value floor ", "" + Math.floor(2.5));
Log.v("value int ", "" + (int) (2.5));
Log.v("value ceil 5.0 ", "" +
Math.ceil(5.0));
Log.v("value int ceil 2.5 ", "" + (int)
Math.ceil(5.0));
Log.v("value floor ", "" + Math.floor(5.0));
Log.v("value int ", "" + (int) (5.0));*/
// Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void
draw_circle_fraction_one_color_with_nofill_function(G
L10 gl, float sudut_min, float sudut_max) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the colour edge for the object circle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
// create VBO from buffer with glBufferData()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(create_circle(0.0f,
0.0f, 1.0f,sudut_min,sudut_max, 3.0f)));
268
// draw circle as filled shape
gl.glDrawArrays(GL10.GL_LINES,
0,(int)(create_circle(0.0f, 0.0f, 1.0f,
sudut_min,sudut_max, 3.0f).length/3)-1);
// Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void draw_circle_one_color(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the colour for the object circle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
// create VBO from buffer with glBufferData()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_circle));
// draw circle contours
gl.glDrawArrays(GL10.GL_LINE_STRIP, 0,
byk_vertices);
// Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void
draw_circle_one_color_with_nofill_function(GL10 gl,
float sudut_min, float sudut_max) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the colour edge for the object circle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
// create VBO from buffer with glBufferData()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(create_circle(0.0f,
0.0f, 1.0f,sudut_min,sudut_max, 0.1f)));
// draw circle as filled shape
gl.glDrawArrays(GL10.GL_LINE_STRIP,
0,(int)(create_circle(0.0f, 0.0f, 1.0f,
sudut_min,sudut_max, 0.1f).length/3)-1);
// Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void draw_circle_color(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour edge for the object circle
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
269
// create VBO from buffer with glBufferData()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_circle));
// memetakan warna untuk setiap vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(vertices_circle_color));
// draw circle as filled shape
gl.glDrawArrays(GL10.GL_LINE_STRIP,
0,byk_vertices);
// Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void
draw_circle_color_with_nofill_function(GL10 gl, float
sudut_min, float sudut_max) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// create VBO from buffer with glBufferData()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(create_circle(0.0f,
0.0f, 1.0f,sudut_min,sudut_max, 0.1f)));
// memetakan warna untuk setiap vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(create_circle_color(0.0f, 0.0f, 1.0f,
sudut_min,sudut_max, 0.1f)));
// draw circle as filled shape
gl.glDrawArrays(GL10.GL_LINE_STRIP,
0,(int)(create_circle(0.0f, 0.0f, 1.0f,
sudut_min,sudut_max, 0.1f).length/3)-1);
// Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_circle_dinamic_color_fill(GL10
gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour edge for the object circle
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// create VBO from buffer with glBufferData()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_circle));
270
// memetakan warna untuk setiap vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(vertices_circle_color));
// draw circle as filled shape
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN,
0,byk_vertices);
// Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void
draw_circle_color_with_fill_function(GL10 gl, float
sudut_min, float sudut_max) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// create VBO from buffer with glBufferData()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(create_circle(0.0f,
0.0f, 1.0f,sudut_min,sudut_max, 0.1f)));
// memetakan warna untuk setiap vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(create_circle_color(0.0f, 0.0f, 1.0f,
sudut_min,sudut_max, 0.1f)));
// draw circle as filled shape
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN,
0,(int)(create_circle(0.0f, 0.0f, 1.0f,
sudut_min,sudut_max, 0.1f).length/3)-1);
// Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void
draw_circle_color_with_fill_function_center(GL10 gl,
float sudut_min, float sudut_max) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// create VBO from buffer with glBufferData()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuff-
er(create_circle_center(0.0f, 0.0f,
1.0f,sudut_min,sudut_max, 0.1f)));
// memetakan warna untuk setiap vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuff-
271
er(create_circle_color_center(0.0f, 0.0f, 1.0f,
sudut_min,sudut_max, 0.1f)));
// draw circle as filled shape
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN,
0,(int)(create_circle_center(0.0f, 0.0f, 1.0f,
sudut_min,sudut_max, 0.1f).length/3)-1);
// Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
}
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/androi
d"
package="com.example.imacho.createcircle" >
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" an-
droid:screenOrientation="landscape"
an-
droid:configChanges="orientation|screenSize" >
<intent-filter>
<action an-
droid:name="android.intent.action.MAIN" />
<category an-
droid:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
272
Source Code 2.10 Code Lain Membuat Lingkaran Sederhana
GlRenderer.java
package com.example.opengl_introduction;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
import android.opengl.GLU;
import android.opengl.GLSurfaceView.Renderer;
public class GlRenderer implements Renderer {
private Object object; // the triangle to be
drawn
/** Constructor to set the handed over context */
public GlRenderer() {
this.object = new Object();
}
@Override
public void onDrawFrame(GL10 gl) {
// clear Screen and Depth Buffer
gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
// set background dgn warna putih
gl.glClear(GL10.GL_COLOR_BUFFER_BIT |
GL10.GL_DEPTH_BUFFER_BIT);
gl.glPushMatrix();
gl.glEnable(GL10.GL_LINE_SMOOTH);
gl.glTranslatef(0.0f, 0.0f, -
5.0f);
object.draw_circle(gl);
gl.glPopMatrix();
gl.glPushMatrix();
gl.glTranslatef(0.0f, 0.0f, -
5.0f);
}
@Override
public void onSurfaceChanged(GL10 gl, int width,
int height) {
if(height == 0) {
//Prevent A Divide By Zero By
height = 1;
//Making Height Equal One
}
gl.glViewport(0, 0, width, height);
//Reset The Current Viewport
gl.glMatrixMode(GL10.GL_PROJECTION);
//Select The Projection Matrix
273
gl.glLoadIdentity();
//Reset The Projection Matrix
//Calculate The Aspect Ratio Of The Win-
dow
GLU.gluPerspective(gl, 45.0f,
(float)width / (float)height, 0.1f, 100.0f);
gl.glMatrixMode(GL10.GL_MODELVIEW);
//Select The Modelview Matrix
gl.glLoadIdentity();
//Reset The Modelview Matrix
/*gl.glViewport(0, 0, width, height);
gl.glMatrixMode(GL10.GL_PROJECTION);
gl.glLoadIdentity();
GLU.gluOrtho2D(gl, -1.0f, 1.0f, -1.0f, 1.0f);
gl.glMatrixMode(GL10.GL_MODELVIEW);
gl.glLoadIdentity();*/
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig
config) {
object = new Object();
}
}
MainActivity.java
package com.example.opengl_introduction;
import android.app.Activity;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
public class MainActivity extends Activity {
/** The OpenGL view */
private GLSurfaceView glSurfaceView;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// requesting to turn the title OFF
requestWindowFea-
ture(Window.FEATURE_NO_TITLE);
// making it full screen
274
getWin-
dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSC
REEN,
WindowManag-
er.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and
// create an instance with this activity
glSurfaceView = new GLSurfaceView(this);
// set our renderer to be the main renderer
with
// the current activity context
glSurfaceView.setRenderer(new GlRenderer());
setContentView(glSurfaceView);
}
/**
* Remember to resume the glSurface
*/
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
/**
* Also pause the glSurface
*/
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
}
Object.java
package com.example.opengl_introduction;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.opengles.GL10;
import android.opengl.GLES20;
public class Object {
private FloatBuffer vertexBuff-
er,vertexBuffer3,vertexBuffer4; // buffer holding
the vertices
private float vertices3[] = new float[20 * 3];
private float vertices[] = {
275
-0.5f, -0.5f, 0.0f, //
V1 - first vertex (x,y,z)
-0.5f, 0.5f, 0.0f, //
V1 - first vertex (x,y,z)
0.5f, 0.5f, 0.0f, //
V1 - first vertex (x,y,z)
0.5f, -0.5f, 0.0f, //
V2 - second vertex
-0.5f, -0.5f, 0.0f //
V1 - first vertex (x,y,z)
};
private float v_segitiga[] = {
1.0f,0.0f,0.0f, // titik ke-1
0.0f,1.0f,0.0f, // titik ke-2
-1.0f,0.0f,0.0f, // titik ke-3
};
private float vertices_color[] = {
1.0f, 0.0f, 0.0f, 1.0f,
// V1 - first vertex (x,y,z)
0.0f, 1.0f, 0.0f, 1.0f,
// V1 - first vertex (x,y,z)
0.0f, 0.0f, 1.0f, 1.0f,
// V1 - first vertex (x,y,z)
0.0f, 1.0f, 0.0f, 1.0f,
// V2 - second vertex
1.0f, 0.0f, 0.0f, 1.0f
// V1 - first vertex (x,y,z)
};
float in_i;
int x1 = -5, y1 = -5 ;
int x2= 5, y2 = 5 ;
int outerVertexCount;
private float vertices_circle[]={0.0f,0.0f,0.0f};
private int points=360;
float step=0.1f;
private int loop;
public Object() {
//initial;
float jari_jari=1.0f;
// Titik Pusat
float a = 0.0f, b = 0.0f ;
float x=a+jari_jari, y=b;
loop=3;
//step=3;
vertices_circle=new
float[(int)(3*points/step)*3];
for(float teta=0;teta<=2*points;teta+=step){
vertices_circle[loop] = (float)
((x-a)*Math.cos((teta/180)*(22/7)) - ((y-
b)*Math.sin((teta/180)*(22/7))) + a);
vertices_circle[loop+1] = (float)
276
((x-a)*Math.sin((teta/180)*(22/7)) - ((y-
b)*Math.cos((teta/180)*(22/7))) + b);
vertices_circle[loop+2]=0;
loop+=3;
}
}
public static FloatBuffer makeFloatBuffer(float[]
arr){
ByteBuffer bb = ByteBuff-
er.allocateDirect(arr.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
fb.position(0);
return fb;
}
/** The draw method for the primitive object with
the GL context */
public void draw_line(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the line (pemberian
warna untuk garis)
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer (mendata
nilai lokasi/posisi titik yang menyusun garis)
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float [] {
1.0f, 1.0f, 0.0f,
// V1 - first vertex (x,y,z)
-1.0f, -1.0f, 0.0f, //
V2 - second vertex
}));
// Draw the vertices as lines (menggambar
garis dari titik-titik)
gl.glDrawArrays(GL10.GL_LINES, 0, 2);
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_circle(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the colour for the triangle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
277
//create VBO from buffer with glBuffer-
Data()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_circle));
//draw circle contours
gl.glDrawArrays(GL10.GL_LINE_STRIP, 1, (int)
((int) 2*points/step));
//gl.glDrawArrays(GL10.GL_POINTS, 1, (int)
((int) 2*points/step));
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glPopMatrix();
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void draw_triangle(GL10 gl){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
//warna untuk triangle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
// memanggil lokasi titik x, y, z yang
sdh diset
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(v_segitiga));
// drawing
gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3);
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}
public void draw_segitiga(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the triangle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float [] {
-0.5f, -0.5f, 0.0f, //
V1 - first vertex (x,y,z)
0.5f, -0.5f, 0.0f, //
V2 - second vertex
0.0f, 0.5f, 0.0f
278
// V3 - third vertex
}));
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_color));
// Draw the vertices as square
gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3);
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
}
Gambar 2.19 Membuat Lingkaran Sederhana
279
2.7 Membuat Polar Object
Koordinat Kartesius digunakan untuk menentukan tiap titik dalam bidang dengan menggunakan dua bilangan yang biasa disebut koordinat x dan koordinat y dari titik tersebut. Sedangkan koordinat polar adalah koordinat dua dimensi yang menggunakan aturan arah perpindahan dan besar sudut atau jarak dan sudut titik yang dituju.
Gambar 2.20 Sistem Koordinat Polar (r, Ө)
Source Code 2.11 Code Membuat Polar Object
ESRender.java
package com.example.primitives_project_es;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
//import android.opengl.GLU;
import android.opengl.GLSurfaceView.Renderer;
import android.opengl.GLU;
public class ESRender implements Renderer {
private PrimitivesObject primitivesobject; //
the primitive object to be drawn
private PrimitivesPolarObject primitivespolar-
object;
float sudut=0.0f;
float step_sudut=0.0f;
/** Constructor to set the handed over context */
P(x,y)=P(r cos Ө, r sin Ө)
r
y = r sin Ө
x = r cos Ө
Ө
280
public ESRender() {
this.primitivesobject = new Primi-
tivesObject();
this.primitivespolarobject = new Primi-
tivesPolarObject();
}
@Override
public void onDrawFrame(GL10 gl) {
// clear Screen and Depth Buffer
gl.glClearColor(1.0f, 1.0f, 1.0f,
1.0f); // set background dgn warna putih
//gl.glClearColor(0.0f, 0.0f,
0.0f, 1.0f); // set background dgn warna hitam
gl.glClear(GL10.GL_COLOR_BUFFER_BIT |
GL10.GL_DEPTH_BUFFER_BIT);
// Reset the Modelview Matrix
gl.glLoadIdentity();
// menampilkan limacon atau object polar
lainnya
gl.glPushMatrix();
gl.glEnable(GL10.GL_POINT_SMOOTH);
gl.glTranslatef(0.0f, 0.0f, -
5.0f);
gl.glLineWidth(0.15f);
//gl.glScalef(0.15f,0.15f, 0.15f);
//gl.glScalef(50.0f,50.0f, 50.0f);
gl.glLineWidth(0.3f);
primitivespolar-
object.draw_limacon(gl);
gl.glPopMatrix();
}
@Override
public void onSurfaceChanged(GL10 gl, int width,
int height) {
if (height == 0)
height = 1; // To prevent divide
by zero
float aspect = (float) width / height;
// Set the viewport (display area) to
cover the entire window
gl.glViewport(0, 0, width, height);
// Setup perspective projection, with as-
pect ratio matches viewport
gl.glMatrixMode(GL10.GL_PROJECTION); //
Select projection matrix
gl.glLoadIdentity(); // Reset projection
matrix
// Use perspective projection
GLU.gluPerspective(gl, 45, aspect, 0.1f,
100.f);
gl.glMatrixMode(GL10.GL_MODELVIEW); //
Select model-view matrix
281
gl.glLoadIdentity(); // Reset
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig
config) {
//primitivesobject = new Primi-
tivesObject();
primitivesobject = new Primi-
tivesObject();
primitivespolarobject = new PrimitivesPo-
larObject();
}
}
MainActivity.java
package com.example.primitives_project_es;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;
public class MainActivity extends Activity {
/** The OpenGL view */
private GLSurfaceView glSurfaceView;
@Override
protected void onCreate(Bundle savedInstanceS-
tate) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
// requesting to turn the title OFF
requestWindowFea-
ture(Window.FEATURE_NO_TITLE);
// making it full screen
getWin-
dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSC
REEN,
WindowManag-
er.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and
// create an instance with this activity
glSurfaceView = new GLSurfaceView(this);
// set our renderer to be the main renderer
with
282
// the current activity context
glSurfaceView.setRenderer(new ESRender());
setContentView(glSurfaceView);
}
/**
* Remember to resume the glSurface
*/
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
/**
* Also pause the glSurface
*/
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to
the action bar if it is present.
getMenuInflater().inflate(R.menu.main,
menu);
return true;
}
}
PrimitivesPolarObject.java
package com.example.primitives_project_es;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.opengles.GL10;
import android.opengl.GLES20;
public class PrimitivesPolarObject {
private float verti-
ces_limacon[]={0.0f,0.0f,0.0f};
private float verti-
ces_limacon_color[]={0.0f,0.0f,0.0f,0.5f};
private int batas_sudut=360;
float step=1.0f;
private int loop,loop_color;
public PrimitivesPolarObject() {
283
//Inisialisasi
//Menggambar persamaan koordinat polar,
misal r=b+acos(sudut)
float a = 1;
float b = 1;
loop=3;
loop_color=4;
vertices_limacon=new
float[(int)(11*batas_sudut/step)*3];
vertices_limacon_color=new
float[(int)(11*batas_sudut/step)*4];
for(float
teta=0;teta<=10*batas_sudut;teta+=step){
float radian=(float) ((teta/180)*3.14);
//float _r=(float)
(b+(a*Math.cos(radian)));
float _r=(float)
(Math.cos((7*radian)/4));
//float _r=(float)
(2+7*Math.sin(3*radian));
//float _r=(float)
((2+7*Math.sin(3*radian))*Math.cos(5*radian));
//float _r=(a*exp(b*radian));
//float _r=10*(a+(b*radian));
vertices_limacon[loop] = (float)
(_r*Math.cos(radian));
vertices_limacon[loop+1] = (float)
(_r*Math.sin(radian));
vertices_limacon[loop+2]=0;
loop+=3;
//mengenerate warna untuk setiap vertex
verti-
ces_limacon_color[loop_color]=(float)
(_r*Math.cos(radian));
verti-
ces_limacon_color[loop_color+1]=(float)
(_r*Math.sin(radian));
verti-
ces_limacon_color[loop_color+2]=0.5f;
verti-
ces_limacon_color[loop_color+3]=0.1f;
loop_color+=4;
}
}
// Point to our vertex buffer, return buffer
holding the vertices
public static FloatBuffer makeFloatBuffer(float[]
arr){
ByteBuffer bb = ByteBuff-
er.allocateDirect(arr.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
284
fb.position(0);
return fb;
}
/** The draw method for the primitive object with
the GL context */
public void draw_limacon(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the triangle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
//create VBO from buffer with glBuffer-
Data()
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_limacon));
//memetakan warna untuk setiap vertex
gl.glColorPointer(4, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_limacon_color));
//draw circle as filled shape
//gl.glDrawArrays(GLES20.GL_TRIANGLE_FAN, 1,
(int) ((int) 10*batas_sudut/step));
//draw circle contours
//gl.glDrawArrays(GL10.GL_LINES, 1, (int)
((int) 2*batas_sudut/step)); // membuat garis putus-
putus pada tepi lingkaran
gl.glDrawArrays(GLES20.GL_LINE_STRIP, 1,
(int) ((int) 10*batas_sudut/step));
//gl.glDrawArrays(GLES20.GL_POINTS, 1, (int)
((int) 10*batas_sudut/step));
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
}
285
Gambar 2.21 Membuat Polar Object
286
BAB 3 Transformations
3.1 Pengertian Transformasi
Transformasi adalah memindahkan objek tanpa merusak ben-tuk aslinya, meskipun ada perubahan bentuk atau modifikasi pada hasil akhirnya.
Tujuan transformasi:
1. Melihat objek dari sudut pandang yang berbeda. 2. Membuat komposisi pemandangan yang sesuai. 3. Memudahkan membuat objek yang simetris. 4. Memindahkan satu atau beberapa objek dari satu tempat ke
tempat lain, ini biasa dipakai untuk animasi komputer.
Jenis-jenis transformasi:
1. Modeling 2. Viewing 3. Projection 4. Viewport 5. Modelview
3.2 Matematika & Proses Transformasi
Transformasi dalam OpenGL dilakukan dengan menggunakan konsep matriks.
Gambar 3.1 Vertex Transformation Pipeline
Matrix modes:
- ModelView Matrix (GL_MODELVIEW) Untuk traslasi, rotasi, dan scaling.
- Projection Matrix (GL_PROJECTION) Untuk setup camera projection
287
Transformasi dapat dilakukan dengan dua operasi, yaitu operasi matrik, dan operasi vektor.
1.Operasi matrik a.Penambahan dan pengurangan b.Perkalian c.Determinan d.Transpos e.Kebalikan (inverse)
2.Operasi vector a.Penambahan dan pengurangan b.Pekalian titik (dot product) c.Perkalian silang (cross product)
Dalam transformasi dasar yang akan dibahas meliputi translasi, scal-ing, rotasi, dan shearing.
1. Translasi Translasi berarti memindahkan objek sepanjang garis lurus dari
suatu lokasi koordinat tertentu kelokasi yang lain tanpa mengubah bentuk objek. Bila suatu objek terbentuk daribeberapa titik maka bila melakukan translasi akan dikenakan terhadap setiap titikpembentuk objek tersebut.
Untuk melakukan translasi dapat menggunakan rumus:
x’ = x + tx y’ = y + ty
Gambar 3.2 Contoh Proses Translasi
2. Scaling Scaling digunakan untuk mengubah ukuran suatu objek, bila
pada translasi operasi yangdigunakan adalah penjumlahan sedangkan pada skala operasi yang digunakan adalah perkalian.
Untuk melakukan skala dapat menggunakan rumus: x’= x * tx y’ = y * ty tx dan ty merupakan nilai dari scaling factor terhadap sumbu x
dan sumbu y.
288
Gambar 3.3 Contoh Proses Scaling
1. Rotasi Rotasi merupakan pemutaran terhadap suatu objek, rotasi dapat dinyatakan dalam bentuk matriks. Nilai matriks untuk melakukan rotasi adalah rotasi suatu titik terhadap pivot point (xp, yp) menggunakan bentuk trigonometri.
Gambar 3.4 Contoh Proses Rotasi
2. Shearing Shearing yaitu transformasi yang mengubah sisi objek.
Gambar 3.5 Contoh Proses Shearing
289
3. Kombinasi (Translasi + Skala + Rotasi + Shearing)
Gambar 3.6 Contoh Proses Kombinasi Transformasi
Syntax transformasi:
1. glTranslate(T x, T y, T z) - Memindahkan titik/ objek dalam arah x, y, dan z. - Nilai x, y, dan z ditambah atau dikurangi dengan nilai ter-
tentu. - Jika titik A ditranslasikan ke B dengan matriks translasi K,
maka persamaannya adalah A = KB. 2. glScale(T x, T y, T z)
- Nilai x, y, dan z dikalikan dengan bilangan scalar. 3. glRotate(T angle, T x, T y, T z)
- T angle (dinyatakan dalam derajat) dengan arah berla-wanan dengan jarum jam (counterclockwise).
- Nilai koordinat x, y, dan z diputar ke sekeliling titik refer-ensi.
290
3.3 Urutan Transformasi
Hasil transformasi dikatakan benar jika dilakukan sesuai dengan kondisi yang tepat.
Contoh:
Jika (Px,Py) = (4,6) dilakukan Translasi (6,-3), Rotasi(60˚), dan Skala (0.5,2) Cara 1 : Step by Step
1
4.20
2.1
1
2.10
4.2
100
020
005.0
1100
00
00
1
1
2.10
4.2
1
5.17.8
6.25
1
3
10
100
05.087.0
087.05.0
1100
060cos60sin
060sin60cos
1
1
3
10
1
6
4
100
310
601
1100
10
01
1
Py
Px
sPx
sPx
Qy
Qx
Py
Px
Qy
Qx
Py
Px
dPy
dPx
Qy
Qx
Jadi (Qx, Qy) akhir = (1.2, 20.4, 1)
Cara 2 : Transformasi berturut-turut dapat dilakukan dengan men-galikan matriks-matriks transformasi sesuai dengan urutan terbalik
1
4.20
2.1
1
6
4
100
310
601
100
060cos60sin
060sin60cos
100
020
005.0
1
Qy
Qx
Jadi (Qx, Qy) akhir = (1.2, 20.4, 1)
3.4 Membuat Kincir Angin
Source Code 3.1 Code Membuat Kincir Angin
ESSurfaceFungsi.java
package com.example.project_c;
import android.content.Context;
import android.opengl.GLSurfaceView;
import android.util.Log;
import android.view.MotionEvent;
public class ESSurfaceFungsi extends GLSurfaceView{
291
private final GlRenderer glRenderer;
public ESSurfaceFungsi(Context context) {
super(context);
// TODO Auto-generated constructor stub
glRenderer = new GlRenderer();
setRenderer(glRenderer);
}
public boolean onTouchEvent(MotionEvent v){
switch (v.getAction()) {
case MotionEvent.ACTION_DOWN:
Log.v("Test Action Down", "action down working");
Log.i("Test Action Nilai",
""+Math.abs(glRenderer.getRunMode()-1));
glRender-
er.setRunMode(Math.abs(glRenderer.getRunMode()-1));
requestRender();
}
return true;
}
}
GlRenderer.java
package com.example.project_c;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
import com.example.project_c.Object;
import android.opengl.GLU;
import android.opengl.GLSurfaceView.Renderer;
public class GlRenderer implements Renderer {
private Object object; // the triangle to be drawn
int RunMode=1;
// Angle in degrees
float CurrentAngle = 0.0f;
// Rotation step per update
float AnimateStep = 1.0f;
float sudut = 0.0f;
float step_sudut = 2.0f;
float back_sudut = -4.0f;
/** Constructor to set the handed over context */
public GlRenderer() {
this.object = new Object();
}
@Override
public void onDrawFrame(GL10 gl) {
// clear Screen and Depth Buffer
292
gl.glClear(GL10.GL_COLOR_BUFFER_BIT |
GL10.GL_DEPTH_BUFFER_BIT);
// menampilkan segitiga sama kaki paling bawah
gl.glLoadIdentity();
gl.glPushMatrix();
gl.glTranslatef(0.0f, 0.0f, 0.0f);
// move y+1
gl.glTranslatef(0.0f, -1.0f, 0.0f);
gl.glTranslatef(0.0f, 0.0f, -7.0f);
object.draw_segitigasamakaki(gl);
gl.glPopMatrix();
// menampilkan persegi dengan gradasi warna
gl.glPushMatrix();
gl.glTranslatef(0.0f, 0.0f, -5.0f);
gl.glRotatef(-CurrentAngle, 0.0f, 0.0f, 1.0f);
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
object.draw_kotak(gl);
gl.glPopMatrix();
// menampilkan persegi dengan gradasi warna pindah
gl.glPushMatrix();
gl.glTranslatef(0.0f, 0.0f, -5.0f);
gl.glRotatef(-CurrentAngle, 0.0f, 0.0f, 1.0f);
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
gl.glRotatef(90, 0.0f, 0.0f, 1.0f);
object.draw_kotak(gl);
gl.glPopMatrix();
if (RunMode==1) {
// re-Calculate animation parameters
CurrentAngle += AnimateStep;
if (CurrentAngle > 360.0) {
CurrentAngle=0.0f;
CurrentAngle += AnimateStep;
}
}
if (RunMode==1) {
// re-Calculate animation parameters
CurrentAngle += AnimateStep;
if (CurrentAngle > 360.0) {
CurrentAngle=0.0f;
CurrentAngle += AnimateStep;
}
}
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int
height) {
//Prevent A Divide By Zero By
if(height == 0) {
//Making Height Equal One
height = 1;
}
293
//Reset The Current Viewport
gl.glViewport(0, 0, width, height);
//Select The Projection Matrix
gl.glMatrixMode(GL10.GL_PROJECTION);
//Reset The Projection Matrix
gl.glLoadIdentity();
//Calculate The Aspect Ratio Of The Win-
dow
GLU.gluPerspective(gl, 45.0f,
(float)width / (float)height, 0.1f, 100.0f);
gl.glMatrixMode(GL10.GL_MODELVIEW);
//Select The Modelview Matrix
gl.glLoadIdentity();
//Reset The Modelview Matrix
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig
config) {
object = new Object();
gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
// Enable Smooth Shading, default not re-
ally needed.
gl.glShadeModel(GL10.GL_SMOOTH);
// Depth buffer setup.
gl.glClearDepthf(1.0f);
// Enables depth testing.
gl.glEnable(GL10.GL_DEPTH_TEST);
// The type of depth testing to do.
gl.glDepthFunc(GL10.GL_LEQUAL);
// Really nice perspective calculations.
gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT,
GL10.GL_NICEST);
}
public int getRunMode() {
return RunMode;
}
public void setRunMode(int mRunMode) {
RunMode = mRunMode;
}
}
294
MainActivity.java
package com.example.project_c;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;
public class MainActivity extends Activity {
private GLSurfaceView glSurfaceView;
/** Called when the activity is first created. */
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// requesting to turn the title OFF
requestWindowFeature(Window.FEATURE_NO_TITLE);
// making it full screen
getWin-
dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREE
N,
WindowManag-
er.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and
// create an instance with this activity
glSurfaceView = new ESSurfaceFungsi(this);
// set our renderer to be the main renderer with
// the current activity context
//glSurfaceView.setRenderer(new GlRenderer());
setContentView(glSurfaceView);
}
/**
* Remember to resume the glSurface
*/
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
/**
* Also pause the glSurface
*/
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to
295
the action bar if it is present.
getMenuInflater().inflate(R.menu.main,
menu);
return true;
}
}
Object.java
package com.example.project_c;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.opengles.GL10;
import android.opengl.GLES20;
public class Object {
private FloatBuffer vertexBuff-
er,vertexBuffer3,vertexBuffer4; // buffer holding
the vertices
private float vertices3[] = new float[20 * 3];
private float vertices[] = {
-0.8f, -0.1f, 0.0f, //
V1 - first vertex (x,y,z)
-0.8f, 0.1f, 0.0f, //
V1 - first vertex (x,y,z)
0.8f, 0.1f, 0.0f, //
V1 - first vertex (x,y,z)
0.8f, -0.1f, 0.0f, //
V2 - second vertex
-0.8f, -0.1f, 0.0f //
V1 - first vertex (x,y,z)
};
private float vertices_color[] = {
1.0f, 0.0f, 0.0f, 1.0f, //
CV1 - first color (red,green,blue)
0.0f, 1.0f, 0.0f, 1.0f, //
CV2
0.0f, 0.0f, 1.0f, 1.0f, //
CV3
0.0f, 1.0f, 0.0f, 1.0f, //
CV4
1.0f, 0.0f, 0.0f, 1.0f
// V1 - first vertex (x,y,z)
};
private float vertices_color1[] = {
1.0f, 0.0f, 0.0f, 1.0f, //
296
CV1 - first color (red,green,blue)
0.0f, 1.0f, 0.0f, 1.0f, //
CV2
0.0f, 0.0f, 1.0f, 1.0f, //
CV3
0.0f, 1.0f, 0.0f, 1.0f, //
CV4
1.0f, 0.0f, 0.0f, 1.0f
// V1 - first vertex (x,y,z)
};
public static FloatBuffer makeFloatBuffer(float[]
arr){
ByteBuffer bb = ByteBuff-
er.allocateDirect(arr.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
fb.position(0);
return fb;
}
/** The draw method for the primitive object with
the GL context */
public void draw_line(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
//gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the line (pemberian
warna untuk garis)
gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Point to our vertex buffer (mendata
nilai lokasi/posisi titik yang menyusun garis)
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float [] {
0.5f, 0.5f, 0.0f,
// V1 - first vertex (x,y,z)
-0.5f, -0.5f, 0.0f, //
V2 - second vertex
}));
// Draw the vertices as lines (menggambar
garis dari titik-titik)
gl.glDrawArrays(GL10.GL_LINES, 0, 2);
/*gl.glDrawElements(GL10.GL_LINES, 2,
GL10.GL_UNSIGNED_SHORT, makeFloatBuffer(new
float [] {
1.0f, 1.0f, 0.0f,
// V1 - first vertex (x,y,z)
-1.0f, -1.0f, 0.0f, //
V2 - second vertex
}));*/
297
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
//gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_kotak(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
//gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
gl.glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
// Point to our vertex buffer
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices));
// Draw the vertices as square
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_color));
gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3);
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_color));
gl.glDrawArrays(GL10.GL_TRIANGLES, 2, 3);
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_segitiga(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the triangle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float [] {
-0.3f, -0.3f, 0.0f, //
V1 - first vertex (x,y,z)
0.3f, -0.3f, 0.0f, //
V2 - second vertex
0.0f, 0.6f, 0.0f
// V3 - third vertex
}));
298
// Draw the vertices as triangle
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_color));
gl.glDrawArrays(GLES20.GL_TRIANGLES, 0,
3);
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
public void draw_segitigasamakaki(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the colour for the triangle
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float [] {
-0.7f, -1.7f, 0.0f, //
V1 - first vertex (x,y,z)
0.7f, -1.7f, 0.0f, //
V2 - second vertex
0.0f, 1.0f, 0.0f
// V3 - third vertex
}));
// Draw the vertices as triangle
gl.glColorPointer(4, GL10.GL_FLOAT, 0,
makeFloatBuffer(vertices_color1));
gl.glDrawArrays(GLES20.GL_TRIANGLES, 0,
3);
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
}
299
Gambar 3.7 Membuat Kincir Angin
Related Documents
