MODUL PROGRAM KEAHLIAN GANDA

Save this PDF as:
 WORD  PNG  TXT  JPG

Ukuran: px
Mulai penontonan dengan halaman:

Download "MODUL PROGRAM KEAHLIAN GANDA"

Transkripsi

1 MODUL PROGRAM KEAHLIAN GANDA Grafika Komputer Paket Keahlian Rekayasa Perangkat Lunak Kelompok Kompetensi G Penulis: EKO SUBIYANTORO,S.Pd.,S.ST.,MT. Direktorat Jenderal Guru dan Tenaga Kependidikan Kementrian Pendidikan dan Kebudayaan Tahun 2017 i

2 Penulis: 1. Eko Subiyantoro, S.Pd., S.T., MT. Penelaah: 1. Siarra Maulida Asrin, S.T [ ], 2. Abdul Haliq, S.Pd., M.Pd., [ ] 3. Dyah Darma Andayani, S.T, M.Tel.Eng ( ) Ilustrator : 1. Faizal Reza Nurzeha., A.Md Copyright 2017 Lembaga Pengembangan dan Pemberdayaan Pendidikan Tenaga Kependidikan Bidang Kelautan Perikanan Teknologi Informasi dan Komunikasi. Hak Cipta Dilindungi Undang-Undang Dilarang mengkopi sebagian atau keseluruhan isi buku ini untuk kepentingan komersial tanpa izin tertulis dari Kementerian Pendidikan Kebudayaan. ii

3 KATA SAMBUTAN Peran guru profesional dalam proses pembelajaran sangat penting sebagai kunci keberhasilan belajar siswa. Guru profesional adalah guru yang kompeten membangun proses pembelajaran yang baik sehingga dapat menghasilkan pendidikan yang berkualitas. Hal ini tersebut menjadikan guru sebagai komponen yang menjadi fokus perhatian pemerintah pusat maupun pemerintah daerah dalam peningkatan mutu pendidikan terutama menyangkut kompetensi guru. Pengembangan profesionalitas guru melalui program Keahlian Ganda (PKG) merupakan upaya peningkatan kompetensi untuk semua guru. Sejalan dengan hal tersebut, pemetaan kopetensi guru telah dilakukan melalui uji kompetensi guru (UKG) untuk kompetensi pedagogik dan profesional pada akhir tahun Hasil UKG menunjukan peta kekuatan dan kelemahan kompetensi guru dalam penguasaan pengetahuan. Peta kompetensi guru tersebut dikelompokan menjadi 10 (sepuluh) kelompok kompetensi. Tindak lanjut pelaksanaan UKG diwujudkan dalam bentuk pelatihan guru paska UKG melalui program Keahlian Ganda. Tujuannya untuk meningkatkan kompetensi guru sebagai agen perubahan dan sumber belajar utama bagi peserta didik. Program Keahlian Ganda dilaksanakan melalui pola tatap muka, daring (online) dan campuran (blended) tatap muka dengan online. Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK), Lembaga Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan Kelautan Perikanan Teknologi Informasi dan Komunikasi (LP3TK KPTK) dan Lembaga Pengembangan dan Pemberdayaan Kepala Sekolah (LP2KS) merupakan Unit Pelaksana Teknis di lingkungan Direktorat Jendral Guru dan Tenaga Kependidikan yang bertanggung jawab dalam mengembangkan perangkat dan melaksanakan peningkaan kompetensi guru sesuai dengan bidangnya. Adapun perangkat pembelajaran yang dikembangkan tersebut adalah modul untuk program Keahlian Ganda tatap muka dan PKG online untuk semua mata pelajaran dan kelompok kompetensi. Dengan modul ini diharapkan program PKG memberikan sumbangan yang sangat besar dalam peningkatan kualitas kompetensi guru. Mari kita sukseskan program PKG ini untuk mewujudkan Guru Mulia Karena Karya. Jakarta, Februari 2016 Direktur Jendral Guru dan Tenaga Kependidikan Sumarna Surapranata, Ph.D NIP iii

4 iv

5 KATA PENGANTAR Profesi guru dan tenaga kependidikan harus dihargai dan dikembangkan sebagai profesi yang bermartabat sebagaimana diamanatkan Undang-Undang Nomor 14 Tahun 2005 tentang Guru dan Dosen. Hal ini dikarenakan guru dan tenaga kependidikan merupakan tenaga profesional yang mempunyai fungsi, peran, dan kedudukan yang sangat penting dalam mencapai visi pendidikan 2025 yaitu Menciptakan Insan Indonesia Cerdas dan Kompetitif. Untuk itu guru dan tenaga kependidikan yang profesional wajib melakukan pengembangan keprofesian berkelanjutan. Buku Pedoman Penyusunan Modul Diklat Program Keahlian Ganda Bagi Guru dan Tenaga Kependidikan untuk institusi penyelenggara program pembinaan karir merupakan petunjuk bagi penyelenggara pelatihan di dalam melaksakan pengembangan modul yang merupakan salah satu sumber belajar bagi guru dan tenaga kependidikan. Buku ini disajikan untuk memberikan informasi tentang penyusunan modul sebagai salah satu bentuk bahan pembinaan karir bagi guru dan tenaga kependidikan. dalam kegiatan Pada kesempatan ini disampaikan ucapan terima kasih dan penghargaan kepada berbagai pihak yang telah memberikan kontribusi secara maksimal dalam mewujudkan buku ini, mudah-mudahan buku ini dapat menjadi acuan dan sumber inspirasi bagi guru dan semua pihak yang terlibat dalam pelaksanaan penyusunan modul untuk pembinaan karir. Kritik dan saran yang membangun sangat diharapkan untuk menyempurnakan buku ini di masa mendatang. Makassar, Desember 2015 Kepala LPPPTK KPTK Gowa Sulawesi Selatan, Dr. H. Rusdi, M.Pd, NIP v

6 DAFTAR ISI KATA SAMBUTAN... iii KATA PENGANTAR... v DAFTAR ISI... vi DAFTAR GAMBAR... ix DAFTAR TABEL... xi PENDAHULUAN. 1 A.Latar Belakang. 1 B.Tujuan.. 2 C.Peta Kompetensi. 2 D.Ruang Lingkup Penggunaan Modul 4 E.Saran Cara Penggunaan Modul. 4 KEGIATAN BELAJAR 1 PENGANTAR GRAFIKA KOMPUTER... 9 A.Tujuan Pembelajaran... 9 B.Indikator Pencapaian Kompetensi... 9 C.Uraian Materi... 9 D.Aktivitas Pembelajaran E.Latihan/Tugas F.Rangkuman G.Umpan Balik 16 H.Kunci Jawaban KEGIATAN BELAJAR 2 OPENGL DAN LWJGL A.Tujuan Pembelajaran B.Indikator Pencapaian Kompetensi C.Uraian Materi D.Aktivitas Pembelajaran E.Latihan/Tugas F.Rangkuman G. Umpan Balik H.Kunci Jawaban vi

7 KEGIATAN BELAJAR 3 PRIMITIF OBJEK A.Tujuan Pembelajaran B.Indikator Pencapaian Kompetensi C.Uraian Materi D.Aktivitas Pembelajaran E.Latihan/Tugas F.Rangkuman G. Umpan Balik. 44 H.Kunci Jawaban KEGIATAN BELAJAR 4 PEMODELAN OBJEK 2 DIMENSI A.Tujuan Pembelajaran B.Indikator Pencapaian Kompetensi C.Uraian Materi D.Aktivitas Pembelajaran E.Latihan/Tugas F.Rangkuman G. Umpan Balik. 63 H.Kunci Jawaban KEGIATAN BELAJAR 5 PEMBUATAN OBJEK 3 DIMENSI A.Tujuan Pembelajaran B.Indikator Pencapaian Kompetensi C.Uraian Materi D.Aktivitas Pembelajaran E.Latihan/Tugas F.Rangkuman G. Umpan Balik H.Kunci Jawaban KEGIATAN BELAJAR 6 PEMBUATAN TEKSTURE A.Tujuan Pembelajaran B.Indikator Pencapaian Kompetensi C.Uraian Materi D.Aktivitas Pembelajaran vii

8 E.Latihan/Tugas F.Rangkuman G. Umpan Balik. 98 H. Kunci Jawaban. 98 KEGIATAN BELAJAR 7 TRANSFORMASI PROYEKSI A.Tujuan Pembelajaran B.Indikator Pencapaian Kompetensi C.Uraian Materi D.Aktivitas Pembelajaran E.Latihan/Tugas F.Rangkuman G.Umpan Balik H.Kunci Jawaban KEGIATAN BELAJAR 8 RENDERING A.Tujuan Pembelajaran B.Indikator Pencapaian Kompetensi C.Uraian Materi D.Aktivitas Pembelajaran E.Latihan/Tugas F.Rangkuman G. Umpan Balik 137 H. Kunci Jawaban. 138 PENUTUP EVALUASI GLOSARIUM DAFTAR PUSTAKA viii

9 DAFTAR GAMBAR Gambar 1 Peta Kedudukan Modul Grafika Komputer... 3 Gambar 2 Struktur Modul Grafika Komputer... 4 Gambar 3 Translasi Gambar 4 Rotasi Gambar 5 Skala Gambar 6 Koordinat Gambar 7 Surface Gambar 8 Vertex dan Edge Gambar 9 Penggunaan Teksture dalam Game Chect Out 3D Gambar 10 Analogi Pengambilan Gambar oleh Kamera Gambar 11 Transformasi Ortogonal dan Proyeksi Gambar 12 Transformasi Ortogonal Gambar 13 Ilustrasi Transformasi Ortogonal dari Kode Program ix

10 x

11 DAFTAR TABEL Tabel 1 Peta Kompetensi... 3 Tabel 2 Data Algoritma DDA(Digital Differential Analyzer) Tabel 4 Vertex Penyusun Kubus Tabel 5 Permukaan Kubus xi

12 xii

13 PENDAHULUAN A. Latar Belakang Guru dan tenaga kependidikan wajib melaksanakan kegiatan pengembangan keprofesian secara berkelanjutan agar dapat melaksanakan tugas profesionalnya. Program Keahlian Ganda (PKG) adalah pengembangan kompetensi Guru dan Tenaga Kependidikan yang dilaksanakan sesuai kebutuhan, bertahap, dan berkelanjutan untuk meningkatkan profesionalitasnya. PKG sebagai salah satu strategi pembinaan guru dan tenaga kependidikan diharapkan dapat menjamin guru dan tenaga kependidikan mampu secara terus menerus memelihara, meningkatkan, dan mengembangkan kompetensi sesuai dengan standar yang telah ditetapkan. Pelaksanaan kegiatan PKG akan mengurangi kesenjangan antara kompetensi yang dimiliki guru dan tenaga kependidikan dengan tuntutan profesional yang dipersyaratkan. Di dalam pelaksanaan diklat yang dilaksanakan oleh PPPPTK/LPPPTK KPTK diperlukan suatu modul yang berfungsi sebagai salah satu sumber belajar guru. Modul Diklat PKG Guru Rekayasa Perangkat Lunak (RPL) Level 7 Grafika Komputer ini dapat digunakan oleh guru dan tenaga kependidikan dan sebagai acuan untuk memenuhi tuntutan kompetensinya, sehingga guru dapat melaksanakan tugasnya secara professional sesuai dengan standar yang telah ditetapkan. Modul Diklat PKG Guru RPL Level 7 grafika komputer ini mempelajari tentang teori dan praktik tentang konsep dasar grafika komputer, penggunaan library OpenGL dan LWJGL ke dalam perangkat lunak yang dapat di integrasikan ke dalam Integrated Development Environment(IDE), pemodelan 2 dimensi yang diawali dengan sistem koordinat dan pembuatan primitif objek, pemodelan 3 dimensi dengan pembuatan objek 3 dimensi dan,pemanfaatan teknik lighting,shading, texture untuk menciptakan objek 3 yang nyata. 1

14 B. Tujuan Tujuan disusunnya modul diklat PKG Guru RPL Level 7 ini adalah memberikan pengetahuan, ketrampilan dan sikap kepada guru atau peserta diklat dalam membangun objek 2D dan 3D dengan konsep grafika komputer dengan terampil melalui aktifitas observasi dan praktikum. Setelah mempelajari modul ini diharapkan guru dapat : Membangun objek 3D menggunakan konsep pemrograman grafik. Sedangkan indikator pencapaian kompetensinya yang disusun dalam Standar Kompetensi Guru secara umum adalah : 1. Menganalisis Integrated Development Environment (IDE) pemrograman grafik 2. Membuat instruksi dasar OPENGL 3. Membuat pemodelan objek 3D menggunakan OPENGL 4. Membuat pergerakan objek 3D menggunakan OPENGL C. Peta Kompetensi Modul ini merupakan modul ke-7 dari 10 modul yang dikembangkan. Berdasarkan struktur jenjang diklat PKG Modul desain sistem basis data ini termasuk dalam jenjang lanjut. Modul ini akan digunakan untuk Program Keahlian Ganda (PKG) bagi guru-guru produktif Sekolah menengah Kejuruan pada paket keahlian Rekayasa Perangkat Lunak. 2

15 Proyek Sistem Informasi Berbasis Dekstop (50 JP) Proyek Sistem Informasi Berbasis Web (50 JP) Proyek Sistem Informasi Berbasis Perangkat Bergerak (50 JP) 7 Grafika Komputer (50 JP) 6 4 Pemrograman Berbasis Dekstop (50 JP) Pemrograman Web Dinamis (50 JP) 5 Pemrograman Berbasis Perangkat Bergerak (50 JP) 3 Pemrograman Berorientasi Objek (50 JP) 1 Desain Sistem Basis Data (50 JP) 2 Sistem Manajemen Basis Data (50 JP) Gambar 1 Peta kedudukan Modul Grafika Komputer Tabel 1 Peta kompetensi Grafika Komputer : Kompetensi Utama Profesional Kompetensi Inti Guru (KIG) 1. Menguasai materi, struktur, konsep dan pola pikir keilmuan yang mendukung mata pelajaran yang diampu Standar Kompetensi Guru Kompetensi Guru Keahlian (KGK) Membangun objek 3D menggunakan konsep pemrograman grafik Indikator pencapaian Kompetensi Menganalisis Integrated Development Environment pemrograman grafik (IDE) Membuat instruksi dasar OPENGL Membuat pemodelan objek 3D menggunakan OPENGL Membuat pergerakan objek 3D menggunakan OPENGL 3

16 D. Ruang Lingkup Penggunaan Modul Modul ini disusun dengan empat pembahasan utama (materi pokok). Setiap materi pokok terdapat beberapa kegiatan pembelajaran untuk mencapai kompetensi yang telah ditentukan. Setiap kegiatan pembelajaran terdiri dari tujuan pembelajaran, indikator essential, uraian materi, aktifitas pembelajaran, latihan/tugas/kasus, rangkuman dan umpan balik. Materi dalam modul ini mencakup empat topik utama yaitu: 1) Dasar-Dasar Grafika Komputer, 2) Pemodelan Objek 2 Dimensi, 3) Pemodelan Objek 3 Dimensi dan, 4)Rendering Kegiatan Belajar 2 OpenGL dan LWJGL Kegiatan Belajar 4 Pembuatan Objek 2 Dimensi Kegiatan Belajar 6 Pembuatan Teksture Kegiatan Belajar 8 Lighting dan Shading Kegiatan Belajar 1 Pengantar Grafika Komputer Kegiatan Belajar 3 Primitif Drawing Kegiatan Belajar 5 Pembuatan objek 3 Dimensi Kegiatan Belajar 7 Transformasi Proyeksi Topik 1 Dasar-Dasar Grafika Komputer Topik 2 Pemodelan Objek 2 Dimensi Topik 3 Pemodelan Objek 3 Dimensi Topik 4 Rendering Gambar 2 Struktur modul PKB Guru RPL Grade 7 Grafika Komputer E. Saran Cara Penggunaan Modul Modul grafika komputer ini terdiri dari empat topik utama. Peserta diklat dapat mempalajari sesui dengan urutan topik mulai topik 1 sampai topik 4. Keempat topik tersebut tidak memiliki ketergantungan secara penuh, sehingga peserta diklat dapat mempelajari tidak secara berurutan. Akan tetapi untuk masingmasing topik setiap kegiatan belajar mempunyai keterkaitan secara penuh. Ini berarti untuk setiap topik materi yang dipelajari harus secara berurutan sesuai urutan kegiatan pembelajaran. Untuk setiap kegiatan pembelajaran, uruatan yang harus dilakukan oleh peserta diklat dalam mempelajari modul ini adalah : 4

17 1. Membaca tujuan pembelajaran sehingga memahami target atau tujuan dari kegiatan belajar tersebut. 2. Membaca indikator pencapaian kompetensi sehingga memahami obyek yang akan dijadikan kriteria pengukuran untuk mencapai tujuan pembelajaran. 3. Membaca uraian materi pembelajaran sehingga memiliki pengetahuan, ketrampilan dan sikap terhadap kompetensi yang akan dicapai 4. Melakukan aktifitas pembelajaran dengan urutan atau kasus permasalahan sesuai dengan contoh. 5. Mengerjakan latihan/soal atau tugas dengan mengisi lembar kerja yang telah disediakan. 6. Menjawab pertanyaan dalam umpan balik yang akan mengukur tingkat pencapaian kompetensi melalui penilaian diri. 5

18 6

19 7

20 8

21 DASAR-DASAR GRAFIKA KOMPUTER Pengantar Grafika Komputer A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 1 ini peserta diklat diharapkan dapat : 1. Melalui studi literatur peserta diklat dapat menganalisis komponenkomponen penting dalam grafika komputer. 2. Melalui diskusi peserta diklat dapat menggambarkan peranan grafika komputer dalam berbagai bidang. B. Indikator Pencapaian Kompetensi 1. Peserta diklat mampu menganalisis konsep grafis dalam grafika komputer 2. Peserta diklat mampu membedakan desain grafis bitmap dan vektor 3. Peserta diklat mampu menjelaskan penerapan grafika komputer dalam berbagai bidang C. Uraian Materi 1. Pengertian Grafika Komputer Grafika komputer (computer graphics) merupakan salah satu ilmu informatika yang mempelajari pembuatan dan manipulasi gambar dengan komputer atau secara digital. Grafis adalah gambar yang tersusun dari koordinat-koordinat. Dengan demikian sumber gambar yang muncul pada layar monitor komputer terdiri atas titik-titik yang mempunyai nilai koordinat. Layar Monitor berfungsi sebagai sumbu koordinat x dan y. Dengan kata lain maka grafika komputer adalah proses konversi informasi digital ke dalam format visual untuk ditampilkan pada terminal atau output pada printer. Dalam pembuatan komputer grafis diperlukan komputer digital untuk menyimpan dan memanipulasi gambar, tampilan layar, input / output, dan perangkat lunak khusus yang memungkinkan komputer digunakan untuk menggambar, warna, dan memanipulasi gambar sehingga dapat disimpan dalam memori. 9

22 Format komputer grafis umum termasuk GIF dan JPEG, untuk gambar tunggal, dan MPEG dan Quicktime, untuk gambar multiframe. Aplikasi grafika komputer telah digunakan secara luas dalam bisnis, penelitian ilmiah, dan hiburan. Salah satu bidang grafika komputer yang sangat terkenal adalah Desain Grafis. Bentuk sederhana dari grafika komputer yaitu titik, garis dan bidang 2 Dimensi (2D), yang kemudian dikembangkan menjadi bidang 3 Dimensi (3D), pengolahan citra (image processing) dan pengenalan pola (pattern recognation). Salah satu manfaat utama dari grafis komputer adalah bahwa gambar dapat dimanipulasi dengan relatif mudah dan banyak efek visual yang mungkin karena gambar dapat dimainkan dengan lebih baik sampai pada efek yang diinginkan tercapai. Pada dasarnya desain grafis dibedakan atas dua, yaitu desain bitmap dan desain vector. Grafis desain bitmap dibentuk dengan raster/pixel/dot/titik/point koordinat. Pembuatan citra (images) sebagai koleksi dari dots (pixels) yang kecil, independent dan dapat diatur dalam bentuk baris dan kolom. Raster grafika juga dikenal sebagai pixel graphics. Hampir semua perangkat output komputer menggunakan konsep raster seperti CRTs, LCDs, LEDs, dan plasma screens. Pixel merupakan singkatan dari picture element, kadang-kadang juga disebut pel. Pixel merupakan satu titik dalam satu grid berbentuk persegi atau juga beribu titik secara individual dilukis menjadi suatu bentuk image yang dihasilkan pada layar komputer atau pada kertas oleh sebuah Printer. Semakin banyak jumlah titik yang membentuk suatu grafis bitmap berarti semakin tinggi tingkat kerapatannya. Hal ini menyebabkan semakin halus citra grafis, tetapi kapasitas filenya semakin besar. Program aplikasi grafis yang berbasis bitmap, antara lain : Adobe Photoshop, Corel Photopaint, Microsoft Photo Editor dan Macromedia Fireworks. Grafis jenis vektor merupakan perkembangan dari sistem grafis bitmap (digital). Grafis ini tidak tergantung pada banyaknya pixel penyusunnya dan kondisi monitor karena tampilan vektor tersusun atas garis-garis. Tampilan akan terlihat jelas meskipun dilakukan pembesaran (zooming). Penggunaan titik-titik koordinat dan rumus-rumus tertentu dapat menciptakan bermacam- 10

23 macam bentuk grafis, seperti lingkaran, segitiga, bujur sangkar dan poligon. Dengan demikian, pemakaian grafis vektor akan lebih irit dari segi volume file, tetapi dari segi pemakaian prosessor akan memakan banyak memori. Program aplikasi grafis yang berbasis vektor antara lain CorelDraw, Macromedia Free hand, Adobe Illustrator dan Micrografx Designer. Dalam grafika komputer memiliki tiga tema utama, yaitu : Modeling, yaitu cara mempresentasikan sebuah objek atau lingkungan di sekitar. Animasi, yaitu mempelajari tentang penggambaran dan manipulasi gerakan objek secara otomatis atau manual. Rendering, yaitu mempelajari algoritma untuk membuat dan menampilkan struktur/detail suatu objek. 2. Peran dan Penggunaan Grafika Komputer Grafika komputer telah menunjukkan kemajuan yang pesat dalam pengembangan berbagai aplikasi untuk menghasilkan gambar. Walaupun pada awalnya aplikasi dalam sains dan engineering memerlukan peralatan yang mahal, perkembangan teknologi komputer memberikan kemudahan penggunaan komputer sebagai alat bantu aplikasi grafik komputer interaktif. Pada saat ini grafika komputer digunakan secara rutin di bidang ilmu pengetahuan, teknik, kedokteran, bisnis, industri, pemerintahan, seni, hiburan, pendidikan, periklanan, dan lain sebagainya. Berikut contoh peranan grafika komputer dalam berbagai bidang: 1) Desain Proses desain grafika komputer terutama digunakan pada sistem engineering dan arsitektur. Salah satu contoh penerapan grafika computer yaitu Computer Aided Design (CAD) digunakan untuk pembuatan desain mobil, bangunan, pesawat terbang, kapal, komputer, tekstil, dan lain-lain. Pada beberapa aplikasi desain, objek ditampilkan dalam bentuk wireframe yaitu bagian gambar yang memperlihatkan keseluruhan bentuk dan fitur internal dari sebuah objek, dimana diperlihatkan 11

24 keseluruhan bentuk, dengan bentuk internal dari objek tersebut. Penggunaan wireframe bermanfaat bagi designer untuk melihat isi dari objek tersebut. Contoh perangkat lunak yang digunakan yaitu AutoCAD, 3D Studio Max, dan Maya. 2) Grafika Presentasi Bidang lain yang berhubungan dengan grafika komputer adalah grafik presentasi yang dapat berupa cetakan, slide, dan transparansi. Grafik presentasi biasanya digunakan untuk melengkapi laporan keuangan, sains, data ekonomi, dan lain-lain. Bentuk grafik presentasi tersebut adalah chart, bar chart, pie chart, dan lain-lain. 3) Computer Art Metode grafika komputer digunakan dalam aplikasi commercial art dan fine art. Seniman menggunakan bermacam-macam perangkat lunak grafik, dan kadang dilengkapi dengan perangkat keras khusus. Contoh perangkat lunak yang digunakan yaitu Corel Draw, Adobe Photoshop, Adobe Ilustrator, Macromedia, dan sebagainya. 4) Film Pada pembuatan film layar lebar, grafika komputer banyak digunakan untuk menunjang proses pemodelan, visualisasi, dan editing. Misalnya dalam proses special effect, film animasi. 5) Televisi Grafika komputer dalam tayangan televisi juga dapat berupa iklan, tampilan tiap acara, dan lainnya. 6) Video Musik Produksi video musik tidak terlepas dari grafika komputer, diantaranya pembuatan promosi, cover atau kemasan video, serta animasi yang mengiringi setiap lagu. Proses editing video dan audio dilakukan dengan menggunakan komputer. 7) Game Berbagai game dapat dijalankan pada komputer PC, video player dengan monitor TV, dan ada yang menggunakan perangkat keras 12

25 khusus. Alat input interaktif seperti mouse dan joystick diperlukan untuk aplikasi game. 8) Pendidikan Komputer sebagai alat bantu pendidikan (Computer Assisted Instruction) sudah cukup dikenal. Aplikasi bidang pengajaran dengan komputer sebagai alat bantunya, diantaranya: Drill and Practice (latih dan praktek) Computer Assisted Instruction (CAI) menggantikan pengajar untuk memberikan latihan kepada siswa. Tutorial (penjelasan) Sistem komputer digunakan untuk menyampaikan materi ajaran. Simulasi Digunakan untuk mengkaji permasalahan yang rumit pada bidang biologi, transportasi, ekonomi, dan lain-lain. Aplikasi bidang bukan pengajaran dengan alat bantu komputer, diantaranya : a. Computer Assisted Testing (Ujian Berbantuan Komputer) Komputer digunakan untuk sarana ujian. b. Computer Assisted Guidance (Pengarahan Berbantuan Komputer) Komputer digunakan sebagai sarana untuk mencari informasi yang diperlukan. c. Computer Managed Instruction Komputer digunakan untuk merencanakan pelajaran, evaluasi belajar, serta memantau prestasi siswa. 9) Visualisasi Ilmuwan, ahli kedokteran, analis bisnis, dan lain-lain sering menggunakan banyak informasi suatu masalah dalam mempelajari perilaku proses tertentu. Informasi tersebut berisi ribuan data untuk memberikan gambaran hasil suatu evaluasi. Data tersebut diproses sehingga mendapatkan hasil dalam bentuk visual. 10) Image Processing 13

26 Image processing (pengolahan citra) merupakan teknik untuk memodifikasi atau menginterpretasi gambar yang ada, seperti foto dan rangkaian gambar film. Dua macam prinsip pengolahan citra adalah : Meningkatkan kualitas gambar. Memberikan persepsi dari informasi visual, seperti pada robotik. Untuk melakukan pengolahan citra, pertama-tama membuat digitasi dari foto atau membuat foto menjadi file image. Selanjutnya metode digital dapat digunakan untuk memodifikasi gambar sehingga mendapatkan kualitas yang baik. 11) Graphical User Interface (GUI) Graphical interface (antarmuka grafik) banyak digunakan dalam setiap aplikasi. Komponen utamanya adalah window manager, dimana pengguna dapat mengatur tampilan dari window. Interface juga menampilkan menu dan icon untuk mempercepat pemilihan yang dilakukan oleh pengguna. D. Aktivitas Pembelajaran Peserta diklat dibagi menjadi beberapa kelompok untuk mendiskusikan materi tentang grafika komputer dan penerapan dalam berbagai bidang, kemudian membuat presentasi. Kegiatan Praktikum Topik diskusi 1 : Teknik dan Teknologi dalam Grafika Komputer 2. Topik diskusi 2 : Penerapan Grafika Komputer E. Latihan Soal 1. Suatu bidang ilmu yang mempelajari bagaimana membangun grafik (gambar) baik 2D maupun 3D yang kelihatan nyata menggunakan komputer adalah 14

27 2. Berikut ini adalah implementasi dari grafika komputer, adalah... a. Simulators,CAD (Computer Aided Design), Architectural visualization b. Simulators,CAD (Computer Aided Design), Artificial Intillegence c. Simulators, Artificial Intillegence, Architectural visualization d. CAD (Computer Aided Design), Architectural visualization,artificial Intillegence F. Rangkuman Grafika komputer (computer graphics) merupakan salah satu ilmu informatika yang mempelajari pembuatan dan manipulasi gambar dengan komputer atau secara digital. Grafis adalah gambar yang tersusun dari koordinat-koordinat. Dengan demikian sumber gambar yang muncul pada layar monitor komputer terdiri atas titik-titik yang mempunyai nilai koordinat. Layar Monitor berfungsi sebagai sumbu koordinat x dan y. Dengan kata lain maka grafika komputer adalah proses konversi informasi digital ke dalam format visual untuk ditampilkan pada terminal atau output pada printer. Dalam pembuatan komputer grafis diperlukan komputer digital untuk menyimpan dan memanipulasi gambar, tampilan layar, input / output, dan perangkat lunak khusus yang memungkinkan komputer digunakan untuk menggambar, warna, dan memanipulasi gambar sehingga dapat disimpan dalam memori. Pada dasarnya desain grafis dibedakan atas dua, yaitu desain bitmap dan desain vector. Grafis desain bitmap dibentuk dengan raster/pixel/dot/titik/point koordinat. Pembuatan citra (images) sebagai koleksi dari dots (pixels) yang kecil, independent dan dapat diatur dalam bentuk baris dan kolom. Raster grafika juga dikenal sebagai pixel graphics. Hampir semua perangkat output komputer menggunakan konsep raster seperti CRTs, LCDs, LEDs, dan plasma screens. Grafis jenis vektor merupakan perkembangan dari sistem grafis bitmap (digital). Grafis ini tidak tergantung pada banyaknya pixel penyusunnya dan kondisi monitor karena tampilan vektor tersusun atas garis-garis. Tampilan akan terlihat jelas meskipun dilakukan pembesaran (zooming). Penggunaan titik-titik koordinat dan rumus-rumus tertentu dapat menciptakan bermacam-macam bentuk grafis, seperti lingkaran, segitiga, bujur sangkar dan poligon. Dengan demikian, 15

28 pemakaian grafis vektor akan lebih irit dari segi volume file, tetapi dari segi pemakaian prosessor akan memakan banyak memori. Pada saat ini grafika komputer digunakan secara rutin dibidang ilmu pengetahuan, teknik, kedokteran, bisnis, industri, pemerintahan, seni, hiburan, pendidikan, periklanan, dan lain sebagainya. G. Umpan Balik IPK Hasil Yang Dicapai Rencana Tindak Lanjut Peserta diklat mampu menganalisis konsep grafis dalam grafika komputer dan berapa proses pencapaian kompetensinya Peserta diklat mampu membedakan desain grafis bitmap dan vector dan berapa besar proses pencapaian kompetensinya Peserta diklat mampu menjelaskan penerapan grafika komputer dalam berbagai bidang dan berapa besar proses pencapaian kompetensinya H. Kunci Jawaban 1. Grafika Komputer 2. a 16

29 17

30 18

31 OpenGL dan LWJGL A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 2 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat dapat menggambarkan fungsi-fungsi OpenGL yang digunakan untuk membuat objek 2. Melalui praktikum peserta diklat dapat mengintegrasikan LWJGL ke dalam Integrated Development Environment IDE NetBeans 3. Melalui praktikum peserta diklat dapat menulis kode program dengan perintah-perintah dasar OpenGL B. Indikator Pencapaian Kompetensi 1. Peserta diklat mampu menggunakan fungsi-fungsi dasar OpenGL untuk membuat objek 2. Peserta diklat mampu memodifikasikan fungsi-fungsi dasar OpenGL untuk membuat objek 3. Peserta diklat mampu menerapkan LWJGL ke dalam IDE NetBeans 4. Peserta diklat mampu membuat kode program dengan perintah-perintah OpenGL C. Uraian Materi 1. OpenGL OpenGL (Open Graphics Library) adalah sebuah program aplikasi antar muka yang digunakan untuk mendefinisikan komputer grafis 2D dan 3D. Program lintas-platform API ini umumnya dianggap ketetapan standar dalam industri komputer dalam interaksi dengan komputer grafis 2D dan juga telah menjadi alat yang biasa untuk digunakan dengan grafis 3D. Singkatnya, OpenGL menghilangkan kebutuhan pemrograman untuk menulis ulang bagian grafis dari sistem operasi setiap kali sebuah bisnis akan diupgrade ke versi baru dari sistem. Fungsi dasar dari OpenGL adalah untuk 19

32 mengeluarkan koleksi perintah khusus atau executable ke sistem operasi. Dengan demikian, program ini bekerja dengan perangkat keras grafis yang ada yang berada pada hard drive atau sumber tertentu lainnya. Setiap perintah dirancang untuk melakukan tindakan tertentu, atau memulai efek khusus tertentu yang terkait dengan grafis. OpenGL adalah suatu spefikasi grafik pada level rendah yang menyediakan fungsi untuk pembuatan grafik dasar termasuk titik, garis, dan lingkaran. OpenGL digunakan untuk keperluan-keperluan pemrograman grafis.opengl bersifat Open-Source, multi-platform dan multi-language serta digunakan mendefinisikan suatu objek, baik objek 2 dimensi maupun objek 3 dimensi. OpenGL juga merupakan suatu antarmuka pemrograman aplikasi (application programming interface (API) yang tidak tergantung pada piranti dan platform yang digunakan, sehingga OpenGL dapat berjalan pada sistem operasi Windows, UNIX dan sistem operasi lainnya. OpenGL pada awalnya didesain untuk digunakan pada bahasa pemrograman C/C++, namun dalam perkembangannya OpenGL dapat juga digunakan dalam bahasa pemrograman yang lain seperti Java, Tcl, Ada, Visual Basic, Delphi, maupun Fortran. Namun OpenGL di-package secara berbeda-beda sesuai dengan bahasa pemrograman yang digunakan. Oleh karena itu, package OpenGL tersebut dapat di-download pada situs sesuai dengan bahasa pemrograman yang akan digunakan. OpenGl melayani dua tujuan : Untuk menyembunyikan kompleksitas dari interfacing dengan menggunakan berbagai 3D accelerators dan menggunakan satu standar API. Untuk menyembunyikan kemampuan yang berbeda dari hardware platform yang mendukung implementasi penuh fitur opengl (menggunakan software emulation jika diperlukan). LWJGL Lightweight Java Game Library (LWJGL) merupakan salah satu jenis game engine yang berjalan dengan dasar bahasa java (open source dan free). Game engine sendiri merupakan perangkat lunak yang digunakan khusus 20

33 dalam pembuatan video game. Inti LWJGL adalah untuk menyisipkan tampilan level yang lebih rendah dan tidak perlu memasukkan kode. Sintax Perintah OpenGL Sintaks perintah OpenGL mengikuti aturan penulisan dari library dimana fungsi tersebut berasal, format penulisan fungsi OpenGL adalah : <awalan library><perintah><optional jumlah argumen><optional tipe argumen> Semua perintah OpenGL menggunakan awalan gl diikuti dengan huruf kapital pada setiap kata membentuk nama perintah (sebagai contoh glclearcolor). Untuk mendefinisikan konstanta diawali dengan GL_, dengan menggunakan huruf kapital dan garis bawah untuk memisahkan kata (seperti GL_POLY_STIPPLE). Terkadang beberapa huruf dan angka ditambahkan pada akhir perintah (seperti 3f pada glvertex3f). Dalam hal ini angka 3 menunjukkan berapa banyak argumen yang harus ada pada perintah tersebut dan akhiran huruf f menunjukkan jenis datanya yaitu floating. Sebagai contoh pada dua perintah berikut ini : glvertex3i(1,0,-2); glvertex3f(1.0, 0.0, -2.0); adalah sama yaitu meletakkan titik di layar pada koordinat x = 1, y = 0 dan z = -2, perbedaannya yaitu pada perintah pertama menspesifikasikan titik dengan tipe data integer 32-bit, sedangkan yang kedua dengan tipe data single precision floating point. Beberapa perintah OpenGL menambahkan perintah huruf akhir v yang menunjukkan bahwa perintah tersebut menggunakan pointer ke array/vektor. Di bawah ini contoh perbedaannya. float color_array[]={1.0,0.0,0.0 glcolor3f (1.0,0.0,0.0); glcolor3fv(color_array); 21

34 D. Aktivitas Pembelajaran Kegiatan Praktikum 2.1 Langkah-langkah instalasi LWJGL ke dalam IDE NetBeans 1. Pilih Lwjgl-X.X.zip yang tersedia dengan men-download file LWJGL 2. Unduh Lwjgl-docs-X.X.zip, Javadoc lwjgl untuk di Netbeans (Direkomendasikan) 3. Unduh Lwjgl-source-X.X.zip, source code lwjgl untuk di Netbeans (Direkomendasikan) 4. Unduh Lwjgl-applet-X.X.zip jika ingin menggunakan Java Applet dengan Lwjgl 5. Ekstrak File Lwjgl-X.X.zip dan Lwjgl-source-X.X.zip kecuali Lwjgl-docs- X.X.zip. a) Cara Instalasi LWJGL di NetBeans Berikut tahap-tahap instalasi LWJGL di NetBeans: 1. Buka Netbeans 2. Klik New Project, pilih Java Application > Next Tulis Project Name dengan nama TutorialLWJGL Klik Tools > Libraries di main menu 22

35 3. Klik Tombol New Library 4. Berikan nama library dengan LWJGL atau LWJGL-X.X 23

36 5. Pastikan Library sudah dipilih. Sekarang pilih tab Classpath untuk menambahkan library terbaru dan kemudian klik tombol Add JAR/Folder. 6. Pergi ke folder ekstrak LWJGL-X.X.zip dan folder Jar. lwjgl.jar, lwjgl_util.jar, dan jinput.jar merupakan file jar yang harus Anda pilih. Anda dapat memilih lebih dari 1 file dengan menahan tombol Ctrl pada Keyboard. 7. Pilih Tab Sources, kemudian klik Add JAR/Folder. Pergi ke folder ekstrak Lwjgl-source-X.X.zip dan klik folder src, kemudian pilih folder generated dan java. 24

37 8. Pilih Tab Javadoc dan klik Add JAR/Folder. Kemudian pilih file Lwjgl-docs-X.X.zip 9. Klik OK. Selesai. Library sudah ditambahkan ke dalam Netbeans. b) Menambahkan library LWJGL ke dalam library di aplikasi Berikut ini tahap-tahap menambah library LWJGL: 1. Buka Netbeans. 2. Klik kanan pada Libraries aplikasi kemudian pilih Add Library 25

38 3. Pilih LWJGL > Klik Add Library. 4. Konfigurasi VM dengan cara klik kanan pada Tutorial lwjgl dan pilih Properties 26

39 Kemudian Pilih Run, dan tambahkan script berikut ke dalam kolom VM Options: -Djava.library.path="Directory\lwjgl-2.9.1\native\windows" 5. Selesai. 27

40 Kegiatan Praktikum 2.3 Kegiatan Praktikum ini adalah kegiatan praktikum menggunakan struktur dasar OpenGL dan LWJGL dalam IDE NetBeans. 1. Bagian awal dari program adalah bagian untuk mengimport library-library yang diperlukan untuk mengintegrasikan LWJGL ke dalam IDE Netbeans import java.util.logging.level; import java.util.logging.logger; import static komgraf01.komgraf01.display_height; import static komgraf01.komgraf01.display_width; import org.lwjgl.lwjglexception; import org.lwjgl.input.keyboard; import org.lwjgl.input.mouse; import org.lwjgl.opengl.display; import org.lwjgl.opengl.displaymode; import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.gluortho2d; 2. Bagian kedua dari program adalah bagian yang digunakan untuk menentukan koordinat dari bidang dua dimensi dalam bentuk garis dimana nilai satuan berupa double. public class OpenGL1 { public void draw() { glbegin(gl_line_loop);//objek garis glvertex2d(200, 200); // koordinat x dan y glvertex2d(600, 200); glvertex2d(200, 325); glvertex2d(600, 325); glvertex2d(200, 450); glvertex2d(600, 450); glend(); 3. Bagian ketiga dari program adalah bagian yang digunakan untuk inisialisasi OpenGL public void render() { glclear(gl_color_buffer_bit);//menghapus layar glloadidentity(); 28

41 glcolor3d(1, 0, 0); draw(); glflush(); public void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(800, 600)); Display.setFullscreen(false); Display.setTitle("GAMBAR Primitives-Geometric : POLYGON"); Display.create(); initgl(); resizegl(); void initgl() { glclearcolor(0.0f, 1.0f, 1.0f, 1.0f); gldisable(gl_depth_test); gldisable(gl_lighting); public void resizegl() { //2D Scene glviewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); glmatrixmode(gl_projection); glloadidentity(); gluortho2d(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glpushmatrix(); glmatrixmode(gl_modelview); glloadidentity(); glpushmatrix(); public void run() { while (!Display.isCloseRequested() &&!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); else { if (Display.isDirty()) { 29

42 render(); try { Thread.sleep(100); catch (InterruptedException ex) { Display.update(); Display.sync(60); private void update() { public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); public static void main(string[] args) { OpenGL1 b1 = new OpenGL1(); try { b1.create(); b1.run(); catch (LWJGLException ex) { Logger.getLogger(Belajar1.class.getName()).log(Level.SEVERE, null, ex); 30

43 E. Latihan / Tugas Latihan 1. OpenGL (Open Graphics Library) bersifat Open-Source, multi-platform dan multi-language adalah sebuah program aplikasi interface untuk mendifinisikan suatu objek yaitu Fungsi dasar dari OpenGL adalah... F. Rangkuman OpenGL (Open Graphics Library) adalah sebuah program aplikasi interface yang digunakan untuk mendefinisikan komputer grafis 2D dan 3D. Program lintasplatform API ini umumnya dianggap ketetapan standar dalam industri komputer dalam interaksi dengan komputer grafis 2D dan juga telah menjadi alat yang biasa untuk digunakan dengan grafis 3D.OpenGL adalah suatu spefikasi grafik yang low-level yang menyediakan fungsi untuk pembuatan grafik primitif termasuk titik, garis, dan lingkaran. OpenGL digunakan untuk keperluankeperluan pemrograman grfis.opengl bersifat Open-Source, multi-platform dan multi-language serta digunakan mendefinisikan suatu objek, baik objek 2 dimensi maupun objek 3 dimensi. Lightweight Java Game Library (LWJGL) merupakan salah satu jenis game engine yang berjalan dengan dasar bahasa java (open source dan free). Game engine sendiri merupakan perangkat lunak yang digunakan khusus dalam pembuatan video game. Sintaks perintah OpenGL mengikuti aturan penulisan dari library dimana fungsi tersebut berasal, format penulisan fungsi OpenGL adalah : <awalan library><perintah><optional jumlah argumen><optional tipe argumen> Semua perintah OpenGL menggunakan awalan gl diikuti dengan huruf kapital pada setiap kata membentuk nama perintah (sebagai contoh glclearcolor). 31

44 G. Umpan Balik IPK Hasil Yang Dicapai Rencana Tindak Lanjut Peserta diklat mampu menggunakan fungsi-fungsi dasar OpenGL untuk membuat objek dan berapa proses pencapaian kompetensinya Peserta diklat mampu memodifikasikan fungsi-fungsi dasar OpenGL untuk membuat objek dan berapa besar proses pencapaian kompetensinya Peserta diklat mampu menerapkan LWJGL ke dalam IDE NetBeans dan berapa besar proses pencapaian kompetensinya Peserta diklat mampu membuat kode program dengan perintahperintah OpenGL dan berapa besar proses pencapaian kompetensinya H. Kunci Jawaban 1. Objek 2 dimensi dan objek 3 dimensi 2. Mengeluarkan koleksi perintah khusus(grafik) atau executable ke sistem operasi 32

45 33

46 34

47 PEMODELAN OBJEK 2 DIMENSI Primitif Objek A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 3 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat mengemukakan output primitif grafika komputer untuk membuat objek. 2. Melalui praktikum peserta diklat membuat kode program berdasarkan algoritma pembentukan garis dan lingkaran. B. Indikator Pencapaian Kompetensi 1. Peserta diklat mampu menerapkan konsep konsep dasar grafika computer untuk menggambar primitif objek 2. Peserta diklat mampu menggunakan perintah-perintah dasar OpenGL untuk menggambar primiif objek 3. Peserta diklat mampu menulis kode program sesuai algoritma pembentukan garis dan lingkaran C. Uraian Materi 1. Primitif Objek Objek primitif merupakan bentuk geometri sederhana seperti titik (points), garis (lines) dan bangunan dua dimensi. Dalam grafika computer, representasi citra menggunakan primitive grafik dasar memudahkan untur dirender atau digambar pada layar monitor sebagaimana penggunaan persamaan geometri sederhana. Contoh objek primitif grafika dasar antara lain : titik, garis, kurva, fill area dan text. Objek kompleks dapat dibuat dengan menggunakan kombinasi dari objek primitif ini. Misalkan, Poligaris atau yang dapat didefinisikan sebagai urutan garis lurus yang saling terhubung. Secara umum algoritma grafis memiliki persamaan 35

48 tujuan yaitu bagaimana menampilkan hasil citra yang diinginkan berdasarkan koordinat yang telah ditentukan. 2. Titik dan Garis Pembentukan titik dilakukan dengan mengkonversi posisi titik koordinat dengan program aplikasi ke dalam suatu operasi tertentu menggunakan output. Randomscan (vektor). Sistem menyimpan instruksi pembentukan titik pada display list dan nilai koordinat untuk menentukan posisi pancaran electron ke arah lapisan fosfor pada layer. Garis dibuat dengan menentukan posisi titik diantara titik awal dan akhir dari suatu garis. Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan y adalah koordinat dua dimensi pada layar. 3. Membuat Titik dan Garis Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan y adalah koordinat pada layar. Sedangkan untuk membuat garis digunakan perintah lines(x1,y1,x2,y2). Persamaan garis menurut koordinat Cartesian adalah: y = m.x + b dimana m adalah slope (kemiringan) dari garis yang dibentuk oleh dua titik yaitu (x 1,y 1 ) dan (x 2, y 2 ). Untuk penambahan x sepanjang garis yaitu dx akan mendapatkan penambahan y sebesar Δy = m. Δx Algoritma DDA (Digital Differential Analyzer) DDA adalah algoritma pembentukan garis berdasarkan perhitungan Δx dan Δy, menggunakan rumus y = m. Δ x. Garis dibuat dengan menentukan dua endpoint yaitu titik awal dan titik akhir. Setiap koordinat titik yang membentuk garis diperoleh dari perhitungan, kemudian dikonversikan menjadi nilai integer. Langkah-langkah pembentukan menurut algoritma DDA, yaitu : 1) Tentukan dua titik yang akan dihubungkan. 2) Tentukan salah satu titik sebagai titik awal (x 0, y 0 ) dan titik akhir (x 1, y 1 ). 3) Hitung Δx = x 1 x 0 dan Δ y = y 1 y 0. 4) Tentukan step, yaitu jarak maksimum jumlah penambahan nilai x maupun nilai y dengan cara : bila nilai Δy > Δx maka step = nilai Δy. 36

49 bila tidak maka step = Δx. 5) Hitung penambahan koordinat pixel yaitu x_increment = Δx / step dan y_increment = Δy / step. 6) Koordinat selanjutnya (x+x_incerement, y+y_increment). 7) Posisi pixel pada layer ditentukan dengan pembulatan nilai koordinasi tersebut. 8) Ulangi step 6 dan 7 untuk menentukan posisi pixel selanjutnya, sampai x = x 1 dan y = y 1 Contoh: Untuk menggambarkan algoritma DDA dalam pembentukan suatu garis yang menghubungkan titik (5,5) dan (10,9), pertama-tama ditentukan dx dan dy, kemudian dicari step untuk mendapatkan x_increment dan y_increment. Δx = x 1 x 0 = 10-5 = 5 Δy = y 1 y 0 = 9-5 = 4 selanjutnya hitung dan bandingkan nilai absolutnya. Δx = 5 Δy = 4 karena Δx > Δy, maka step = Δx = 5, maka diperoleh : x_inc = 5/5 = 1 y_inc = 4/5 = 0.8 Tabel 2 Data algoritma DDA K X Y Round(x), round(y) (5,5) (6,6) (7,7) (8,7) (9,8) (10,9)

50 Algoritma Bressenham Prosedur untuk menggambar kembali garis dengan membulatkan nilai x atau y ke bilangan integer membutuhkan waktu, serta variable x,y dan m merupakan bilangan real karena kemiringan merupakan nilai pecahan. Bressenham mengembangkan algoritma klasik yang lebih menarik, karena hanya menggunakan perhitungan matematika dengan bilangan integer. Dengan demikian tidak perlu membulatkan nilai posisi setiap pixel setiap waktu. Algoritma garis Bressenhem disebut juga midpoint line algorithm adalah algoritma konversi penambahan nilai integer yang juga dapat diadaptasi untuk menggambar sebuah lingkaran. Langkah-langkah untuk membentuk garis menurut algoritma ini adalah: 1) Tentukan dua titik yang akan dihubungkan dalam pembentukan garis. 2) Tetukan salah satu titik disebelah kiri sebagai titik awal (x 0, y 0 ) dan titik lainnya sebagai titik akhir (x 1, y 1 ). 3) Hitung Δx, Δy, Δ2x, dan 2Δy 2Δx. 4) Hitung parameter p 0 = 2Δy Δx. 5) Untuk setiap x k sepanjang jalur garis, dimulai dengan k = 0 bila p k <0 maka titik selanjutnya (x k +1, y k ) dan p k+1 = p k +2Δy bila tidak maka titik selanjutnya adalah (x k +1, y k +1) dan p k+1 =p k +2Δ-y2Δx. 6) Ulangi langkah nomor 5 untuk menentukan posisi pixel selanjutnya, sampai x=x n. D. Aktivitas Pembelajaran Kegiatan Praktikum 3.1 Membuat Titik Create_Point.java 38

51 public class Create_Point { public void render() { glclear(gl_color_buffer_bit); glloadidentity(); glcolor3f(0.0f, 1.0f, 0.0f); glpointsize(10); glbegin(gl_points); glvertex2f(100, 100); glvertex2f(200, 100); glvertex2f(200, 300); glvertex2f(100, 300); glvertex2f(150, 375); glvertex2f(375, 375); glvertex2f(425, 300); glvertex2f(425, 100); glend(); public static void main(string[] args) { Create_Point main = null; try { System.out.println("Keys:"); System.out.println("esc - Exit"); main = new Create_Point(); main.create(); main.run(); catch (Exception ex) { LOGGER.log(Level.SEVERE, ex.tostring(), ex); finally { if (main!= null) { main.destroy(); private void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(DISPLAY_WIDTH, DISPLAY_HEIGHT)); Display.setFullscreen(false); Display.setTitle("Create Point"); Display.create(); //Keyboard Keyboard.create(); //Mouse Mouse.setGrabbed(false); Mouse.create(); //OpenGL initgl(); resizegl(); //To change body of generated methods, choose Tools Templates. private void run() { while (!Display.isCloseRequested() &&!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { 39

52 if (Display.isVisible()) { render(); else { if (Display.isDirty()) { render(); try { Thread.sleep(100); catch (InterruptedException ex) { Display.update(); Display.sync(60); private void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); private void initgl() { //2D Initialization glclearcolor(0.0f, 0.0f, 0.0f, 0.0f); gldisable(gl_depth_test); gldisable(gl_lighting); private void resizegl() { //2D Scene glviewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); glmatrixmode(gl_projection); glloadidentity(); gluortho2d(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glpushmatrix(); glmatrixmode(gl_modelview); glloadidentity(); glpushmatrix(); Keluaran Program 40

53 Kegiatan Praktikum 3.2 Membuat Garis Create_Line.java public class Create_Line { public void render() { glcolor3f(1.0f, 0.0f, 1.0f); gllinewidth(5); glbegin(gl_lines); glvertex2f(100, 100); glvertex2f(100, 350); glvertex2f(200, 100); glvertex2f(300, 350); glvertex2f(350, 225); glvertex2f(550, 225); glend(); glflush(); public static void main(string[] args) { Create_Line main = null; try { System.out.println("Keys:"); System.out.println("esc - Exit"); main = new Create_Line(); main.create(); main.run(); catch (Exception ex) { LOGGER.log(Level.SEVERE, ex.tostring(), ex); 41

54 finally { if (main!= null) { main.destroy(); private void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(DISPLAY_WIDTH, DISPLAY_HEIGHT)); private void run() {... private void destroy() {... private void initgl() {... private void resizegl() {... Keluaran Program 42

55 E. Latihan Soal Buatlah kode program agar dapat menampilkan seperti sreenshoot di atas dengan menggunakan fungsi-fungsi primitive drawing dengan ketentuan sebagai berikut : Ukuran Window :DisplayMode(800, 600) Fungsi :glbegin(gl_line_loop); Titik awal :glvertex2d(200, 200); F. Rangkuman Objek primitif merupakan bentuk geometri sederhana seperti titik (points), garis (lines) dan bangunan dua dimensi. Dalam grafika computer, representasi citra menggunakan primitive grafik dasar memudahkan untur dirender atau digambar pada layar monitor sebagaimana penggunaan persamaan geometri sederhana. Contoh objek primitif grafika dasar antara lain : titik, garis, kurva, fill area dan text. Objek kompleks dapat dibuat dengan menggunakan kombinasi dari objek primitif ini. Pembentukan titik dilakukan dengan mengkonversi suatu posisi titik koordinat dengan program aplikasi ke dalam suatu operasi tertentu menggunakan output. Garis dibuat dengan menentukan posisi titik diantara titik awal dan akhir dari suatu garis. Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan y adalah koordinat pada layar. 43

56 Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan y adalah koordinat pada layar. Sedangkan untuk membuat garis digunakan perintah lines(x1,y1,x2,y2). Terdapat dua algoritma pembentukan titik dan garis yaitu Algoritma DDA (Digital Differential Analyzer) dan Algoritma Bressenham G. Umpan Balik IPK Hasil Yang Dicapai Rencana Tindak Lanjut Peserta diklat mampu Peserta diklat mampu menerapkan konsep konsep dasar grafika computer untuk menggambar primitif objek dan berapa proses pencapaian kompetensinya Peserta diklat mampu menggunakan perintah-perintah dasar OpenGL untuk menggambar satu bentuk gabungan dari beberapa primiif objek dan berapa besar proses pencapaian kompetensinya Peserta diklat mampu menulis kode program sesuai algoritma pembentukan garis dan lingkaran dan berapa besar proses pencapaian kompetensinya H. Kunci Jawaban PrimitiveGaris.java import java.util.logging.level; 44

57 import java.util.logging.logger; import static komgraf01.komgraf01.display_height; import static komgraf01.komgraf01.display_width; import org.lwjgl.lwjglexception; import org.lwjgl.input.keyboard; import org.lwjgl.input.mouse; import org.lwjgl.opengl.display; import org.lwjgl.opengl.displaymode; import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.gluortho2d; public class PrimitiveGaris { public void draw() { glbegin(gl_line_loop); glvertex2d(200, 200); glvertex2d(600, 200); glvertex2d(200, 325); glvertex2d(600, 325); glvertex2d(200, 450); glvertex2d(600, 450); glend(); public void render() { glclear(gl_color_buffer_bit); glloadidentity(); glcolor3d(1, 0, 0); draw(); glflush(); public void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(800, 600)); Display.setFullscreen(false); Display.setTitle("GAMBAR Primitives-Geometric : GARIS"); Display.create(); 45

58 //OpenGL initgl(); resizegl(); void initgl() { glclearcolor(0.0f, 1.0f, 1.0f, 1.0f); gldisable(gl_depth_test); gldisable(gl_lighting); public void resizegl() { //2D Scene glviewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); glmatrixmode(gl_projection); glloadidentity(); gluortho2d(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glpushmatrix(); glmatrixmode(gl_modelview); glloadidentity(); glpushmatrix(); public void run() { while (!Display.isCloseRequested() &&!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); else { if (Display.isDirty()) { render(); try { Thread.sleep(100); catch (InterruptedException ex) { 46

59 // Display.update(); Display.sync(60); private void update() { public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); public static void main(string[] args) { PrimitiveGaris b1 = new PrimitiveGaris(); try { b1.create(); b1.run(); catch (LWJGLException ex) { Logger.getLogger(PrimitiveGaris.class.getName()).log(Level.SEVERE, null, ex); 47

60 48

61 49

62 50

63 Pemodelan Objek 2 Dimensi A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 4 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat dapat menganalisa pemodelan objek 2 Dimensi melalui transformasi geometri. 2. Melalui praktikum peserta diklat dapat membuat kode program dengan menggunakan operasi transformasi geomentri translasi, penskalaan,dan rotasi. B. Indikator Pencapaian Kompetensi 1. Peserta diklat mampu menerapkan operasi transformasi geometri translasi, penskalaan, dan rotasi 2. Peserta diklat mampu menerapkan operasi-operasi dasar OpenGL untuk membangun objek 2 dimensi 3. Peserta diklat mampu menulis kode program untuk memodelkan objek 2 dimensi melalui proses translasi, penskalaan, dan rotasi C. Uraian Materi Grafika komputer merupakan bidang yang menarik minat banyak orang. Salah satu sub bagian dari grafika komputer adalah pemodelan objek (object modelling). Dalam pemodelan objek dua dimensi (2D), berbagai objek dapat dimodelkan menurut kondisi tertentu. Objek yang dimodelkan itu perlu dimodifikasi. Pemodifikasian objek ini dapat dilakukan dengan melakukan berbagai operasi fungsi atau operasi transformasi geometri. Transformasi yang dibuat dapat berupa transformasi dasar ataupun gabungan dari berbagai transformasi geometri. Contoh transformasi geometri adalah translasi, penskalaan, putaran (rotasi), potongan dan gabungan. Transformasi ini dikenal 51

64 dengan istilah transformasi affine. Pada dasarnya proses transformasi ini adalah proses memindahkan objek tanpa merusak bentuk dari objek itu sendiri. 1. Definisi Objek Grafik 2 Dimensi Pada sub topik ini peserta akan mempelajari objek grafik 2 dimensi dan penerapannya dalam aplikasi sederhana. Titik 2D Titik 2D mempunyai 2 nilai, yaitu x dan y yang menyatakan jarak horizontal dan vertikal dari titik pusat sumbu koordinat (0,0). Polyline Polyline adalah suatu fungsi yang digunakan untuk menggambarkan objek 2D dimana setiap titik pada objek mulai titik ke 0, 1, 2,3,..., n dihubungkan dengan garis lurus sehingga membentuk kurva terbuka. 2. Pengenalan Operasi Transformasi Geometri Pada sub topik ini akan dipelajari Operasi Transformasi Geometri dan penerapannya dalam aplikasi sederhana. 3.1 Operasi Translasi Transformasi translasi merupakan suatu operasi yang menyebabkan perpindahan objek 2D dari satu tempat ke tempat yang lain. Perubahan ini berlaku dalam arah yang sejajar dengan sumbu X dan sumbu Y. Gambar 3 Proses translasi suatu objek Translasi dilakukan dengan penambahan translasi pada suatu titik koordinat dengan translasi vector, yaitu (tx,ty), dimana tx adalah translasi menurut sumbu x dan ty adalah translasi menurut sumbu y. Koordinat baru titik yang ditranslasi dapat diperoleh dengan menggunakan rumus : 52

65 Translasi adalah transformasi dengan bentuk yang tetap, memindahkan objek apa adanya. Setiap titik dari objek akan ditranslasikan dengan besaran yang sama.dalam operasi translasi, setiap titik pada suatu entitas yang ditranslasi bergerak dengan jarak yang sama. Pergerakan tersebut dapat berlaku dalam arah sumbu X saja, atau dalam arah sumbu Y saja atau keduanya. 3.2 Operasi Rotasi Rotasi artinya berputar. Ketika suatu bentuk benda sengaja diputar maka perlu ditentukan pusat dan besar sudut putar, sedangkan translasi adalah pergeseran. Benda yang telah berpindah dari pusatnya berarti mengalami pergeseran, yaitu apakah dia bergerak maju mundur ataupun menuju ke atas bawah. Rotasi berbeda dengan translasi karena perubahan posisi pada translasi tidak mengacu pada suatu titik tertentu. Keistimewaan dari rotasi adalah jarak antara titik pusat dengan masing-masing bagian dari obyek yang diputar akan selalu tetap, seberapa jauh pun obyek itu diputar. Gambar 4 Proses rotasi dari sutu objek Pada sebuah aplikasi yang menggunakan grafik vektor dan grafik bitmap, rotasi dan translasi sangat di butuhkan. Untuk melakukan kedua proses ini bisa menggunakan source code yang tersedia yaitu: gltranslatef (x, y, z) digunakan untuk merubah titik posisi awal sumbu koordinat menuju posisi yang ditentukan sesuai koordinat x,y, dan z. 53

66 glrotatef (angle, x, y, z) digunakan untuk memutar suatu bidang pada sudut tertentu (angle). 3.3 Operasi Skala Penskalaan adalah suatu operasi yang membuat suatu objek berubah ukurannya baik mengecil ataupun membesar secara seragam atau tidak seragam tergantung pada faktor penskalaan (scalling factor) yaitu (sx,sy) yang diberikan. sx adalah faktor penskalaan menurut sumbu x dan sy faktor penskalaan menurut sumbu y. Koordinat baru diperoleh dengan x = x + sx (x,y) = titik asal sebelum diskala y = y + sy (x,y ) = titik setelah diskala Nilai lebih dari 1 menyebabkan objek diperbesar, sebaliknya bila nilai lebih kecil dari 1, maka objek akan diperkecil. Bila (sx,sy) mempunyai nilai yang sama, maka skala disebut dengan uniform scalling. Gambar 5 Proses skala dari sutu objek Perintah yang terakhir yaitu glscale{f,d(typex,typey,typez) digunakan untuk mengalikan martiks yang sedang aktif dengan matriks yang memperbesar, memperkecil atau merefleksikan objek. Masing-masing koordinat x, y, z dari setiap titik pada objek dikalikan dengan argumen x, y, z. Perintah glscale merupakan satu-satunya perintah transformasi modelling yang mengubah ukuran objek. Jika nilai yang diberikan lebih besar dari 1.0 maka objek akan diperbesar, jika nilai yang diberikan kurang dari 1.0 maka objek akan diperkecil, dan jika nilai yang diberikan negatif, maka objek akan direfleksikan (dicerminkan). 54

67 D. Aktivitas Pembelajaran Kegiatan Praktikum 4.1 Translasi Membuat persegi panjang dengan warna merah. Kemudian hasil translasi(geser) sebesar 90 terhadap sumbu Y adalah persegi panjang dengan warna kuning dan ditranslasi(geser) sebesar 180 terhadap sumbu X dan 90 terhadap sumbu Y adalah persegi panjang warna biru. Translasi.java import java.util.logging.level; import java.util.logging.logger; import static komgraf01.komgraf01.display_height; import static komgraf01.komgraf01.display_width; import org.lwjgl.lwjglexception; import org.lwjgl.input.keyboard; import org.lwjgl.input.mouse; import org.lwjgl.opengl.display; import org.lwjgl.opengl.displaymode; import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.gluortho2d; public class Translasi { public void draw(){ public void render() { glclear(gl_color_buffer_bit); glloadidentity(); 55

68 glcolor3d(1, 0, 0); buatkotak(); gltranslated(0,90, 0); glcolor3f(1, 1, 0); buatkotak(); gltranslated(90,180, 0); glcolor3f(0, 0, 1); buatkotak(); glflush(); public void buatkotak() { //membuat kotak glbegin(gl_polygon); glvertex2f(250, 120); //titik kiri bawah glvertex2f(450, 120); //titik kanan bawah glvertex2f(450, 200); //titik kanan atas glvertex2f(250, 200); //titik kiri atas glend(); public void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(800, 600)); Display.setFullscreen(false); Display.setTitle("Proses Rotasi"); Display.create(); initgl(); resizegl(); void initgl() { glclearcolor(0.0f, 1.0f, 1.0f, 1.0f); gldisable(gl_depth_test); gldisable(gl_lighting); public void resizegl() { glviewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); glmatrixmode(gl_projection); glloadidentity(); gluortho2d(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glpushmatrix(); glmatrixmode(gl_modelview); glloadidentity(); glpushmatrix(); public void run() { while (!Display.isCloseRequested() &&!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); else { if (Display.isDirty()) { render(); try { Thread.sleep(100); 56

69 catch (InterruptedException ex) { Display.update(); Display.sync(60); private void update() { public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); public static void main(string[] args) { Rotasi b1 = new Rotasi(); try { b1.create(); b1.run(); catch (LWJGLException ex) { Logger.getLogger(Rotasi.class.getName()).log(Level.SEVERE, null, ex); Kegiatan Praktikum 4.2 Rotasi Membuat persegi panjang dengan warna merah. Kemudian hasil rotasi(diputar) sebesar 15 derajat adalah persegi panjang dengan warna kuning dan di rotasi(diputar) kembali sebesar -45 derajat adalah persegi panjang warna biru. 57

70 Rotasi.java import java.util.logging.level; import java.util.logging.logger; import static komgraf01.komgraf01.display_height; import static komgraf01.komgraf01.display_width; import org.lwjgl.lwjglexception; import org.lwjgl.input.keyboard; import org.lwjgl.input.mouse; import org.lwjgl.opengl.display; import org.lwjgl.opengl.displaymode; import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.gluortho2d; public class Rotasi { public void draw(){ //membuat titik public void render() { glclear(gl_color_buffer_bit); glloadidentity(); glcolor3d(1, 0, 0); buatkotak(); glrotated(15, 0, 0, 1.0); glcolor3f(1, 1, 0); buatkotak(); glrotated(-45, 0, 0, 1.0); glcolor3f(0, 0, 1); buatkotak(); glflush(); public void buatkotak() { //membuat kotak glbegin(gl_polygon); 58

71 glvertex2f(300, 300); //titik kiri bawah glvertex2f(500, 300); //titik kanan bawah glvertex2f(500, 360); //titik kanan atas glvertex2f(300, 360); //titik kiri atas glend(); public void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(800, 600)); Display.setFullscreen(false); Display.setTitle("Proses Rotasi"); Display.create(); //OpenGL initgl(); resizegl(); void initgl() { glclearcolor(0.0f, 1.0f, 1.0f, 1.0f); gldisable(gl_depth_test); gldisable(gl_lighting); public void resizegl() { glviewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); glmatrixmode(gl_projection); glloadidentity(); gluortho2d(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glpushmatrix(); glmatrixmode(gl_modelview); glloadidentity(); glpushmatrix(); public void run() { while (!Display.isCloseRequested() &&!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); else { if (Display.isDirty()) { render(); try { Thread.sleep(100); catch (InterruptedException ex) { Display.update(); Display.sync(60); private void update() { public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); 59

72 public static void main(string[] args) { Rotasi b1 = new Rotasi(); try { b1.create(); b1.run(); catch (LWJGLException ex) { Logger.getLogger(Rotasi.class.getName()).log(Level.SEVERE, null, ex); Kegiatan Praktikum 4.3 Skala Membuat persegi panjang dengan warna merah. Kemudian hasil di skala sebesar x = 2, dan y=2 adalah menjadi persegi panjang dengan warna biru. Skala.java import java.util.logging.level; import java.util.logging.logger; import static komgraf01.komgraf01.display_height; import static komgraf01.komgraf01.display_width; import org.lwjgl.lwjglexception; import org.lwjgl.input.keyboard; import org.lwjgl.input.mouse; import org.lwjgl.opengl.display; import org.lwjgl.opengl.displaymode; import static org.lwjgl.opengl.gl11.*; 60

73 import static org.lwjgl.util.glu.glu.gluortho2d; public class Skala { public void draw(){ //membuat titik public void render() { glclear(gl_color_buffer_bit); glloadidentity(); glcolor3d(1, 0, 0); buatkotak(); glscaled(2, 2, 0); glcolor3d(0, 0, 1); buatkotak(); glflush(); public void buatkotak() { //membuat kotak glbegin(gl_polygon); glvertex2f(250, 120); //titik kiri bawah glvertex2f(450, 120); //titik kanan bawah glvertex2f(450, 200); //titik kanan atas glvertex2f(250, 200); //titik kiri atas glend(); public void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(800, 600)); Display.setFullscreen(false); Display.setTitle("Proses SKALA"); Display.create(); //OpenGL initgl(); resizegl(); void initgl() { glclearcolor(0.0f, 1.0f, 1.0f, 1.0f); gldisable(gl_depth_test); gldisable(gl_lighting); public void resizegl() { glviewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); glmatrixmode(gl_projection); glloadidentity(); gluortho2d(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glpushmatrix(); glmatrixmode(gl_modelview); glloadidentity(); glpushmatrix(); public void run() { while (!Display.isCloseRequested() && 61

74 !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); else { if (Display.isDirty()) { render(); try { Thread.sleep(100); catch (InterruptedException ex) { Display.update(); Display.sync(60); private void update() { public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); public static void main(string[] args) { Skala b1 = new Skala(); try { b1.create(); b1.run(); catch (LWJGLException ex) { Logger.getLogger(Skala.class.getName()).log(Level.SEVERE, null, ex); E. Latihan Soal 1. Buatlah aplikasi sederhana Objek 2 Dimensi seperti gambar dibawah ini 62

75 F. Rangkuman Translasi adalah proses transformasi dengan bentuk yang tetap, memindahkan objek apa adanya. Setiap titik dari objek akan ditranslasikan dengan besaran yang sama. Dalam operasi translasi, setiap titik pada suatu entitas yang ditranslasi bergerak dalam jarak yang sama. Pergerakan tersebut dapat berlaku dalam arah sumbu X saja, atau dalam arah sumbu Y saja atau keduanya. Rotasi artinya berputar. Ketika suatu bentuk benda sengaja diputar maka perlu ditentukan pusat dan besar sudut putar. sedangkan translasi adalah pergeseran. Benda yang telah berpindah dari pusatnya berarti mengalami pergeseran, yaitu apakah dia bergerak maju mundur ataupun menuju ke atas bawah. Penskalaan adalah suatu operasi yang membuat suatu objek berubah ukurannya baik menjadi mengecil ataupun membesar secara seragam atau tidak seragam tergantung pada faktor penskalaan (scalling factor) yaitu (sx,sy) yang diberikan. sx adalah faktor penskalaan menurut sumbu x dan sy faktor penskalaan menurut sumbu y. G. Umpan Balik IPK Hasil Yang Dicapai Rencana Tindak Lanjut Peserta diklat mampu menerapkan operasi transformasi geometri translasi, penskalaan, dan rotasi dan berapa proses pencapaian kompetensinya Peserta diklat mampu menerapkan operasi-operasi dasar OpenGL untuk membangun objek 2 dimensi dan berapa besar proses pencapaian kompetensinya Peserta diklat mampu menulis kode program untuk memodelkan 63

76 objek 2 dimensi melalui proses translasi, penskalaan, dan rotasi dan berapa besar proses pencapaian kompetensinya H. Kunci Jawaban Jawaban No 1: Tugas2D.java import java.util.logging.level; import java.util.logging.logger; import static komgraf01.komgraf01.display_height; import static komgraf01.komgraf01.display_width; import org.lwjgl.lwjglexception; import org.lwjgl.input.keyboard; import org.lwjgl.input.mouse; import org.lwjgl.opengl.display; import org.lwjgl.opengl.displaymode; import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.gluortho2d; public class Tugas2D { private int width=600; private int height=600; public void draw(){ //membuat titik public void render() { glmatrixmode(gl_projection); glloadidentity(); gluortho2d(0, width, 0, height); glmatrixmode(gl_modelview); glloadidentity(); glclear(gl_color_buffer_bit); 64

77 buatsegitiga(); glflush(); public void buatsegitiga() { //membuat triangle glbegin(gl_triangles); glcolor3f(1.0f, 0.0f, 0.0f); glvertex2f(width / 4.0f, height * 3.0f / 4.0f); glcolor3f(0.0f, 1.0f, 0.0f); glvertex2f(width / 4.0f, height / 4.0f); // Set color to violet glcolor3f(1.0f, 0.0f, 1.0f); glvertex2f(width * 3.0f / 4.0f, height / 4.0f); // Set color to blue glcolor3f(0.0f, 0.0f, 1.0f); // Top triangle glvertex2f(width / 4.0f, height * 3.0f / 4.0f); glvertex2f(width * 3.0f / 4.0f, height * 3.0f / 4.0f); glvertex2f(width * 3.0f / 4.0f, height / 4.0f); glend(); public void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(600, 600)); Display.setFullscreen(false); Display.setTitle("Tugas 2 Dimensi"); Display.create(); //OpenGL initgl(); resizegl(); void initgl() { glclearcolor(0.0f, 1.0f, 1.0f, 1.0f); gldisable(gl_depth_test); gldisable(gl_lighting); public void resizegl() { glviewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); 65

78 glmatrixmode(gl_projection); glloadidentity(); gluortho2d(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glpushmatrix(); glmatrixmode(gl_modelview); glloadidentity(); glpushmatrix(); public void run() { while (!Display.isCloseRequested() &&!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); else { if (Display.isDirty()) { render(); try { Thread.sleep(100); catch (InterruptedException ex) { Display.update(); Display.sync(60); private void update() { public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); public static void main(string[] args) { Tugas2D b1 = new Tugas2D(); try { 66

79 b1.create(); b1.run(); catch (LWJGLException ex) { Logger.getLogger(Tugas2D.class.getName()).log(Level.SEVERE, null, ex); 67

80 68

81 69

82 70

83 PEMODELAN OBJEK 3 DIMENSI Pembuatan Objek 3 Dimensi A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 5 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat dapat menganalisis sistem koordinat 3 dimensi dan pembuatan objek 3 dimensi 2. Melalui praktikum peserta diklat dapat membuat kode program untuk melakukakan operasi transformasi pada objek 3 dimensi. B. Indikator Pencapaian Kompetensi 1. Peserta diklat mampu memahami sistem koordinat dan struktur objek 3 dimensi 2. Peserta diklat mampu menerapkan operasi-operasi dasar OpenGL untuk membangun objek 3 dimensi 3. Peserta diklat mampu menulis kode program untuk memodelkan objek 3 dimensi melalui proses translasi, penskalaan, dan rotasi C. Uraian Materi Pembeda objek 2 dimensi dan 3 dimensi adalah kedalaman. Kedalaman didefinisikan sebagai jarak antara viewer terhadap benda yang dia lihat. Ini berarti berbeda dengan objek 2 dimensi yang hanya menggunakan 2 ukuran, yaitu panjang dan lebar, maka 3 dimensi menggunakan 3 ukuran, yaitu panjang, lebar dan kedalaman. Secara geometri ketiga ukuran tersebut disimbolkan dengan sumbu x, y, dan z. 1. Sistem Koordinat Salah satu sistem koordinat yang dikenal adalah sistem koordinat kartesian yang digunakan untuk membedakan lokasi atau posisi sembarang titik atau objek dengan titik atau objek yang lain. Sistem koordinat kartesian terdiri atas sistem koordinat kartesian 2 dimensi dan 71

84 sistem koordinat kartesian 3 dimensi.dalam sistem koordinat 3 dimensi terdapat satu sumbu lain selain sumbu x dan sumbu y, yaitu sumbu z yang arahnya tegak lurus terhadap sumbu x dan sumbu y. Hadirnya sumbu z menyebabkan sistem koordinat ini menjadi lebih hidup karena memunculkan efek jauh dekat. Untuk lebih jelasnya, lihat pada gambar di bawah ini : Gambar 6 Koordinat 2. Pemodelan Objek 3 Dimensi Benda tiga dimensi disusun dari sekumpulan permukaan objek. Gambar di bawah memberikan contoh bagaimana permukaan objek digunakan untuk menyusun benda tiga dimensi. Gambar 7 Surface Permukaan objek atau surface dapat dibuat dari rangkaian Polygon. Polygon adalah bentuk yang disusun dari serangkaian garis yang terhubung satu dengan yang lain dan berbentuk kurva tertutup sehingga membentuk sebuah objek gambar. Titik sudut dari Polygon disebut vertex sedangkan garis penyusun Polygon disebut edge. 72

85 Gambar 8 Vertex dan Edge Polygon digambar dengan menggambar masing-masing edge dengan setiap edge merupakan pasangan dari kecuali untuk edge terakhir merupakan pasangan dari. Bentuk polygon yang paling tepat digunakan untuk membuat permukaan benda tiga dimensii adalah polygon segitiga (triangle). Hal ini disebabkan polygon segitiga akan selalu berada dalam keadaan planar (datar) sementara polygon dengan vertex lebih dari 3 dapat berada dalam kondisi non-planar karena salah satu vertex tidak berada di lokasi yang sejajar. Satu hal yang harus diperhatikan pada saat menggunakan polygon segitiga adalah winding. Winding adalah urutan dan arah vertex-vertex penyusun polygon. Winding menganggap bahwa arah vertex berlawanan jarum jam sebagai tampak depan sedangkan arah vertex searah jarum jam dianggap sebagai bagian belakang benda. D. Aktivitas Pembelajaran Pembuatan kode program untuk pembuatan objek 3 dimensi dirancang dengan melibatkan beberapa file java untuk memudahkan dalam pengaturan dan operasi transformasi geometri. Ketikkan script program java berikut untuk mendapatkan keluaran 3 dimensi yang diharapkan. 73

86 Buat laporan berdasarkan script program dengan menjelaskan fungsi-fungsi dari masing-masing perintah dan argument yang terdapat dalam script yang dibutuhkan untuk membangun objek 3 dimensi sesuai keluaran yang tampak. Kegiatan Praktikum 5.1 Keluaran Program yang diharapkan Perancangan class diagram 74

87 CGApplication lwjgl.opengl PrimitiveDrawing3D -x : int -y : int -z : int +gltriangle() : void +main() : void CfgApplication.java import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.*; import java.awt.font; import org.lwjgl.lwjglexception; import org.lwjgl.sys; import org.lwjgl.input.keyboard; import org.lwjgl.opengl.display; import org.lwjgl.opengl.displaymode; public abstract class CfgApplication { protected long lastframe; protected int fps; protected long last; protected String windowtitle = ""; protected int width; protected int height; protected boolean fullscreen; protected boolean vsync; public final int DEFAULT_FONT_SIZE = 14; protected boolean showfps; protected int oldfps; protected int activefonttextureid; public void start(int width, int height, boolean fullscreen, boolean vsync, boolean showfps, String windowtitle) { this.windowtitle = windowtitle; this.height = height; this.width = width; this.fullscreen = fullscreen; this.vsync = vsync; this.showfps = showfps; try { 75

88 { createwindow(); init(); while (!Display.isCloseRequested() &&!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) render(); Display.update(); deinit(); Display.destroy(); catch (Exception e) { e.printstacktrace(); System.exit(0); public abstract void render(); public abstract void deinit(); private void createwindow() throws LWJGLException { Display.setTitle(windowTitle); Display.setFullscreen(fullscreen); Display.setVSyncEnabled(vsync); DisplayMode displaymode = null; DisplayMode d[] = Display.getAvailableDisplayModes(); for (int i = 0; i < d.length; i++) { if (d[i].getwidth() == width && d[i].getheight() == height && d[i].getbitsperpixel() == 32) { displaymode = d[i]; break; Display.setDisplayMode(displayMode); Display.create(); private void setorthomode() { glviewport(0, 0, width, height); glmatrixmode(gl_projection); glpushmatrix(); glloadidentity(); gluortho2d(0, width, height, 0); glmatrixmode(gl_modelview); glpushmatrix(); glloadidentity(); private void unsetorthomode() { glpopmatrix(); glmatrixmode(gl_projection); glpopmatrix(); glmatrixmode(gl_modelview); public abstract void init(); PrimitiveDrawing3D.java import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.*; import org.lwjgl.input.keyboard; 76

89 import setting.cgapplication; public class PrimitiveDrawing3D extends CGApplication { private boolean wireframe = false; private boolean pressed = public void init() public void update(int delta) { togglewireframe(); public void togglewireframe() { if (Keyboard.isKeyDown(Keyboard.KEY_R)) { if (!pressed) { wireframe =!wireframe; pressed = true; else { pressed = public void render() { glviewport(0, 0, width, height); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45.0f, width / height, 1.0f, 100.0f); glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glclearcolor(0.0f, 0.0f, 0.0f, 0.0f); if (wireframe) { glpolygonmode(gl_front_and_back, GL_LINE); else { glpolygonmode(gl_front_and_back, GL_FILL); glbegin(gl_triangles); // 4-side of pyramid glcolor3f(0.0f, 1.0f, 0.0f); glvertex3f(-2, -2, -10); glvertex3f(2, -2, -10); glvertex3f(0, 4, -12); glcolor3f(0.0f, 1.0f, 1.0f); glvertex3f(2, -2, -10); glvertex3f(2, -2, -14); glvertex3f(0, 4, -12); glcolor3f(1.0f, 1.0f, 0.0f); glvertex3f(2, -2, -14); glvertex3f(-2, -2, -14); glvertex3f(0, 4, -12); glcolor3f(0.0f, 0.0f, 1.0f); 77

90 glvertex3f(-2, -2, -10); glvertex3f(-2, -2, -14); glvertex3f(0, 4, -12); // Bottom of pyramid glcolor3f(1.0f, 0.0f, 0.0f); glvertex3f(-2, -2, -10); glvertex3f(2, -2, -10); glvertex3f(-2, -2, -14); glcolor3f(1.0f, 0.0f, 0.5f); glvertex3f(2, -2, -10); glvertex3f(2, -2, -14); glvertex3f(-2, -2, -14); glend(); rendertext(); private void rendertext() { drawstring(180, height - 25, "Primitive Drawing : 4-Sisi Piramid Triangles."); drawstring(200,height-35* getdefaultfont().getlineheight(), "Tekann 'R' untuk Gambar public void deinit() { public static void main(string[] args) { PrimitiveDrawing3D app = new PrimitiveDrawing3D(); app.start(800, 600, false, false, true, "3D Primitives"); E. Latihan Soal 1. Untuk menggambarkan translasi suatu objek berupa segitiga dengan koordinat A(3,4) B(2,1) dan C(4,1) dengan tx,ty(2,5), tentukan koordinat yang barunya? 78

91 2. Untuk menggambarkan skala suatu objek berupa segempat dengan koordinat A(5,2) B(2,2) C(2,4) dan D(5,4) dengan skala faktor (1,2) tentukan koordinat yang barunya? F. Rangkuman Pembeda objek 2 dimensi dan 3 dimensi adalah kedalaman. Kedalaman didefinisikan sebagai jarak antara viewer terhadap benda yang dilihat. Ini berarti berbeda dengan objek 2 dimensi yang hanya menggunakan 2 ukuran, yaitu panjang dan lebar, maka objek 3 dimensi menggunakan 3 ukuran, yaitu panjang, lebar dan kedalaman. Secara geometri ketiga ukuran tersebut disimbolkan dengan sumbu x, y, dan z. Sebuah benda tiga dimensi dapat disusun dengan menghubungkan sejumlah vertex. Kumpulan vertex yang saling terhubung tersebut disebut sebagai wireframe atau kerangka, sedangkan benda yang disusun dari kumpulan titik dan permukaan tersebut disebut sebagai mesh. Transformasi pada dunia 3 dimensi, pada dasarnya sama dengan transformasi pada 2 dimensi, hanya pada 3 dimensi kita juga memperhitungkan sumbu 79

92 Z. Sama seperti pada 2 dimensi, ada tiga transformasi dasar yang dapat dilakukan yaitu translasi, penskalaan, rotasi. Perbedaannya adalah pada objek 3 dimensi proses transformasinya dilakukan dengan mempertimbangkan koordinat yang merupakan besarnya kedalaman dari objek. G. Umpan Balik IPK Hasil Yang Dicapai Rencana Tindak Lanjut Peserta diklat mampu memahami sistem koordinat dan struktur objek 3 dimensi dan berapa proses pencapaian kompetensinya Peserta diklat mampu menerapkan operasi-operasi dasar OpenGL untuk membangun objek 3 dimensi dan berapa besar proses pencapaian kompetensinya Peserta diklat mampu menulis kode program untuk memodelkan objek 3 dimensi melalui proses translasi, penskalaan, dan rotasi dan berapa besar proses pencapaian kompetensinya H. Kunci Jawaban Jawaban no 1 A = (3,4) B = (2,1) C = (2,5) Vektor (V) = (2,5) Rumus : ta x = x + tx y = y + ty 80

93 A = (3,4) V = (2,5) X = x + tx = = 5 Y = y + ty = = 9 A = (5,9) B = (2,1) V = (2,5) X = x + tx = = 4 Y = y + ty = = 6 B = (4,6) C = (4,1) V = (2,5) X = x + tx = = 6 Y = y + ty = = 6 C = (6,6) Dengan demikian hasil translasi segitiga dengan koordinat A (5,9) B (4,6) C (6,6). Segitiga yang baru sama bentuknya dengan segitiga yang lama. Berikut gambar translasi setelah perhitungan Jawaban no 2 A = (5,2) B = (2,2) C = (2,4) D = (5,4) Skala faktor = (1,2) Rumus: x = x. sx y = y. sy A = (5,2) Skala faktor = (1,2) X = X. Sx = 5. 1 = 5 Y = Y. Sy = 2. 2 = 4 A = (5,4) B = (2,2) Skala faktor = (1,2) X = X. Sx = 2. 1 = 2 C = (2,4) Skala faktor = (1,2) X = X. Sx = 2. 1 = 2 Y = Y. Sy = 4. 2 = 8 C = (2,8) D = (5,4) Skala faktor = (1,2) X = X. Sx = 5. 1 = 5 81

94 Y = Y. Sy = 2. 2 = 4 B = (2,4) Y = Y. Sy = 4. 2 = 8 D = (5,8) Dengan demikian hasil skala persegi panjang dengan koordinat A = (5,4), B = (2,4), C = (2,8), D = (5,8). Persegi panjang yang baru sama bentuknya dengan persegi panjang yang lama.berikut gambar koordinat setelah proses rotasi. 82

95 83

96 84

97 embuatan Teksture A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 6 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat dapat menganalisis penggunaan teksture dalam objek 3 dimensi. 2. Melalui praktikum peserta diklat dapat menulis kode program pemasangan teksture dalam objel 3 dimensi B. Indikator Pencapaian Kompetensi 1. Peserta diklat dapat memahami jenis-jenis tekture dalam OpenGL 2. Peserta diklat mampu menulis kode program dengan memanfaatkan jenisjenis teksture yang dalam library OpenGL C. Uraian Materi 1. Pengantar Texture Pemetaan Tekstur menurut Chua Hock-Chuan (2012) didefinisikan sebagai berikut : Pemetaan Tekstur adalah salah satu langkah pengembangan pertama dalam membuat gambar benda tiga dimensi yang lebih menarik dan lebih kompleks. Secara umum, pemetaan tekstur adalah proses melukis sebuah gambar ke permukaan dalam sebuah model. Gambar yang telah diberi texture itu bisa menjadi sangat kompleks tetapi proses pemetaan teksture pada gambar kompleks persis sama dengan proses pemetaan teksture pada gambar sederhana. Penggunaan pemetaan tekstur pada bentuk yang cukup sederhana dapat membuat objek yang sederhana menjadi lebih realistis. Misalnya, dinding planar yang diberi tekstur batu dan dipetakan ke model untuk gambar yang sangat meyakinkan dari tiga-dimensi dinding batu (Contohnya, game check out 3D merupakan contoh permainan komputer yang menggunakan texture mapping). 85

98 Gambar 9 Penggunaan teksture dalam game check out 3D Dengan memanfaatkan proses pemetaan tekstur memungkinkan kita untuk memberikan fitur tekstur yang ada pada aplikasi grafika computer pada permukaan gambar yang kita pilih dan kemudian memungkinkan kita melihat hasil dari perspektif yang berbeda. Gambar dengan resolusi yang lebih tinggi akan menghasilkan hasil yang lebih baik bila dilihat dari jarak kecil (karena daerah permukaan yang dilihat tidak berubah, gambar resolusi tinggi menyediakan lebih banyak data untuk pemetaan pada model tersebut). Untuk melihat contoh penurunan kualitas gambar, dapat dilihat dalam berbagai contoh permainan 3D terutama dengan mengamati bagian datar yang memiliki texturenya untuk mendapatkan efek realistis nyata (dengan asumsi tidak memiliki kartu video/vga yang memiliki texture mapping pada hardware). 2. Konsep Texture mapping Texturing merupakan proses mewarnai, memberi tekstur, atau memberi efek material pada sebuah model 3D. Texture mapping adalah teknik shading untuk pengolahan gambar dengan memetakan sebuah fungsi pada permukaan tiga dimensi dalam scene. Texture mapping merupakan teknik pemetaan sebuah tekstur pada pola gambar wireframe, dimana wireframe yang telah dibuat akan ditampilkan memiliki kulit luar seperti tekstur yang diinginkan. Fungsi yang dipetakan mencakup satu dimensi, dua dimensi, dan tiga dimensi dan dapat digambarkan sebagai array atau fungsi matematika atau gambar. Beberapa contoh teknik dalam texture mapping adalah sebagai berikut : Bump mapping umumnya digunakan untuk memperjelas karakteristik permukaan yang bergelombang. Bump mapping merupakan suatu proses 86

99 dimana tekstur diaplikasikan pada suatu permukaan dalam sebuah program grafis komputer tiga dimensi (3D) untuk membuat detail yang lebih baik pada permukaan tersebut. Bump map biasanya digunakan untuk menambahkan detail pada suatu permukaan, seperti benjolan, bubungan, goresan dan detail lainnya yang mempengaruhi kemulusan suatu permukaan. Penggunaan pemetaan (mapping) ini memungkinkan objek yang dibuat oleh program komputer grafis biasanya dibentuk melalui penggunaan tardisional bump map, normal, atau parallax map. Transparency mapping untuk mengatur intensitas cahaya permukaan tembus pandang. Pemetaan Transparansi adalah metode lain menggunakan Bitmap untuk membuat bahan. Perbedaannya adalah metode ini adalah menggunakan alpha channel untuk menyingkirkan bagian yang tidak diinginkan dari Bitmap, hanya menyimpan bagian yang tertutup oleh alpha channel. Proses ini disebut masking. Specularity mapping untuk mengubah kehalusan permukaan Illumination maaping untuk memodelkan distribusi cahaya yang datang dari berbagai arah Geometrical Mapping adalah salah satu bagian penting dari texture mapping. Geometrical mapping secara keseluruhan ditentukan dengan dengan transformasi tiga dimensi terhadap kamera, Transformasi model yang menggambarkan geometri scene dan pemberian parameter pada permukaan dengan tujuan memetakan tekstur ke permukaan. Gambar 10 Teknik pemetaan teksture 87

100 3. Jenis - Jenis Texture pada OpenGl GL_TEXTURE_1D : Gambar pada texture ini semuanya 1 dimensi.mempunyai lebar tetapi tidak memiliki tinggi atau kedalaman GL_TEXTURE_2D : Gambar pada texture ini semuanya 2 dimensi.mempunyai lebar dan tinggi tetapi tidak memiliki kedalaman GL_TEXTURE_3D : Gambar pada texture ini semuanya 3 dimensi.mempunyai lebar, tinggi dan kedalaman. GL_TEXTURE_RECTANGLE : Gambar dalam teksture ini 2 dimensi (hanya satu gambar,tidak memiliki multimapping).koordinat teksture digunakan untuk teksture yang tidak dengan titik yang sebenarnya. GL_TEXTURE_BUFFER: Gambar dalam teksture ini 1 dimensi (hanya satu gambar,tidak memiliki multimapping).penyimpanan untuk data ini dating dari sebuah buffer object. GL_TEXTURE_CUBE_MAP : Terdapat 6 sisi dari gambar 2D,dan semua memiliki ukuran yang sama GL_TEXTURE_1D_ARRAY : Gambar di teksture ini semuanya 1 dimensi.bagaimanapun terdiri dari banyak set dari 1 gambar dimensi, semuanya dengan satu teksture. Panjang array adalah bagian dari ukuran teksture GL_TEXTURE_2D_ARRAY : Gambar di teksture ini semuanya 2 dimensi.bagaimanapun terdiri dari banyak set dari 2 gambar dimensi, semuanya dengan satu teksture. Panjang array adalah bagian dari ukuran teksture. GL_TEXTURE_CUBE_MAP_ARRAY : Gambar di teksture ini semuanya peta kubus. Terdiri dari banyak set peta kubus,semuanya dengan satu teksture.panjang array * 6 (angka dari sisi kubus) adalah bagian dari ukuran teksture GL_TEXTURE_2D_MULTISAMPLE : Gambar di teksture ini 2 dimensi (hanya satu gambar,tidak ada multimapping).kebanyakan pixel di gambar ini terdiri dari banyak contoh di dalamnya hanya satu nilai GL_TEXTURE_2D_MULTISAMPLE_ARRAY : Kombinasi 2D array dan jenis 2D multisample.tidak ada multimapping 88

101 D. Aktivitas Pembelajaran Pembuatan kode program untuk texture terhadapa objek 3 dimensi dirancang dengan melibatkan beberapa file java untuk memudahkan dalam pengaturan dan operasi transformasi geometri. Kegiatan Praktikum 6.1 Keluaran Program Perancangan class diagram 89

102 CGApplication lwjgl.opengl TextureMappingTransformasi -Camera : CGApplication = cmr -Texture : CGApplication = textr +loadimage() : void +main() : void Texture -width : int -height : int +getwidth() : int +gethight() : int Texture.java import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.*; import java.awt.font; import org.lwjgl.lwjglexception; import org.lwjgl.sys; import org.lwjgl.input.keyboard; import org.lwjgl.opengl.display; import org.lwjgl.opengl.displaymode; public abstract class CGApplication { protected long lastframe; protected int fps; protected long last; protected String windowtitle = ""; protected int width; protected int height; protected boolean fullscreen; protected boolean vsync; public final int DEFAULT_FONT_SIZE = 14; protected boolean showfps; protected int oldfps; protected int activefonttextureid; public void start(int width, int height, boolean fullscreen, boolean vsync, boolean showfps, String windowtitle) { this.windowtitle = windowtitle; this.height = height; this.width = width; this.fullscreen = fullscreen; this.vsync = vsync; this.showfps = showfps; try { 90

103 { createwindow(); init(); while (!Display.isCloseRequested() &&!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) render(); Display.update(); deinit(); Display.destroy(); catch (Exception e) { e.printstacktrace(); System.exit(0); public abstract void render(); public abstract void deinit(); private void createwindow() throws LWJGLException { Display.setTitle(windowTitle); Display.setFullscreen(fullscreen); Display.setVSyncEnabled(vsync); DisplayMode displaymode = null; DisplayMode d[] = Display.getAvailableDisplayModes(); for (int i = 0; i < d.length; i++) { if (d[i].getwidth() == width && d[i].getheight() == height && d[i].getbitsperpixel() == 32) { displaymode = d[i]; break; Display.setDisplayMode(displayMode); Display.create(); private void setorthomode() { glviewport(0, 0, width, height); glmatrixmode(gl_projection); glpushmatrix(); glloadidentity(); gluortho2d(0, width, height, 0); glmatrixmode(gl_modelview); glpushmatrix(); glloadidentity(); private void unsetorthomode() { glpopmatrix(); glmatrixmode(gl_projection); glpopmatrix(); glmatrixmode(gl_modelview); public abstract void init(); GCApplication.java import java.awt.color; import java.awt.graphics; 91

104 import java.awt.color.colorspace; import java.awt.geom.affinetransform; import java.awt.image.affinetransformop; import java.awt.image.bufferedimage; import java.awt.image.colormodel; import java.awt.image.componentcolormodel; import java.awt.image.databuffer; import java.awt.image.databufferbyte; import java.awt.image.raster; import java.awt.image.writableraster; import java.io.ioexception; import java.net.url; import java.nio.bytebuffer; import java.nio.byteorder; import java.util.hashtable; import javax.imageio.imageio; import org.newdawn.slick.util.resourceloader; public class Texture { private ColorModel glalphacolormodel = new ComponentColorModel( ColorSpace.getInstance(ColorSpace.CS_sRGB), new int[] { 8, 8, 8, 8, true, false, ComponentColorModel.TRANSLUCENT, DataBuffer.TYPE_BYTE); private ColorModel glcolormodel = new ComponentColorModel( ColorSpace.getInstance(ColorSpace.CS_sRGB), new int[] { 8, 8, 8, 0, false, false, ComponentColorModel.OPAQUE, DataBuffer.TYPE_BYTE); private ByteBuffer imagedata; private int width; private int height; private ByteBuffer convertimagedata(bufferedimage bufferedimage) { ByteBuffer imagebuffer; WritableRaster raster; BufferedImage teximage; null); int texwidth = bufferedimage.getwidth(); int texheight = bufferedimage.getheight(); if (bufferedimage.getcolormodel().hasalpha()) { raster= Raster.createInterleavedRaster( DataBuffer.TYPE_BYTE,texWidth, texheight, 4, teximage = new BufferedImage(glAlphaColorModel, raster, false,new Hashtable<String, Object>()); else { raster =Raster.createInterleavedRaster( DataBuffer.TYPE_BYTE,texWidth,texHeight,3,null); teximage= new BufferedImage(glColorModel, raster, false,new Hashtable<String, Object>()); 92

105 AffineTransform tx = AffineTransform.getScaleInstance(1, -1); tx.translate(0, -bufferedimage.getheight(null)); AffineTransformOp op = new AffineTransformOp(tx, AffineTransformOp.TYPE_NEAREST_NEIGHBOR); bufferedimage = op.filter(bufferedimage, null); Graphics g = teximage.getgraphics(); g.setcolor(new Color(0f, 0f, 0f, 0f)); g.fillrect(0, 0, texwidth, texheight); g.drawimage(bufferedimage, 0, 0, null); this.width = texwidth; this.height = texheight; byte[] data=((databufferbyte) teximage.getraster().getdatabuffer()).getdata(); imagebuffer = ByteBuffer.allocateDirect(data.length); imagebuffer.order(byteorder.nativeorder()); imagebuffer.put(data, 0, data.length); imagebuffer.flip(); return imagebuffer; public boolean load(string ref) { URL url = ResourceLoader.getResource(ref); if (url == null) { return false; try { BufferedImage bufferedimage = ImageIO.read(url); imagedata = convertimagedata(bufferedimage); catch (IOException e) { return false; return true; public ByteBuffer getimagedata() { return imagedata; public int getwidth() { return width; public int getheight() { return height; TextureMappingTranformasi.java import org.lwjgl.bufferutils; import setting.cgapplication; import setting.texture; 93

106 import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.*; public class TextureMappingTransformasi extends CGApplication { private Texture m_texture; private int m_texid; private float public void init() { // Load image data m_texture = new Texture(); if (!m_texture.load("pic/tree.png")) { System.out.println("Failed to load texture\n"); System.exit(1); return; // Generate ID m_texid IntBuffer textureidbuffer = BufferUtils.createIntBuffer(1); glgentextures(textureidbuffer); m_texid = textureidbuffer.get(0); // Activate texture m_texid glbindtexture(gl_texture_2d, m_texid); // Copy image data into texture memory glteximage2d(gl_texture_2d, 0, GL_RGBA, m_texture.getwidth(),m_texture.getheight(), 0, GL_RGBA, GL_UNSIGNED_BYTE,m_texture.getImageData()); // Set magnification and minification filter gltexparameteri(gl_texture_2d, GL_TEXTURE_MAG_FILTER, GL_LINEAR); gltexparameteri(gl_texture_2d, GL_TEXTURE_MIN_FILTER, GL_LINEAR); public void update(int delta) { angle += 0.05f; private void drawtexturedquads() { glbegin(gl_quads); gltexcoord2d(0, 0); glvertex3f(-2.0f, -2.0f, 0.0f); gltexcoord2d(1, 0); glvertex3f(2.0f, -2.0f, 0.0f); gltexcoord2d(1, 1); glvertex3f(2.0f, 2.0f, 0.0f); gltexcoord2d(0, 1); glvertex3f(-2.0f, 2.0f, 0.0f); glend(); 94

107 @Override public void render() { glviewport(0, 0, width, height); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45.0f, (width) / (height), 1.0f, 100.0f); glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glclearcolor(0.0f, 0.0f, 0.0f, 1.0f); // Transformasi glmatrixmode(gl_modelview); glloadidentity(); // Zoom-out gltranslatef(0.0f, 0.0f, -7.0f); // Rotasi glrotatef(angle, 0, 1, 0); glenable(gl_depth_test); glenable(gl_alpha_test); glalphafunc(gl_greater, 0.1f); glenable(gl_blend); glblendfunc(gl_src_alpha, GL_ONE_MINUS_SRC_ALPHA); // Texturing glenable(gl_texture_2d); glbindtexture(gl_texture_2d, m_texid); drawtexturedquads(); glrotatef(90, 0, 1, 0); drawtexturedquads(); gldisable(gl_depth_test); gldisable(gl_alpha_test); gldisable(gl_texture_2d); gldisable(gl_blend); rendertext(); private void rendertext() { drawstring(0, height getdefaultfont().getlineheight(),"tekxture dengan Transformasi."); public void deinit() { gldeletetextures(m_texid); public static void main(string[] args) { TextureMappingTransformasi app = new TextureMappingTransformasi(); app.start(800, 600, false, false, true,"mapping Teksturing"); 95

108 E. Latihan Soal Buatlah ilustrasi teksture mapping pada sebuah gedung seperti dalam keluaran program di bawah ini : Disediakan dua buah file gambar seperti berikut ini : 96

109 gedunga.png gedungb.png F. Rangkuman Texturing merupakan proses mewarnai, memberi tekstur, atau memberi efek material pada sebuah model 3D. Texture mapping adalah teknik shading untuk pengolahan gambar yang memetakan sebuah fungsi pada permukaan tiga dimensi dalam scene. Fungsi yang dipetakan mencakup satu dimensi, dua dimensi, dan tiga dimensi dan dapat digambarkan sebagai array atau fungsi matematika atau gambar. Texture mapping merupakan teknik pemetaan sebuah tekstur pada pola gambar wireframe, dimana wireframe yang telah dibuat akan ditampilkan memiliki kulit luar seperti tekstur yang diinginkan. OpenGl menyediakan banyak sekali jenis texture yang dapat digunakan untuk membuat objek 2 dimensi dan 3 dimensi menjadi sangat menarik. 97

110 G. Umpan Balik IPK Hasil Yang Dicapai Rencana Tindak Lanjut Peserta diklat dapat memahami jenis-jenis tekture dalam OpenGL dan berapa proses pencapaian kompetensinya Peserta diklat mampu menulis kode program dengan memanfaatkan jenis-jenis teksture yang dalam library OpenGL dan berapa besar proses pencapaian kompetensinya H. Kunci Jawaban Perancangan class diagram CGApplication lwjgl.opengl TextureGedung -Texture : CGApplication = txture +loadimage() : void +main() : void Texture -width : int -height : int +getwidth() : int +gethight() : int CGApplication.java Sama dengan kode program pada kegiatan praktikum

111 Texture.java Sama dengan kode program pada kegiatan praktikum 6.1 TextureGedung.java import setting.cfgapplication; import setting.texture; import java.awt.geom.point2d; import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.*; import java.io.ioexception; import java.nio.intbuffer; import java.util.logging.filehandler; import java.util.logging.level; import java.util.logging.logger; import org.lwjgl.bufferutils; import org.lwjgl.lwjglexception; import org.lwjgl.input.keyboard; import org.lwjgl.input.mouse; import org.lwjgl.opengl.display; import static org.lwjgl.opengl.display.update; import org.lwjgl.opengl.displaymode; import org.lwjgl.opengl.gl11; import static org.lwjgl.opengl.gl12.gl_clamp_to_edge; import org.lwjgl.util.glu.glu; public class TeksturGedung extends CGApplication { public static final int DISPLAY_HEIGHT = 480; public static final int DISPLAY_WIDTH = 640; private final int[] m_texid = new int[14]; public final static int NO_WRAP = -1; private Texture m_texture; public static void main(string[] args) { // TODO code application logic here TeksturGedung main = new TeksturGedung(); main.start(800,600,false,false,true,"tekstur Gedung"); public void render() { glviewport(0, 0, width, height); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45.0f,(width)/(height), 1.0f, 700.0f); glmatrixmode(gl_modelview); glloadidentity(); glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glclearcolor(0.0f, 0.0f, 0.0f, 0.0f); glenable(gl_depth_test); glenable(gl_alpha_test); glalphafunc(gl_greater, 0.1f); glenable(gl_blend); glblendfunc(gl_src_alpha, GL_ONE_MINUS_SRC_ALPHA); glenable(gl_texture_2d); glpushmatrix(); 99

112 gltranslatef(-50, 0, 25); for (int row = 0; row < 2; row++) { glpushmatrix(); for (int col = 0; col < 6; col++) { drawbuilding(4, 6, 10); gltranslatef(6, 0, 0); drawbuilding(4, 12, 11); gltranslatef(6, 0, 0); drawbuilding(4, 10, 10); gltranslatef(4, 0, 0); glpopmatrix(); gltranslatef(0, 0, 12); glpopmatrix(); glpushmatrix(); gltranslatef(-50, 0, -50); for (int row = 0; row < 2; row++) { glpushmatrix(); for (int col = 0; col < 6; col++) { drawbuilding(4, 6, 10); gltranslatef(6, 0, 0); drawbuilding(4, 12, 11); gltranslatef(6, 0, 0); drawbuilding(4, 10, 10); gltranslatef(4, 0, 0); glpopmatrix(); gltranslatef(0, 0, 12); gldisable(gl_depth_test); gldisable(gl_alpha_test); gldisable(gl_texture_2d); gldisable(gl_blend); private void update() { public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); public void deinit() { public void init() { IntBuffer textureidbuffer = BufferUtils.createIntBuffer(14); glgentextures(textureidbuffer); m_texid[0] = textureidbuffer.get(0); m_texid[1] = textureidbuffer.get(1); m_texid[2] = textureidbuffer.get(2); m_texid[3] = textureidbuffer.get(3); m_texid[4] = textureidbuffer.get(4); m_texid[5] = textureidbuffer.get(5); m_texid[6] = textureidbuffer.get(6); 100

113 m_texid[7] = textureidbuffer.get(7); m_texid[8] = textureidbuffer.get(8); m_texid[9] = textureidbuffer.get(9); m_texid[10] = textureidbuffer.get(10); m_texid[11] = textureidbuffer.get(11); m_texid[12] = textureidbuffer.get(12); m_texid[12] = textureidbuffer.get(12); loadtexture(m_texid[10], "pic/gedunga.png", false, GL_LINEAR, NO_WRAP); loadtexture(m_texid[11], "pic/gedungb.png", false, GL_LINEAR, NO_WRAP); private void drawbuilding(float width, float height, int texid) { width = width / 2; glbindtexture(gl_texture_2d, m_texid[texid]); glbegin(gl_quads); // front side gltexcoord2d(0, 0); glvertex3f(-width, 0, width); gltexcoord2d(1, 0); glvertex3f(width, 0, width); gltexcoord2d(1, 1); glvertex3f(width, height, width); gltexcoord2d(0, 1); glvertex3f(-width, height, width); // right side gltexcoord2d(0, 0); glvertex3f(width, 0, width); gltexcoord2d(1, 0); glvertex3f(width, 0, -width); gltexcoord2d(1, 1); glvertex3f(width, height, -width); gltexcoord2d(0, 1); glvertex3f(width, height, width); // back side gltexcoord2d(0, 0); glvertex3f(width, 0, -width); gltexcoord2d(1, 0); glvertex3f(-width, 0, -width); gltexcoord2d(1, 1); glvertex3f(-width, height, -width); gltexcoord2d(0, 1); glvertex3f(width, height, -width); // left side gltexcoord2d(0, 0); glvertex3f(-width, 0, -width); gltexcoord2d(1, 0); glvertex3f(-width, 0, width); gltexcoord2d(1, 1); glvertex3f(-width, height, width); gltexcoord2d(0, 1); glvertex3f(-width, height, -width); // top side glvertex3f(-width, height, width); 101

114 glvertex3f(width, height, width); glvertex3f(width, height, -width); glvertex3f(-width, height, -width); glend(); private void loadtexture(int texid, String path, boolean transparent,int filter, int wrap) { m_texture = new Texture(); if (!m_texture.load(path)) { System.out.println("Failed to load texture\n"); return; glbindtexture(gl_texture_2d, texid); if (transparent) { glteximage2d(gl_texture_2d,0,gl_rgba, m_texture.getwidth(), m_texture.getheight(), 0, GL_RGBA, GL_UNSIGNED_BYTE, m_texture.getimagedata()); else { glteximage2d(gl_texture_2d, 0, GL_RGB, m_texture.getwidth(), m_texture.getheight(), 0, GL_RGB, GL_UNSIGNED_BYTE, m_texture.getimagedata()); gltexparameteri(gl_texture_2d, GL_TEXTURE_MIN_FILTER, filter); gltexparameteri(gl_texture_2d, GL_TEXTURE_MAG_FILTER, filter); if (wrap == -1) { return; gltexparameteri(gl_texture_2d, GL_TEXTURE_WRAP_S, wrap); gltexparameteri(gl_texture_2d, GL_TEXTURE_WRAP_T, wrap); 102

115 103

116 104

117 Transformasi Proyeksi A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 7 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat dapat menganalisis pemanfaatan teknik kamera dengan transformasi proyeksi 2. Melalui praktikum peserta diklat dapat menulis kode program untuk melakukan pergerakkan objek 3 dimensi melalui transformasi proyeksi B. Indikator Pencapaian Kompetensi 1. Peserta diklat dapat memahami teknik pengambilan gambar dengan kamera 2. Peserta diklat dapat menerapkan transformasi proyeksi, transformasi viewing, dan transformasi modeling 3. Peserta diklat dapat menulis kode program untuk melakukan pengerakan objek 3 dimensi melalui transformasi proyeksi, transformasi viewing, dan transformasi modeling C. Uraian Materi 1. Kamera Dalam grafika 3D, sudut pandang (point of view) adalah bagian dari kamera. Kamera dalam grafika 3D biasanya tidak didefinisikan secara fisik, namun hanya untuk menentukan sudut pandang kita pada sebuah lingkungan kerja, sehingga sering disebut virtual camera. Sebuah kamera dipengaruhi oleh dua buah faktor penting. Faktor pertama adalah lokasi (camera location). Lokasi sebuah kamera ditentukan dengan sebuah titik (x,y,z). Faktor kedua adalah arah pandang kamera. Arah pandang kamera ditunjukkan dengan sebuah sistem yang disebut sistem koordinat acuan pandang atau sistem (U,N,V). 105

118 Arah pandang kamera sangat penting dalam membuat sebuah citra, karena letak dan arah pandang kamera menentukan apa yang terlihat oleh sebuah kamera. Penentuan apa yang dilihat oleh kamera biasanya ditentukan dengan sebuah titik (x,y,z) yang disebut camera interest. Pada kamera, dikenal istilah field of view yaitu daerah yang terlihat oleh sebuah kamera. Field of view pada grafika 3D berbentuk piramid, karena layar monitor sebuah komputer berbentuk segiempat. Objek-objek yang berada dalam field of view ini akan terlihat dari layar monitor, sedang objek-objek yang berada di luar field of view ini tidak terlihat pada layar monitor. Field of view ini sangat penting dalam pemilihan objek yang akan diproses dalam rendering. Objek-objek diluar field of view biasanya tidak akan diperhitungkan, sehingga perhitungan dalam proses rendering, tidak perlu dilakukan pada seluruh objek. Gambar 10. Analogi pengambilan gambar oleh kamera Untuk menghasilkan gambar dari obyek dengan skenario tertentu kita harus melakukan beberapa proses, yaitu: melakukan pengesetan kamera dalam bentuk setting lensa kamera (Transformasi Proyeksi ), mengarah kamera dengan mengatur letak tripod (Transformasi Viewing), mengatur letak obyek (Transformasi Modeling), dan mengatur skala dan layout dari foto (Transformasi Viewport) Transformasi Viewport dengan menggunakan perintah glviewport(). Pada bab ini, akan dipelajari transformasi-transformasi lainnya. 106

119 2. Transformasi Proyeksi Lensa kamera dan mata manusia memiliki daerah penglihatan (viewing volume) yang berbentuk kerucut, namun karena bentuk display yang biasanya berbentuk segiempat membuat OpenGL (dan hampir semua API grafika komputer lain) lebih efisien memodelkan daerah penglihatan sebagai volume berbentuk piramida. Tipe transformasi proyeksi ada dua macam, bergantung pada parameter dan bentuk piramidanya. Dua tipe transformasi tersebut adalah Transformasi Ortogonal/Paralel (Orthogonal Transformation) dan Transformasi Perspektif(Perspective Transformation). Gambar 11 Transformasi Ortogonal dan Transformasi Proyektif. Transformasi orthogonal dengan parameter default. Transformasi ini membuat jarak benda relatif terhadap kamera tidak berpengaruh pada citra benda tersebut. Biasanya transformasi ini digunakan pada aplikasi-aplikasi teknik seperti gambar teknik (cf. Gambar 6). Untuk merubah parameter transformasi ortogonal dapat 107

120 menggunakan perintah glortho() dengan didahului proses merubah status OpenGL ke mode proyeksi dengan perintah glmatrixmode(gl_projection). Gambar 12. Transformasi ortogonal Pada transformasi jenis ini jarak benda akan mempengaruhi gambar yang di buat. Parameter transformasi jenis ini dapat dirubah dengan menggunakan gluperspective()/glfrustum(), juga dengan didahului proses merubah status OpenGL ke mode proyeksi dengan perintah glmatrixmode(gl_projection). glmatrixmode(gl_projection); glloadidentity( ); gluperspective(fovy, aspect, near, far); fovy adalah sudut antara bidang bottom dan up.dalam gambar berikut ini ditunjukkan ilustrasi dari implementasi kode program di atas. 108

121 Gambar 23 Ilustrasi transformasi ortogonal dari kode program 3. Transformasi Viewing Untuk menghasilkan gambar, kamera perlu diletakkan pada posisi yang tepat di depan pemandangan yang diinginkan. Secara default, dalam OpenGL kemera akan berada pada posisi (0,0,0) dengan menghadap ke arah z = -1 dengan sumbu y mengarah ke atas kamera. Hal ini dapat dilakukan dengan menggunakan perintah glulookat() dengan didahului proses merubah status OpenGL ke mode proyeksi dengan perintah glmatrixmode(gl_modelview). 4. Transformasi Modeling Selain posisi dan orientasi kamera yang dapat dirubah-rubah, secara natural obyek juga dapat berpindah posisi dan orientasi relatif terhadap yang lain. Transformasi obyek dapat direpresentasikan dengan dua cara, yaitu: menggunakan matriks transformasi (glloadmatrix) menggunakan operasi transformasi (glrotate, gltranslate ) dengan didahului proses merubah status OpenGL ke mode proyeksi dengan perintah glmatrixmode(gl_modelview). D. Aktivitas Pembelajaran Pembuatan kode program untuk mentransformasi 3 dimensi melalui pemanfaatan seperti pada teknik kamera untuk melihat dan menggerakkan objek 3 dimensi. 109

122 Kegiatan Praktikum 7.1 Keluaran Program Perancangan class diagram Block -x : int -y : int -z : int -width : int -height : int -dept : int -shape : int +getwidth() : int +gethight() : int +render() : void lwjgl.opengl TextureMapping -camera_x : float -camera_y : float -camera_z : float -camera_rot : float +kontrolkeyboard() : void +main() : void Block.java import java.util.random; import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.*; import java.io.ioexception; import java.util.logging.filehandler; import java.util.logging.level; import java.util.logging.logger; import org.lwjgl.lwjglexception; import org.lwjgl.input.keyboard; 110

123 import org.lwjgl.input.mouse; import org.lwjgl.opengl.display; import org.lwjgl.opengl.displaymode; public class Block { public float x, y, z, width, height, depth, shade; public Random rand; public Block(float xx, float yy, float zz, float ww, float hh, float dd) { x = xx; y = yy; z = zz; width = ww; height = hh; depth = dd; rand = new Random(); shade = (rand.nextfloat() + 0.2f); public void tick() { public void render() { glbegin(gl_quads); glcolor3f(0, shade, 1); //Front gltexcoord2f(0, 0); glvertex3f(x, y, z); gltexcoord2f(1, 0); glvertex3f(x + width, y, z); gltexcoord2f(1, 1); glvertex3f(x + width, y + height, z); gltexcoord2f(0, 1); glvertex3f(x, y + height, z); //Back glvertex3f(x, y, z + depth); glvertex3f(x + width, y, z + depth); glvertex3f(x + width, y + height, z + depth); glvertex3f(x, y + height, z + depth); //Left glvertex3f(x, y, z); glvertex3f(x, y, z + depth); glvertex3f(x, y + height, z + depth); glvertex3f(x, y + height, z); //Right glvertex3f(x + width, y, z); glvertex3f(x + width, y, z + depth); glvertex3f(x + width, y + height, z + depth); glvertex3f(x + width, y + height, z); //Top glvertex3f(x, y, z); glvertex3f(x + width, y, z); glvertex3f(x + width, y, z + depth); glvertex3f(x, y, z + depth); //Bottom glvertex3f(x, y + height, z); 111

124 glvertex3f(x + width, y + height, z); glvertex3f(x + width, y + height, z + depth); glvertex3f(x, y + height, z + depth); glend(); UjiCamera.java import java.util.random; import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.*; import java.io.ioexception; import java.util.arraylist; import java.util.logging.filehandler; import java.util.logging.level; import java.util.logging.logger; import org.lwjgl.lwjglexception; import org.lwjgl.sys; import org.lwjgl.input.keyboard; import org.lwjgl.input.mouse; import org.lwjgl.opengl.display; import org.lwjgl.opengl.displaymode; public class UjiCamera { public static float camera_x, camera_y, camera_z, camera_rot; public static ArrayList<Block> blocks = new ArrayList<Block>(); public UjiCamera() { try { Display.setDisplayMode(new DisplayMode(800, 600)); Display.setTitle("Transformai Proyeksi dengan Kamera"); Display.create(); catch (LWJGLException e) { e.printstacktrace(); glmatrixmode(gl_projection); glloadidentity(); gluperspective((float) 45, 800f / 600f, 0.1f, f); glmatrixmode(gl_modelview); glloadidentity(); glshademodel(gl_smooth); glenable(gl_depth_test); glenable(gl_texture_2d); gldepthfunc(gl_lequal); glhint(gl_perspective_correction_hint, GL_NICEST); generateworld(); gltranslatef(0, 15, 0); float dt, time, lasttime = 0; Mouse.setGrabbed(true); while (!Display.isCloseRequested() &&!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { time = Sys.getTime(); dt = (time - lasttime) / f; 112

125 lasttime = time; render(); tick(); Display.update(); Display.sync(60); Display.destroy(); System.exit(0); public void tick() { camera_x = 0; camera_y = 0; camera_z = 0; camera_rot = 0; if (Keyboard.isKeyDown(Keyboard.KEY_SPACE)) { camera_z = +1; else if (Keyboard.isKeyDown(Keyboard.KEY_MINUS)) { camera_z = -1; if (Keyboard.isKeyDown(Keyboard.KEY_RIGHT)) { camera_x = +1; else if (Keyboard.isKeyDown(Keyboard.KEY_LEFT)) { camera_x = -1; if (Keyboard.isKeyDown(Keyboard.KEY_DOWN)) { camera_y = -1; else if (Keyboard.isKeyDown(Keyboard.KEY_UP)) { camera_y = +1; while (Keyboard.next()) { if (Keyboard.isKeyDown(Keyboard.KEY_R)) { generateworld(); for (int i = 0; i < blocks.size(); i++) { blocks.get(i).tick(); camera_rot += Mouse.getDX(); public void render() { glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); gltranslatef(camera_x, camera_y, camera_z); glrotatef(camera_rot, 0, 1, 0); for (int i = 0; i < blocks.size(); i++) { blocks.get(i).render(); public void generateworld() { blocks.clear(); int heightlevel = 0; Random r = new Random(); for (int i = 0; i < 50; i++) { for (int j = 0; j < 50; j++) { 113

126 if (r.nextboolean() == false) { heightlevel -= 4; else { heightlevel += 4; blocks.add(new Block((i * 4)-64, -8+heightlevel,(j*4)-64,4,4,4)); float y = -8 + heightlevel; for (int k = 0; k < 10; k++) { blocks.add(new Block((i * 4)-64,y-(k * 4), (j * 4)-64,4,4,4)); public static void main(string[] arguments) { new UjiCamera(); Keterangan Tombol keyboard Panah Atas(Pg Up)-> Pergerakkan ke atas Tombol keyboard Panah Bawah(Pg Dn)-> Pergerakkan ke bawah Tombol keyboard Panah Kanan(End)-> Pergerakkan ke kanan Tombol keyboard Panah Kiri(Home)-> Pergerakkan ke kiri Tombol keyboard Spasi-> Pergerakkan ke maju Tombol keyboard Minus-> Pergerakkan ke mundur E. Latihan Soal 1. Perhatikan gambar dibawah ini sebuah titik P ref berada dalam Word Coordinates system dilihat menggunakan kamera di posisi P eye. Dalam hal ini kamera bertindak sebagai Viewer Coordinates System. Jelaskan ilustrasi gambar di bawah ini : 114

127 2. Perhatikan gambar di bawah ini, Gambar (a) Obyek grafik yang berada di dunia dinyatakan dalam ruang koordinat 3D. (b) Gambar obyek tersebut ditampilkan di layar yang dinyatakan sebagai koordinat bidang 2D setelah melalui proses proyeksi. Jelaskan ilustrasi yang ditunjukkan dalam gambar di atas. F. Rangkuman Kamera dalam grafika 3D biasanya tidak didefinisikan secara fisik, namun hanya untuk menentukan sudut pandang kita pada sebuah world, sehingga sering disebut virtual camera.lensa kamera dan mata manusia memiliki daerah penglihatan (viewing volume) yang berbentuk kerucut, namun karena bentuk display yang biasanya berbentuk segiempat membuat OpenGL (dan hampir semua API grafika komputer lain) lebih efisien memodelkan daerah penglihatan 115

128 sebagai volume berbentuk piramida. Tipe transformasi proyeksi ada dua macam, bergantung pada parameter dan bentuk piramidanya. Dua tipe transformasi tersebut adalah Transformasi Ortogonal/Paralel (Orthogonal Transformation) dan Transformasi Perspektif(Perspective Transformation). G. Umpan Balik IPK Hasil Yang Dicapai Rencana Tindak Lanjut Peserta diklat dapat memahami teknik pengambilan gambar dengan kamera dan berapa proses pencapaian kompetensinya Peserta diklat dapat menerapkan transformasi proyeksi, transformasi viewing, dan transformasi modeling dan berapa besar proses pencapaian kompetensinya Peserta diklat dapat menulis kode program untuk melakukan pengerakan objek 3 dimensi melalui transformasi proyeksi, transformasi viewing, dan transformasi modeling dan berapa besar proses pencapaian kompetensinya H. Kunci Jawaban Jawaban no 1 Gambar pada soal no 1 menunjukkan : (a) Sebuah titik dengan posisi P ref pada obyek silinder dilihat (menggunakan kamera) pada posisi P eye. (b) Sistem koordinat dunia yang digunakan untuk mengukur posisi titik P ref dan posisi mata P eye. 116

129 Untuk menyatakan titik-titik dalam Word Coordinates system menjadi titik-titik dalam Viewer Coordinates System maka diperlukan beberapa parameter berikut: Posisi mata pengamat P eye. Posisi titik referensi P ref. vektor arah pandang atas V up Jawaban no 2 Titik-titik dalam Viewer Coordinates system tersimpan dalam koordinat ruang 3D. Titik-titik ini akan ditampilkan di layar yang dinyatakan sebagai koordinat bidang 2D. Untuk itu kita perlu mentransformasi titik-titik dalam koordinat ruang 3D menjadi titik-titik dalam koordinat bidang 2D. Yang menjadi permasalahan adalah bagaimana mentransformasi titik-titik dalam ruang 3D kedalam bidang 2D. Jawabannya adalah proyeksi. Proyeksi digunakan untuk mentransformasi titik dalam ruang 3D kedalam bidang 2D. 117

130 118

131 119

132 120

133 Rendering A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 8 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat dapat menganalisis pemanfaatan rendering pada image melalui lighting dan shading. 2. Melalui praktikum peserta diklat dapat menulis kode program untuk melakukan rendering pada image melalui lighting dan shanding. B. Indikator Pencapaian Kompetensi 1. Peserta diklat mampu menggambarkan proses rendering pada sebuah image 2. Peserta diklat mampu menerapkan proses lighting dan shading 3. Peserta diklat mampu menulis kode program untuk melakukan rendering pada sebuah image melalui lighting dan shanding C. Uraian Materi Rendering merupakan salah satu teknik pencitraan objek 3 dimensi untuk mendapatkan image yang realistis dengan penambahan beberapa efek, seperti pencahayaan dan shading. Kebanyakan manusia menggemari sesuatu yang hidup, bukan yang kaku dan statik. 1. Warna Warna sebenarnya merupakan persepsi kita terhadap pantulan cahaya dari benda-benda di depan mata. Tidak ada ketentuan jumlah warna dasar tetapi dalam implementasi dengan komputer hanya dibutuhkan tiga warna dasar. Ada berbagai model untuk menyatakan warna dasar serta rentang warna yang dihasilkan, salah satu diantaranya adalah RGB. Model warna RGB dapat digambarkan sebagai sebuah kotak yang mempunyai tiga sumbu yaitu : R(red), G(green), B(blue), dimana nilai masing-masing sumbu berkisar dari 0 sampaii 1. Warna ditentukan berdasarkan lokasi warna tersebut terhadap Sumbu RGB. 121

134 2. Pencahayaan (Lighting) Salah satu tujuan dari grafika komputer adalah menghasilkan tampilan yang senyata mungkin, dan karena pengaruh cahaya sangat besar terhadap hasil nyata maka dalam membuat tampilan akhir faktor pencahayaan harus diperhitungkan pula. Tetapi mengingat bahwa grafika komputer adalah model matematika dari kehidupan nyata maka pencahayaan juga harus diubah menjadi model matematika. Model matematika itu harus memenuhi persyaratan sebagai berikut : Menghasilkan efek seperti cahaya sungguhan Dapat dihitung dengan cepat Model pencahayaan tiga dimensi menyangkut yang realistik menyangkut dua elemen penting yang sangat berkaitan erat dengan shading model, yaitu : Keakuratan dalam menggambarkan objek. Teknik pencahayaan yang baik. Saat cahaya menimpa permukaan benda maka sebagian cahaya akan dipantulkan dan sebagian lain diserap. Bergantung kepada frekuensi atau panjang gelombang yang dipantulkan dan diserap maka kita akan melihat warna. Mata kita selain sensitif terhadap warna juga sensitif terhadap intensitas cahaya (brightness). Secara awam kita menyebut intensitas cahaya sebagai kecerahan. Bergantung kepada materi penyusun benda maka ada tiga kemungkinan arah pantulan cahaya ketika cahaya menimpa permukaan benda : diffuse, specular, translucent. a) Cahaya Tersebar (Diffuse) Suatu objek yang mempunyai permukaan yang kasar maka cahaya yang dipantulkan cenderung akan menyebar ke segala arah, cahaya yang menyebar ini disebut cahaya tersebar. Beberapa cahaya menembus permukaan dan diradiasi kembali secara seragam ke dalam semua arah. Penghitungan cahaya tersebar menggunakan m, v dan s. Sebagaimana cahaya tersebar disebarkan secara seragam dalam semua arah, lokasi mata, v, tidak penting kecuali kalau v.m < 0 jika diinginkan intensitas cahaya I = 0 122

135 Hubungan antara kecerahan permukaan dan orientasinya cahaya didasarkan pada cos(θ). Keterangan : = kuat cahaya tersebar (diffuse) = kuat cahaya di sumber cahaya = koefisien pantulan tersebar (diffuse) 3. Metode Flat Shading Flat shading adalah salah satu teknik shading dimana satu face mempunyai warna yang sama. Pada metode ini sebuah intensitas tunggal dihitung untuk masing-masing Polygon, semua titik pada permukaan Polygon dipaparkan dengan nilai intensitas yang sama. Karakteristik flat shading diantaranya : Pemberian tone yang sama untuk setiap Polygon Penghitungan jumlah cahaya mulai dari titik tunggal pada permukaan. Penggunaan satu normal untuk seluruhnya. Secara umum flat shading dapat menghasilkan shading yang akurat dengan ketentuan sebagi berikut : Objek berbentuk polihendra (segi banyak), yaitu jaring yang mempunyai ruang terhingga dan tertutup. Semua sumber cahaya jauh dari permukaan objek, maka adalah tetap untuk semua permukaan Polygon. Posisi penglihatan yang cukup jauh dari permukaan sehingga adalah tetap untuk semua permukaan Polygon. Definisi matematik : : Vektor sumber cahaya (arah) membentur permukaan (yang disingkat untuk ' L', tetapi ingat ini adalah suatu garis vektor). : Vektor sudut pandang (eyepoint) pemandangan di permukaan (yang disingkat untuk ' V', tetapi ingat ini adalah suatu garis vektor). 123

136 : Vektor normal (tegak lurus) pada permukaan (yang disingkat untuk ' N', tetapi ingat ini adalah suatu garis vektor). Sekalipun semua kondisi-kondisi ini tidak benar, kita masih bisa memperkirakan efek cahaya permukaan dengan menggunakan permukaan Polygon kecil dengan menggunakan flat shading dan menghitung intensitas untuk setiap permukaan, khususnya pada pusat Polygon. 4. Metode Gouraud Shading Metode ini merender sebuah permukaan Polygon dengan interpolasi linier yaitu nilai intensitas yang mengenai setiap permukaan berbeda. Warna yang dipantulkan dihitung tiap vertex kemudian secara halus diinterpolasikan. Membuat suatu permukaan Polygon dengan menginterpolasikan nilai intensitas secara linier ke seberang permukaan. Nilai intensitas untuk masingmasing Polygon dipasangkan dengan nilai dari Polygon yang bersebelahan sepanjang tepi (edges) yang umum, dengan begitu menghentikan penghapusan intensitas yang dapat terjadi di flat shading. Penggunaan level abu-abu yang berbeda di sepanjang Polygon diinterpolasikan di antara titik. Masing-masing permukaan Polygon dibuat menggunakan gouraud shading dengan melakukan perhitungan sebagai berikut : Tentukan satuan vektor normal rata-rata pada setiap titik ujung Polygon. Pakaikan model iluminasi untuk setiap titik untuk menghitung intensitas titik. Interpolasikan secara linier intensitas titik pada permukaan Polygon. D. Aktivitas Pembelajaran Pembuatan kode program untuk rendering terhadapa objek 3 dimensi dirancang dengan melibatkan beberapa file java untuk memudahkan dalam pengaturan dan operasi transformasi geometri. 124

137 Kegiatan Praktikum 8.1 Keluaran Program Perancangan class diagram 125

138 CGApplication lwjgl.opengl Texture -width : int -height : int +getwidth() : int +gethight() : int LightingShading -Camera : CGApplication = cmr -Texture : CGApplication = textr +loadimage() : void +main() : void Camera -viewcamx : int -viewcamy : int -viewcamz : int -upcamx : int -upcamy : int -upcamz : int -poscamx : int -poscamy : int -poscamz : int -camaera_speed : int +movecamera() : void +rotatecamera() : void +strafecamera() : void +render() : void CGApplication.java Texture.java Sama dengan kode program pada kegiatan praktikum 6.1 Sama dengan kode program pada kegiatan praktikum 6.1 Camera.java import static org.lwjgl.util.glu.glu.*; import org.lwjgl.input.keyboard; import org.lwjgl.input.mouse; import org.lwjgl.opengl.display; public class Camera { private float viewcamx, viewcamy, viewcamz, upcamx, upcamy, upcamz,poscamx, poscamy, poscamz, CAMERA_SPEED; private void movecamera(float speed) { 126

139 float x = viewcamx - poscamx; float z = viewcamz - poscamz; poscamx = poscamx + x * speed; poscamz = poscamz + z * speed; viewcamx = viewcamx + x * speed; viewcamz = viewcamz + z * speed; private void rotatecamera(float speed) { float x = viewcamx - poscamx; float z = viewcamz - poscamz; viewcamz =(float)(poscamz+math.sin(speed)*x+ Math.cos(speed) * z); viewcamx = (float) (poscamx + Math.cos(speed) * x Math.sin(speed) * z); private void strafecamera(float speed) { float x = viewcamx - poscamx; float z = viewcamz - poscamz; float orthox = -z; float orthoz = x; poscamx = poscamx + orthox * speed; poscamz = poscamz + orthoz * speed; viewcamx = viewcamx + orthox * speed; viewcamz = viewcamz + orthoz * speed; private void mousemove() { int width, height, mousex, mousey; width = Display.getWidth(); height = Display.getHeight(); int midx = width >> 1; int midy = height >> 1; float angley = 0.0f; float anglez = 0.0f; // Get mouse position mousex = Mouse.getX(); mousey = Mouse.getY(); if ((mousex == midx) && (mousey == midy)) { return; Mouse.setCursorPosition(midX, midy); angley = (float) ((midx - mousex)) / 1000; anglez = (float) ((midy - mousey)) / 1000; viewcamy += anglez * 2; if ((viewcamy - poscamy) > 8) { viewcamy = poscamy + 8; if ((viewcamy - poscamy) < -8) { viewcamy = poscamy - 8; rotatecamera(-angley); public void init() { 127

140 poscamx = 0.0f; poscamy = 1.0f; poscamz = 8.0f; viewcamx = 0.0f; viewcamy = 1.0f; viewcamz = 0.0f; upcamx = 0.0f; upcamy = 1.0f; upcamz = 0.0f; CAMERA_SPEED = 0.01f; Mouse.setGrabbed(true); public void setcameraspeed(float speed) { CAMERA_SPEED = speed; public void update() { if (Keyboard.isKeyDown(Keyboard.KEY_W)) { movecamera(camera_speed); if (Keyboard.isKeyDown(Keyboard.KEY_S)) { movecamera(-camera_speed); if (Keyboard.isKeyDown(Keyboard.KEY_A)) { strafecamera(-camera_speed); if (Keyboard.isKeyDown(Keyboard.KEY_D)) { strafecamera(camera_speed); mousemove(); public void render() { glulookat(poscamx, poscamy, poscamz, viewcamx, viewcamy, viewcamz,upcamx, upcamy, upcamz); LightingShading.java import java.nio.floatbuffer; import java.nio.intbuffer; import org.lwjgl.bufferutils; import org.lwjgl.input.keyboard; import setting.cgapplication; import setting.camera; import setting.texture; import static org.lwjgl.opengl.gl11.*; import static org.lwjgl.util.glu.glu.*; public class LightingShading extends CGApplication { private Texture m_texture; private final int[] m_texid = new int[2]; private boolean KEY_0_pressed, KEY_1_pressed, KEY_2_pressed, light0_on,light1_on, light2_on; public final static int NO_WRAP = -1; 128

141 private Camera public void init() { camera = new Camera(); camera.init(); camera.setcameraspeed(0.005f); KEY_0_pressed = KEY_1_pressed = KEY_2_pressed = false; light0_on = light1_on = light2_on = false; IntBuffer textureidbuffer = BufferUtils.createIntBuffer(2); glgentextures(textureidbuffer); textureidbuffer.get(m_texid); loadtexture(m_texid[0], "pic/marble.png", false, GL_LINEAR, GL_REPEAT); loadtexture(m_texid[1], "pic/crate.png", false, GL_LINEAR, NO_WRAP); FloatBuffer ambientpointlight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 0.5f, 0.5f, 0.5f, 1.0f ).flip(); FloatBuffer diffusepointlight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 0.5f, 0.5f, 0.5f, 1.0f ).flip(); FloatBuffer specularpointlight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 1.0f, 1.0f, 1.0f, 1.0f ).flip(); FloatBuffer ambientdirectionallight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 0.0f, 1.0f, 0.0f, 1.0f ).flip(); FloatBuffer diffusedirectionallight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 0.0f, 1.0f, 0.0f, 1.0f ).flip(); FloatBuffer ambientspotlight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 1.0f, 0.0f, 0.0f, 1.0f ).flip(); FloatBuffer diffusespotlight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 1.0f, 0.0f, 0.0f, 1.0f ).flip(); FloatBuffer directionallightposition = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 6.0f, 0.5f, 0.0f, 0.0f ).flip(); FloatBuffer pointlightposition = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 6.0f, 0.5f, 0.0f, 1.0f ).flip(); FloatBuffer spotlightposition = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 10.0f, 3.0f, 0.0f, 1.0f ).flip(); FloatBuffer spotlightdirection = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { -1.0f, 0.0f, -1.0f, 1.0f ).flip(); FloatBuffer matambient = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 1.0f, 1.0f, 1.0f, 1.0f ).flip(); FloatBuffer matdiff = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 129

142 1.0f, 1.0f, 1.0f, 1.0f ).flip(); FloatBuffer matspecular = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 1.0f, 1.0f, 1.0f, 1.0f ).flip(); gllight(gl_light0, GL_AMBIENT, ambientpointlight); gllight(gl_light0, GL_DIFFUSE, diffusepointlight); gllight(gl_light0, GL_SPECULAR, specularpointlight); gllight(gl_light0, GL_POSITION, pointlightposition); gllight(gl_light1,gl_ambient,ambientdirectionallight); gllight(gl_light1, GL_DIFFUSE, diffusedirectionallight); gllight(gl_light1,gl_position, directionallightposition); gllight(gl_light2, GL_AMBIENT, ambientspotlight); gllight(gl_light2, GL_DIFFUSE, diffusespotlight); gllight(gl_light2, GL_POSITION, spotlightposition); gllightf(gl_light2, GL_SPOT_CUTOFF, 15.0f); gllightf(gl_light2, GL_SPOT_EXPONENT, 5.0f); gllight(gl_light2,gl_spot_direction, spotlightdirection); glenable(gl_color_material); glcolormaterial(gl_front, GL_AMBIENT_AND_DIFFUSE); glmaterial(gl_front, GL_SPECULAR, matspecular); glmaterial(gl_front, GL_AMBIENT, matambient); glmaterial(gl_front, GL_DIFFUSE, matdiff); glmaterialf(gl_front, GL_SHININESS, public void update(int delta) { camera.update(); togglekey(); public void togglekey() { if (Keyboard.isKeyDown(Keyboard.KEY_0)) { if (!KEY_0_pressed) { light0_on =!light0_on; KEY_0_pressed = true; else { KEY_0_pressed = false; if (Keyboard.isKeyDown(Keyboard.KEY_1)) { if (!KEY_1_pressed) { light1_on =!light1_on; KEY_1_pressed = true; else { KEY_1_pressed = false; if (Keyboard.isKeyDown(Keyboard.KEY_2)) { if (!KEY_2_pressed) { light2_on =!light2_on; KEY_2_pressed = true; else { 130

143 KEY_2_pressed = false; void drawcube(int texid, float width, float height) { width = width / 2; glbindtexture(gl_texture_2d, texid); glbegin(gl_quads); glnormal3f(0, 0, 1); gltexcoord2d(0, 0); glvertex3f(-width, 0, width); gltexcoord2d(1, 0); glvertex3f(width, 0, width); gltexcoord2d(1, 1); glvertex3f(width, height, width); gltexcoord2d(0, 1); glvertex3f(-width, height, width); // right side glnormal3f(1, 0, 0); gltexcoord2d(0, 0); glvertex3f(width, 0, width); gltexcoord2d(1, 0); glvertex3f(width, 0, -width); gltexcoord2d(1, 1); glvertex3f(width, height, -width); gltexcoord2d(0, 1); glvertex3f(width, height, width); // back side glnormal3f(0, 0, -1); gltexcoord2d(0, 0); glvertex3f(width, 0, -width); gltexcoord2d(1, 0); glvertex3f(-width, 0, -width); gltexcoord2d(1, 1); glvertex3f(-width, height, -width); gltexcoord2d(0, 1); glvertex3f(width, height, -width); // left side glnormal3f(-1, 0, 0); gltexcoord2d(0, 0); glvertex3f(-width, 0, -width); gltexcoord2d(1, 0); glvertex3f(-width, 0, width); gltexcoord2d(1, 1); glvertex3f(-width, height, width); gltexcoord2d(0, 1); glvertex3f(-width, height, -width); // top side glnormal3f(0, 1, 0); gltexcoord2d(0, 0); glvertex3f(-width, height, width); gltexcoord2d(1, 0); glvertex3f(width, height, width); gltexcoord2d(1, 1); glvertex3f(width, height, -width); gltexcoord2d(0, 1); 131

144 glvertex3f(-width, height, -width); // bottom side glnormal3f(0, -1, 0); gltexcoord2d(0, 0); glvertex3f(-width, 0, width); gltexcoord2d(1, 0); glvertex3f(width, 0, width); gltexcoord2d(1, 1); glvertex3f(width, 0, -width); gltexcoord2d(0, 1); glvertex3f(-width, 0, -width); glend(); void drawfloor(int texid, float width) { // floor glbindtexture(gl_texture_2d, texid); glbegin(gl_quads); glnormal3f(0, 1, 0); gltexcoord2d(0, 0); glvertex3f(-width, 0, width); gltexcoord2d(width, 0); glvertex3f(width, 0, width); gltexcoord2d(width, width); glvertex3f(width, 0, -width); gltexcoord2d(0, width); glvertex3f(-width, 0, -width); glend(); private void loadtexture(int texid, String path, boolean parent, int filter, int wrap) { m_texture = new Texture(); if (!m_texture.load(path)) { System.out.println("Failed to load texture\n"); return; glbindtexture(gl_texture_2d, texid); if (transparent) { glteximage2d(gl_texture_2d,0,gl_rgba, m_tex ture.getwidth(), m_texture.getheight(), 0, GL_RGBA, GL_UNSIGNED_BYTE, m_texture.getimagedata()); else { glteximage2d(gl_texture_2d,0,gl_rgb, m_texture.getwidth(), m_texture.getheight(), 0, GL_RGB, GL_UNSIGNED_BYTE, m_texture.getimagedata()); gltexparameteri(gl_texture_2d,gl_texture_min_filter,filter); gltexparameteri(gl_texture_2d,gl_texture_mag_filter, filter); if (wrap == NO_WRAP) { 132

145 return; gltexparameteri(gl_texture_2d, GL_TEXTURE_WRAP_S, wrap); gltexparameteri(gl_texture_2d, GL_TEXTURE_WRAP_T, wrap); private void togglelighting(int lightid, boolean on) { if (on) { glenable(lightid); else { gldisable(lightid); public void render() { // Setting up default viewport glviewport(0, 0, width, height); // Set perspective projection glmatrixmode(gl_projection); glloadidentity(); gluperspective(45.0f, (width) / (height), 1.0f, 100.0f); // Transformation glmatrixmode(gl_modelview); glloadidentity(); // Clear color buffer to black glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); // Set background color to black glclearcolor(0.0f, 0.0f, 0.0f, 0.0f); camera.render(); // Zoom out gltranslatef(0.0f, -3.0f, -10.0f); // Enable lighting glenable(gl_lighting); // toggle lighting togglelighting(gl_light0, light0_on); togglelighting(gl_light1, light1_on); togglelighting(gl_light2, light2_on); // Enable Depth Testing for correct z-ordering glenable(gl_depth_test); // Enable texture 2D glenable(gl_texture_2d); drawfloor(m_texid[0], 10); // Draw cube drawcube(m_texid[1], 2, 2); gldisable(gl_depth_test); gldisable(gl_texture_2d); gldisable(gl_lighting); rendertext(); private void rendertext() { drawstring(300, height - 25,"Lighting & Shading"); drawstring(100, height - 42 * getdefaultfont().getlineheight(), "Tekan 0, 1, 2, Untuk ON-OFF point light, directional light, spot public void deinit() { 133

146 gldeletetextures(m_texid[0]); gldeletetextures(m_texid[1]); public static void main(string[] args) { LightingShading app = new LightingShading(); app.start(800, 600, false, false, true,"lighting & Shading"); E. Latihan Soal 1. Rancang dan buatlah Virtual Kota seperti dalam gambar di bawah ini dengan menggunakan file gambar yang sudah disediakan class yang harus dibuat antara lain : CGApplication.java bisa disalin dari kode program pada Kegiatan Belajar 6-7 Camera.java bisa disalin dari kode program Kegiatan Belajar 6-7 Texture.java bisa disalin dari kode program Kegiatan Belajar 6-7 Class baru yang harus dibuat adalah VirtualGedungKota.java yang merupakan implementasi dari kode program 134

147 File gambar sebagai berikut (berekstensi.jpg atau,png) : 135

148 F. Rangkuman Rendering merupakan salah satu teknik pencitraan objek 3 dimensi untuk mendapatkan image yang realistis dengan penambahan beberapa efek, seperti pencahayaan dan shading. Model pencahayaan tiga dimensi menyangkut yang realistik menyangkut dua elemen penting yang sangat berkaitan erat dengan shading model keakuratan dalam menggambarkan objek dan teknik pencahayaan yang baik. Saat cahaya menimpa permukaan benda maka sebagian cahaya akan dipantulkan dan sebagian lain diserap. Bergantung kepada frekuensi atau panjang gelombang yang dipantulkan dan diserap maka kita akan melihat warna. Mata kita selain sensitif terhadap warna juga sensitif terhadap intensitas cahaya (brightness). Secara awam kita menyebut intensitas cahaya sebagai kecerahan. Flat shading adalah salah satu teknik shading dimana satu face mempunyai warna yang sama. Pada metode ini sebuah intensitas tunggal dihitung untuk masing-masing Polygon, semua titik pada permukaan Polygon 136

149 dipaparkan dengan nilai intensitas yang sama. Karakteristik flat shading diantaranya pemberian tone yang sama untuk setiap Polygon,penghitungan jumlah cahaya mulai dari titik tunggal pada permukaan dan penggunaan satu normal untuk seluruhnya. G. Umpan Balik IPK Hasil Yang Dicapai Rencana Tindak Lanjut Peserta diklat mampu menggambarkan proses rendering pada sebuah imagedan berapa proses pencapaian kompetensinya Peserta diklat mampu menerapkan proses lighting dan shading dan berapa besar proses pencapaian kompetensinya Peserta diklat mampu menulis kode program untuk melakukan rendering pada sebuah image melalui lighting dan shanding dan berapa besar proses pencapaian kompetensinya 137

150 H. Kunci Jawaban Perancangan class diagram CGApplication lwjgl.opengl Texture -width : int -height : int +getwidth() : int +gethight() : int VirtualGedungKota -Camera : CGApplication = cmr -Texture : CGApplication = textr +loadimage() : void +main() : void Camera -viewcamx : int -viewcamy : int -viewcamz : int -upcamx : int -upcamy : int -upcamz : int -poscamx : int -poscamy : int -poscamz : int -camaera_speed : int +movecamera() : void +rotatecamera() : void +strafecamera() : void +render() : void 138

151 PENUTUP Kesimpulan dan Saran Modul diklat PKB Guru RPL level 7 ini merupakan bagian dari Standar Kompetensi Guru (SKG) pada empat kompetensi utama yaitu pada kompetensi profesional. Kompetensi Inti Guru (KIG) sesuai permendiknas 16 tahun 2007 pada kompetensi profesional pada poin 20 menyebutkan guru harus Menguasai materi, struktur, konsep dan pola pikir keilmuan yang mendukung mata pelajaran yang diampu. Modul ini dibuat sesuai dengan Indikator Pencapaian Kompetensi(IPK), dimana setiap IPK dituangkan ke dalam Kegiatan Belajar(KB) 1- sampai KB 8 yang berisikan pengembangan pengetahuan dalam uraian materi dan praktikum yang tertuang dalam kegiatan praktikum. Latihan atau tugas berisikan permasalahan-permasalan yang nyata dalam kehidupan sehari-hari. Solusi yang ditawarkan dalam setiap penyelesaian masalah dalam bentuk UML class diagram dan kode program dalam bahasa C++ dan java sehingga pengguna dapat memilih sesuai dengan bahasa pemrograman yang sering digunakan. Grafik komputer 3D (dimensi) merupakan bentuk dari benda yang memiliki panjang, lebar, dan tinggi. perbedaan dengan grafik 2D pada pemodelan 3D memiliki 3 titik kordinat yakni titik x, y, dan z. Representasi dari data geometrik 3 dimensi sebagai hasil dari pemrosesan dan pemberian efek cahaya terhadap grafika komputer 2D. Tiga Dimensi, biasanya digunakan dalam penanganan grafis. 3D secara umum merujuk pada kemampuan dari sebuah video card (link). pemodelan ini juga berfungsi untuk menampilkan efek realistis pada video maupun game. Grafik 3D merupakan perkembangan dari grafik 2D. Di dalam grafika komputer, 3D merupakan bentuk grafik yang menggunakan representasi data geometri tiga dimensi. Suatu objek rangka 3D apabila disinari dari arah tertentu akan membentuk bayangan pada permukaan gambar. Proses pembuatan grafik komputer 3D dapat dibagi ke dalam tiga fase, yaitu 3D 139

152 modeling yang mendeskripsikan bentuk dari sebuah objek, layout dan animation yang mendeskripsikan gerakan dan tata letak sebuah objek, dan 3D rendering yang memproduksi image dari objek tersebut Pengguna modul ini terutama guru-guru Rekayasa Perangkat Lunak (RPL) dapat memperkaya dengan memberi latihan-latihan atau tugas yang lebih variatif untuk siswa-siswa SMK sesuai permasalahan di sekolah masing-masing. Pada perkembangan saat ini, pemanfaatan teknologi grafika komputer sangat dibutuhkan untuk memvisualisasikan objek-objek dunia nyata menjadi objek grafis, dan implementasi yang real yaitu digunakannya teknologi grafika komputer pada fraktal untuk pembuatan aplikasi desain suatu benda. Dengan menguasai grafika komputer diharapkan guru dan siswa bisa bersama-sama membuat projek-projek yang dapat digunakan oleh sekolah dan masyarakat. 140

153 EVALUASI 1. Elemen-elemen yang menjadi konsentrasi utama pada grafika komputer adalah, kecuali.. a. Modeling b. Rendering c. Animation d. Transformation 2. Bagian gambar yang memperlihatkan keseluruhan bentuk dan fitur internal dari sebuah objek disebut. a. Raster b. Pixel c. Wireframe d. Scene 3. Sintaks perintah OpenGL mengikuti aturan penulisan dari library dimana fungsi tersebut berasal, format penulisan fungsi OpenGL adalah... a. Semua perintah OpenGL menggunakan awalan gl diikuti dengan huruf kapital pada setiap kata membentuk nama perintah contoh glclearcolor. b. Semua perintah OpenGL menggunakan awalan GL diikuti dengan huruf kapital pada setiap kata membentuk nama perintah contoh GLClearColor. c. Semua perintah OpenGL menggunakan awalan _gl diikuti dengan huruf kapital pada setiap kata membentuk nama perintah contoh _glclearcolor. d. Semua perintah OpenGL menggunakan awalan _GL diikuti dengan huruf kapital pada setiap kata membentuk nama perintah contoh _GLClearColor. 4. Perhatikan posisi titik dalam koordinat cartesian seperti dalam gambar di bawah, pernyataan yang benar adalah

154 a. Satu pixel didefinisikan pada posisi (3,4) b. Satu pixel didefinisikan pada posisi (4,3) c. Satu pixel pada posisi(3,4) dapat membentuk gambar d. Satu pixel pada posisi(4,3) dapat membentuk gambar 5. Perintah glclear(gl_color_buffer_bit); adalah perintah untuk a. memberikan fungsi warna b. mendefinisikan sebuah objek c. memberi nilai koordinat pada sebuah objek d. menghapus layar 6. Bidang tertutup yang dibentuk minimal 3 simpul (titik) yang terhubung oleh garis (sisi) dan garis-garis tersebut tidak saling memotong merupakan bidang a. Poligon b. Polyline c. Multigon d. Oktogonal 7. File-file berikut diperlukan dalam pengintegrasian LWJGL ke dalam ide netbeans kecuali... a. Lwjgl-idenetbeans-X.X.zipLwj b. gl-docs-x.x.zip c.lwjgl-source-x.x.zip d.lwjgl-applet-x.x.zip 8. Garis a arah horisontal mempunyai panjang 400, dan garis b arah vertikal mempunyai tinggi 320. Tentukan pasangan titik koordinat untuk menggambar garis a dan garis b

155 Mengambar Garis (0,480) (320,100) (100,240) a b (0,0) (640,0) a. Garis a(100,240)(500,240) dan Garis b(320,100)(320,420) b. Garis a(100,240)(240,500) dan Garis b(320,100)(420,320) c. Garis a(100,240)(500,240) dan Garis b(320,100)(320,-220) d. Garis a(100,240)(240,400) dan Garis b(320,100)(320,320) 9. Gambar dibawah ini adalah proses... pada bidang komputer grafik a. Translasi b. Transformasi c. Rotasi d. Skala 10. Translasi dilakukan dengan penambahan translasi pada suatu titik koordinat dengan translation vector, yaitu (tx,ty), dimana tx adalah translasi menurut sumbu x dan ty adalah translasi menurut sumbu y. Koordinat baru titik yang ditranslasi adalah... a. x =x + tx dan y =y + ty sehingga titik setelah translasi adalah (x,y ) 143

156 b. x =x-tx dan y =y - ty sehingga titik setelah translasi adalah (x,y ) c. x =x * tx dan y =y * ty sehingga titik setelah translasi adalah (x,y ) d. x =x +(2 tx) dan y =y +(2 ty) sehingga titik setelah translasi adalah (x,y ) 11. Tiga elemen dasar dalam sistem koordinat 3D yang diperlukan dalam grafika komputer adalah... a. Titik 3D, vektor 3D, dan matrik 3D b. Translasi 3D, rotasi 3D, dan skala 3D c. Titik 3D, translasi 3D, dan rotasi 3D d. Vektor 3D, translasi 3D, dan rotasi 3D 12. Algoritma yang digunakan untuk menentukan titik-titik dalam dimensi dengan menggunakan pendekatan garis lurus adalah e. Algoritma DDA f. Algoritma Bessenham g. Algoritma differential analyzer h. Algoritma K-Cluster 13. Perintah berikut ini digunakan untuk menampilkan... void mydisplay(){ glclear(gl_color_buffer_bit); glbegin(gl_triangles); glvertex2f(-0.5, -0.5); glvertex2f(-0.5, 0.5); glvertex2f(0.5, 0.5); a. segitiga dengan tiga titik dengan satuan float b. segitiga dengan tiga titik dengan satuan integer c. persegiempat dengan tiga titik dengan satuan integer d. persegiempat dengan tiga titik dengan satuan float 14. Jika diketahui nilai koordinat dua titik (4,5) dan (10,9) maka dengan menggunakan algoritma DDA diperoleh nilai step yang tepat adalah i. 6 j. 5 k. 4 l Gambar di bawah ini adalah proses pembuatan objek 3D dari sebuah kubus, Hitunglah jumlah titik, sisi(face), dan jumlah titik setiap face

157 a. 8 titik, 6 face, dan setiap face terdiri dari 4 vertex b. 8 titik, 6 face, dan setiap face terdiri dari 2 vertex c. 8 titik, 6 face, dan setiap face terdiri dari 6 vertex d. 8 titik, 6 face, dan setiap face terdiri dari 8 vertex 16. Jika diketahui nilai s adalah 2 Tentukan koordinat baru titik (3,4) setalah melalui operasi penskalaan adalah... a.(5,6) b.(9,12) c.(5,12) d.(9,6) 17. Di bawah ini adalah perintah-perintah untuk memberikan tekstur pada objek 1 dimensi, kecuali a. GL_TEXTURE_1D b. GL_TEXTURE_RECTANGLE c. GL_TEXTURE_BUFFER d. GL_TEXTURE_1D_ARRAY 18. Penentuan apa yang dilihat oleh kamera biasanya ditentukan dengan sebuah titik (x,y,z) yang disebut... a. camera interest b. field of view c. virtual camera d. camera setting 19. Melakukan pengesetan kamera dalam bentuk setting lensa kamera disebut a. trnasformasi viewing b. transformasi viewport c. transformasi modeling d. transformasi proyeksi 145

10/10/2017. Teknologi Display SISTEM KOORDINAT DAN BENTUK DASAR GEOMETRI (OUTPUT PRIMITIF) CRT CRT. Raster Scan Display

10/10/2017. Teknologi Display SISTEM KOORDINAT DAN BENTUK DASAR GEOMETRI (OUTPUT PRIMITIF) CRT CRT. Raster Scan Display 1 2 SISTEM KOORDINAT DAN BENTUK DASAR GEOMETRI (OUTPUT PRIMITIF) Teknologi Display Cathode Ray Tubes (CRT) Liquid Crystal Display (LCD) 3 4 CRT Elektron ditembakkan dari satu atau lebih electron gun Kemudian

Lebih terperinci

Computer Graphic. Output Primitif dan Algoritma Garis. Erwin Yudi Hidayat. Computer Graphics C Version 2 Ed by Donald Hearn

Computer Graphic. Output Primitif dan Algoritma Garis. Erwin Yudi Hidayat. Computer Graphics C Version 2 Ed by Donald Hearn Computer Graphic Output Primitif dan Algoritma Garis Erwin Yudi Hidayat erwin@dsn.dinus.ac.id Computer Graphics C Version 2 Ed by Donald Hearn Addison Wesley is an imprint of erwin@dsn.dinus.ac.id CG -

Lebih terperinci

Computer Graphic. Output Primitif dan Algoritma Garis. Erwin Yudi Hidayat.

Computer Graphic. Output Primitif dan Algoritma Garis. Erwin Yudi Hidayat. Computer Graphic Output Primitif dan Algoritma Garis Erwin Yudi Hidayat erwin@research.dinus.ac.id Computer Graphics C Version 2 Ed by Donald Hearn Addison Wesley is an imprint of erwin@research.dinus.ac.id

Lebih terperinci

Sistem Multimedia. Image. Donny Reza, S.Kom

Sistem Multimedia. Image. Donny Reza, S.Kom Sistem Multimedia Image Donny Reza, S.Kom Image/Citra Image: representasi grafis dan visual dari suatu informasi yang dapat ditampilkan dalam layar komputer atau dicetak Berbagai bentuk image: Foto Gambar

Lebih terperinci

Menggambar Garis Horizontal, Vertikal dan Diagonal

Menggambar Garis Horizontal, Vertikal dan Diagonal Menggambar Garis Horizontal, Vertikal dan Diagonal Hasna Putri Izzati 3KA24 13115081 Mata Kuliah: Grafik Komputer & Pengolahan Citra Dosen: Lily Wulandari Fakultas: Ilmu Teknologi dan Informasi Jurusan:

Lebih terperinci

GRAFIK KOMPUTER & PENGOLAHAN CITRA

GRAFIK KOMPUTER & PENGOLAHAN CITRA GRAFIK KOMPUTER & PENGOLAHAN CITRA MEMBUAT GARIS MENGGUNAKAN OPENGL NAMA : ADRY FITRA AZHAR SIREGAR NPM : 10114361 KELAS : 3KA26 UNIVERSITAS GUNADARMA SISTEM INFORMASI PTA 2016 / 2017 PENGENALAN OPENGL

Lebih terperinci

Modul. Grafika Komputer. Disusun Oleh: Maya Amelia

Modul. Grafika Komputer. Disusun Oleh: Maya Amelia Modul Grafika Komputer Disusun Oleh: Maya Amelia Fakultas Ilmu Komputer Universitas Indo Global Mandiri 2012 DAFTAR ISI 1. PENGENALAN GRAFIKA KOMPUTER 1.1 Pengertian Grafika Komputer 1.2 Elemen-Elemen

Lebih terperinci

Jurnal Sarjana Teknik Informatika e-issn: Volume 2 Nomor 1, Februari 2014

Jurnal Sarjana Teknik Informatika e-issn: Volume 2 Nomor 1, Februari 2014 MEDIA PEMBELAJARAN ALGORITMA GARIS DAN LINGKARAN BERBASIS MULTIMEDIA 1 Meca Agustama, 2 Sri Handayaningsih (0530077701) 1,2 Program Studi Teknik Informatika Universitas Ahmad Dahlan Prof. Dr. Soepomo,

Lebih terperinci

Penggunaan Netbeans IDE, Hello World, variable dan Operator aritmetika.

Penggunaan Netbeans IDE, Hello World, variable dan Operator aritmetika. Topik Penggunaan Netbeans IDE, Hello World, variable dan Operator aritmetika. Tujuan Setelah menyelesaikan praktikum ini, mahasiswa diharapkan mampu: 1. Menggunakan Netbeans IDE untuk membuat program Java

Lebih terperinci

memilih apa yang akan dikerjakan selanjutnya, bertanya dan memberikan jawaban

memilih apa yang akan dikerjakan selanjutnya, bertanya dan memberikan jawaban BAB II LANDASAN TEORI 2.1 Multimedia Multimedia dapat diartikan sebagai pemanfaatan komputer untuk membuat dan menggabungkan teks, grafis, suara dan gambar bergerak (video dan animasi) dengan menggabungkan

Lebih terperinci

BAB 1. PENDAHULUAN 1.1 Latar Belakang 1.2 Rumusan Masalah 1.3 Tujuan

BAB 1. PENDAHULUAN 1.1 Latar Belakang 1.2 Rumusan Masalah 1.3 Tujuan BAB 1. PENDAHULUAN 1.1 Latar Belakang Sering kita jumpai dalam kehidupan sehari-hari dalam penyajian data menggunakan bentuk grafik. Grafik sering juga disebut sebagai diagram, bagan, maupun chart. Pada

Lebih terperinci

DIAN PRATIWI. ST, MTI

DIAN PRATIWI. ST, MTI DIAN PRATIWI. ST, MTI PEMROGRAMAN GRAFIKA KOMPUTER BERBASIS OPENGL Diterbitkan melalui Nida Dwi Karya Publishing PEMROGRAMAN GRAFIKA KOMPUTER BERBASIS OPENGL Oleh: Dian Pratiwi, ST, MTI Copyright 2015

Lebih terperinci

PENGENALAN CORELDRAW. Nita Yuliani. Abstrak. Pendahuluan

PENGENALAN CORELDRAW. Nita Yuliani. Abstrak. Pendahuluan PENGENALAN CORELDRAW Nita Yuliani Abstrak Dalam perkembangan teknologi yang sangat pesat ini, seni bisa dituangkan dalam bentuk yang bermacam-macam, terutama yang berkaitan dengan grafis. CorelDRAW tentunya

Lebih terperinci

MENGENAL GRAFIS dan PROGRAM APLIKASINYA

MENGENAL GRAFIS dan PROGRAM APLIKASINYA MENGENAL GRAFIS dan PROGRAM APLIKASINYA SK : Menggunakan Perangkat Lunak Pembuat Grafis KD : Menunjukkan Menu Ikon Yang Terdapat Dalam Perangkat Lunak Pembuat Grafis Oleh : HusnanSarofi http://husnan.com

Lebih terperinci

Didalam menampilkan peta yang sudah kita buat, kita akan menggunakan Slick2D sebagai sebuah frameworknya.

Didalam menampilkan peta yang sudah kita buat, kita akan menggunakan Slick2D sebagai sebuah frameworknya. 1 Teknologi Game Materi 2 Menampilkan peta di Game Tools yang dibutuhkan 1. JDK 6ux 2. Notepad++/Netbeans 6.x/JDeveloper/Eclipse Didalam menampilkan peta yang sudah kita buat, kita akan menggunakan Slick2D

Lebih terperinci

Rekomendasi Min Perangkat Keras. Prosesor dual core 1.5 GHz RAM 2 GB Monitor 10 " VGA Onboard Keyboard PS2 Mouse PS2

Rekomendasi Min Perangkat Keras. Prosesor dual core 1.5 GHz RAM 2 GB Monitor 10  VGA Onboard Keyboard PS2 Mouse PS2 Netbeans IDE Netbeans merupakan IDE (Integreted Development Environment) yang powerfull untuk membangun sebuah aplikasi berbasis Java, PHP, C/C++, Ruby dan lainnya. Netbeans awalnya diciptakan hanya untuk

Lebih terperinci

BERANDA SK / KD INDIKATOR MATERI LATIHAN UJI KOMPETENSI REFERENSI PENYUSUN SELESAI TEKNOLOGI INFORMASI DAN KOMUNIKASI

BERANDA SK / KD INDIKATOR MATERI LATIHAN UJI KOMPETENSI REFERENSI PENYUSUN SELESAI TEKNOLOGI INFORMASI DAN KOMUNIKASI Loading 25% 100% 50% 75% TEKNOLOGI INFORMASI DAN KOMUNIKASI MENGENAL GRAFIS DAN PROGRAM APLIKASINYA MATA PELAJARAN TIK KELAS XII / SEMESTER GANJIL TEKNOLOGI INFORMASI DAN KOMUNIKASI STANDAR MENGGUNAKAN

Lebih terperinci

BAB I PENDAHULUAN. untuk pengembangan aplikasi berbasis 3D yang meliputi bidang yang cukup luas

BAB I PENDAHULUAN. untuk pengembangan aplikasi berbasis 3D yang meliputi bidang yang cukup luas BAB I PENDAHULUAN 1.1. Latar Belakang Masalah Komputer Grafis 3D (tiga dimensi) merupakan teknologi yang dipakai untuk pengembangan aplikasi berbasis 3D yang meliputi bidang yang cukup luas mulai dari

Lebih terperinci

BAB 2 LANDASAN TEORI. adalah perintah yang dimengerti oleh komputer untuk melakukan tugas-tugas tertentu.

BAB 2 LANDASAN TEORI. adalah perintah yang dimengerti oleh komputer untuk melakukan tugas-tugas tertentu. BAB 2 LANDASAN TEORI 2.1. Visual Basic 6.0 Visual Basic adalah salah satu bahasa pemrograman komputer. Bahasa pemrograman adalah perintah yang dimengerti oleh komputer untuk melakukan tugas-tugas tertentu.

Lebih terperinci

BAB 4 IMPLEMENTASI DAN TAMPILAN LAYAR

BAB 4 IMPLEMENTASI DAN TAMPILAN LAYAR 141 BAB 4 IMPLEMENTASI DAN TAMPILAN LAYAR 4.1 Arsitektur Aplikasi Pengajaran Mata Kuliah Analisa dan Perancangan Sistem Informasi Berbasiskan Multimedia Arsitektur aplikasi pengajaran mata kuliah Analisa

Lebih terperinci

Bab 3 Metode dan Perancangan Sistem 3.1 Metode Pengembangan Sistem

Bab 3 Metode dan Perancangan Sistem 3.1 Metode Pengembangan Sistem Bab 3 Metode dan Perancangan Sistem 3.1 Metode Pengembangan Sistem Metode yang digunakan untuk pengembangan sistem dalam penelitian ini adalah model proses Prototype. Model prototype (Prototyping model)

Lebih terperinci

MODUL PRAKTIKUM PEMROGRAMAN BERORIENTASI OBJEK. Maimunah, S.Si,M.Kom

MODUL PRAKTIKUM PEMROGRAMAN BERORIENTASI OBJEK. Maimunah, S.Si,M.Kom MODUL PRAKTIKUM PEMROGRAMAN BERORIENTASI OBJEK Maimunah, S.Si,M.Kom PROGRAM STUDI TEKNIK KOMPUTER FAKULTAS TEKNIK UNIVERSITAS ISLAM 45 BEKASI 2014 1 Peraturan : 1. Mahasiswa harus berpakaian rapi dalam

Lebih terperinci

PEMBAGIAN STANDAR KOMPETENSI DAN KOMPETENSI DASAR PPLI MAHASISWA PENDIDIKAN INFORMATIKAN TAHUN 2016 KOMPTENSI DASAR

PEMBAGIAN STANDAR KOMPETENSI DAN KOMPETENSI DASAR PPLI MAHASISWA PENDIDIKAN INFORMATIKAN TAHUN 2016 KOMPTENSI DASAR PEMBAGIAN STANDAR KOMPETENSI DAN KOMPETENSI DASAR PPLI MAHASISWA PENDIDIKAN INFORMATIKAN TAHUN 2016 A. KOMPETENSI KEJURUAN 1. Rekayasa Perangkat Lunak (070) STANDAR KOMPETENSI 1. Menerapkan teknik elektronika

Lebih terperinci

PENGENALAN NETBEANS Algoritma & Pemrograman 2016/2017 Hastha Sunardi 2016 PENGENALAN NETBEANS. (Pertemuan: K[-]/L[1])

PENGENALAN NETBEANS Algoritma & Pemrograman 2016/2017 Hastha Sunardi 2016 PENGENALAN NETBEANS. (Pertemuan: K[-]/L[1]) PENGENALAN NETBEANS (Pertemuan: K[-]/L[1]) NetBeans adalah merupakan IDE yang ditujukan untuk memudahkan pemrograman java. Dalam NetBeans, pemrograman dilakukan berbasis visual dan event driven. Persis

Lebih terperinci

TIPE DATA PADA JAVA. Pertemuan (K-04/L-04)

TIPE DATA PADA JAVA. Pertemuan (K-04/L-04) TIPE DATA PADA JAVA Pertemuan (K-04/L-04) Alangkah baiknya kita mempelajari terlebih dahulu tentang apa itu tipe data dan mengenal ada berapa tipe data yang digunakan dalam Bahasa Pemrograman Java. Sudah

Lebih terperinci

BAB II LANDASAN TEORI

BAB II LANDASAN TEORI BAB II LANDASAN TEORI 2.1 Pengertian Aplikasi Aplikasi dapat dapat diartikan sebagai program computer yang dibuat untuk menolong manusia dalam melaksanakan tugas tertentu Aplikasi software yang dirancang

Lebih terperinci

BAB II TINJAUAN PUSTAKA

BAB II TINJAUAN PUSTAKA BAB II TINJAUAN PUSTAKA II.1. Aplikasi Aplikasi adalah suatu sub kelas perangkat lunak komputer yang memanfaatkan kemampuan komputer langsung untuk melakukan suatu tugas yang diinginkan pengguna. Contoh

Lebih terperinci

BAB 2 TINJAUAN TEORITIS. Sistem berasal dari bahasa Yunani yaitu Systema, yang artinya sekumpulan objek

BAB 2 TINJAUAN TEORITIS. Sistem berasal dari bahasa Yunani yaitu Systema, yang artinya sekumpulan objek BAB 2 TINJAUAN TEORITIS 2.1 Pengertian Sistem Sistem berasal dari bahasa Yunani yaitu Systema, yang artinya sekumpulan objek yang bekerja bersama-sama menghasilkan metode, prosedur, teknik yang digabungkan

Lebih terperinci

SISTEM INFORMASI GEOGRAFIS PENENTUAN LAHAN POTENSIAL DENGAN MENGGUNAKAN IMAGE PROCESSING

SISTEM INFORMASI GEOGRAFIS PENENTUAN LAHAN POTENSIAL DENGAN MENGGUNAKAN IMAGE PROCESSING REVIEW JURNAL SISTEM INFORMASI GEOGRAFIS PENENTUAN LAHAN POTENSIAL DENGAN MENGGUNAKAN IMAGE PROCESSING DISUSUN OLEH 1. Adriyanto Prasetyo (K3513003) 2. Muhammad Cholid Arrofiq (K3513041) PENDIDIKAN TEKNIK

Lebih terperinci

PENGEMBANGAN PROJECT MICROCONTROLLER DENGAN ARDUINO IDE

PENGEMBANGAN PROJECT MICROCONTROLLER DENGAN ARDUINO IDE PENGEMBANGAN PROJECT MICROCONTROLLER DENGAN ARDUINO IDE Dian Mustika Putri mustika@raharja.info :: https://dianmstkputri.wordpress.com Abstrak Pengembangan Microcontroller Arduino pada kalangan Programmer

Lebih terperinci

BAB 2 LANDASAN TEORI

BAB 2 LANDASAN TEORI BAB 2 LANDASAN TEORI 2.1 Pengertian Sistem Informasi Pada dasarnya sistem informasi merupakan suatu sistem yang dibuat oleh manusia yang terdiri dari komponen komponen dalam organisasi untuk mencapai suatu

Lebih terperinci

MICROSOFT POWERPOINT. Pendahuluan

MICROSOFT POWERPOINT. Pendahuluan MICROSOFT POWERPOINT Pendahuluan Microsoft Power Point adalah suatu software yang akan membantu dalam menyusun sebuah presentasi yang efektif, professional, dan juga mudah. Microsoft Power Point akan membantu

Lebih terperinci

BAB 2 LANDASAN TEORI. menganimasikannya, serta mudah dipelajari. Flash tidak hanya digunakan dalam

BAB 2 LANDASAN TEORI. menganimasikannya, serta mudah dipelajari. Flash tidak hanya digunakan dalam 5 BAB 2 LANDASAN TEORI 2.1 Pengenalan Adobe Flash Flash merupakan software yang memiliki kemampuan menggambar sekaligus menganimasikannya, serta mudah dipelajari. Flash tidak hanya digunakan dalam pembuatan

Lebih terperinci

BAB II TINJAUAN PUSTAKA

BAB II TINJAUAN PUSTAKA BAB II TINJAUAN PUSTAKA 2.1. Penelitian Terdahulu Adapun beberapa penelitian terdahulu mengenai perancangan game air strike. Dicky Abdullah (2007) pembuatan game air strike 3d. Penelitian tersebut di buat

Lebih terperinci

BAB 2 LANDASAN TEORI

BAB 2 LANDASAN TEORI BAB 2 LANDASAN TEORI 2.1 Animasi Animasi merupakan salah satu bagian grafika komputer yang menyajikan tampilantampilan yang sangat atraktif juga merupakan sekumpulan gambar yang ditampilkan secara berurutan

Lebih terperinci

JENIS PERANGKAT LUNAK

JENIS PERANGKAT LUNAK Dari perkembangan perangkat lunak, kita bisa membayangkan bagaimana perkembangan interaksi manusia dengan perangkat lunak. Bentuk paling primitif dari perangkat lunak, menggunakan aljabar Boolean, yang

Lebih terperinci

Pengenalan OpenGL. Sintax Perintah OpenGL. Library yang Berhubungan dengan OpenGL

Pengenalan OpenGL. Sintax Perintah OpenGL. Library yang Berhubungan dengan OpenGL Pengenalan OpenGL OpenGL adalah suatu graphic library yang sebagian bersifat open source, dipakai pada banyak platform (windows, linux) dan dapat digunakan pada berbagai jenis compiler seperti C++ atau

Lebih terperinci

BAB 2 LANDASAN TEORI

BAB 2 LANDASAN TEORI BAB 2 LANDASAN TEORI Bab ini akan menjelaskan masalah masalah teoritis yang berkaitan dalam pembuatan animasi bahasa latin. Pembahasan pada bab ini meliputi perangkat lunak yang digunakan yaitu Adobe Flash

Lebih terperinci

CEG4B3. Randy E. Saputra, ST. MT.

CEG4B3. Randy E. Saputra, ST. MT. CEG4B3 Randy E. Saputra, ST. MT. Jenis Graphics Multimedia Bitmap Graphics Lebih cocok untuk citra foto yang membutuhkan variasi warna yang kompleks Vector Graphics Lebih cocok untuk ilustrasi yang membutuhkan

Lebih terperinci

KARTU SOAL TAHUN 2007 BUTIR SOAL 1

KARTU SOAL TAHUN 2007 BUTIR SOAL 1 TAHUN 2007 MATA DIKLAT : Produktif Multi Media KODE LEVEL Mengoperasikan peripheral untuk pembuatan grafis 1 Siswa dapat menyiapkan pengunaan dan pengoperasian peripheral grafis Kabel yang saat ini biasa

Lebih terperinci

1. MENGENAL VISUAL BASIC

1. MENGENAL VISUAL BASIC 1. MENGENAL VISUAL BASIC 1.1 Mengenal Visual Basic 6.0 Bahasa Basic pada dasarnya adalah bahasa yang mudah dimengerti sehingga pemrograman di dalam bahasa Basic dapat dengan mudah dilakukan meskipun oleh

Lebih terperinci

Sistem Grafika Komputer. Sistem yang memungkinkan operator untuk berdialog langsung dengan yang terlihat dilayar komputer

Sistem Grafika Komputer. Sistem yang memungkinkan operator untuk berdialog langsung dengan yang terlihat dilayar komputer Grafika Komputer Sistem Grafika Komputer Sistem yang memungkinkan operator untuk berdialog langsung dengan yang terlihat dilayar komputer Jenis Sistem Grafika Komputer Sistem grafika komputer dibedakan

Lebih terperinci

BAB II LANDASAN TEORI

BAB II LANDASAN TEORI BAB II LANDASAN TEORI 2.1 Sekilas Mengenai Microsoft Visual Basic Versi 6 Microsoft Visual Basic adalah sebuah bahasa pemograman komputer. Bahasa pemograman adalah perintah perintah atau instruksi yang

Lebih terperinci

Pendahuluan. Komang Anom Budi Utama, SKom

Pendahuluan. Komang Anom Budi Utama, SKom Pendahuluan Komang Anom Budi Utama, SKom komang_anom@staff.gunadarma.ac.id Pengenalan Processing Processing adalah salah satu dari bahasa pemrograman dan lingkungan pengembangan open sorce. Processing

Lebih terperinci

MODUL PRAKTIKUM PEMROGRAMAN BERORIENTASI OBJEK (JAVA) PERTEMUAN 1 PENGENALAN LINGKUNGAN PEMROGRAMAN JAVA

MODUL PRAKTIKUM PEMROGRAMAN BERORIENTASI OBJEK (JAVA) PERTEMUAN 1 PENGENALAN LINGKUNGAN PEMROGRAMAN JAVA PERTEMUAN 1 PENGENALAN LINGKUNGAN PEMROGRAMAN JAVA A. Instalasi paket Java Development Kit (JDK) 1. Download paket JDK MODUL PRAKTIKUM PEMROGRAMAN BERORIENTASI OBJEK (JAVA) Pertama masuk ke situs http://java.sun.com/javase/downloads/index.jsp,

Lebih terperinci

Contoh dari aplikasi grafis bitmap adalah Adobe Photoshop, Corel Photopaint, Microsoft Photo Editor, Macromedia Fireworks, dll.

Contoh dari aplikasi grafis bitmap adalah Adobe Photoshop, Corel Photopaint, Microsoft Photo Editor, Macromedia Fireworks, dll. Aplikasi komputer atau aplikasi software adalah program komputer yang ditulis dalam suatu bahasa pemrograman dan dipergunakan untuk menyelesaikan masalah tertentu dan melakukan pekerjaan sesuai kebutuhan

Lebih terperinci

Mempersiapkan Presentasi Profil Perusahaan

Mempersiapkan Presentasi Profil Perusahaan Mempersiapkan Presentasi Profil Perusahaan 1 Presentasi Pengertian Presentasi Presentasi adalah sebuah kegiatan yang menunjukkan atau menyajikan sebuah informasi atau gagasan kepada orang lain. Tujuan

Lebih terperinci

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN BAB III ANALISA DAN PERANCANGAN 3.1 Rancangan Awal Pemodelan Blender merupakan software grafis 3 Dimensi yang sangat baik. Tidak hanya menyediakan fasilitas untuk membuat object 3D dengan mudah tapi juga

Lebih terperinci

BAB III OUTPUT PRIMITIF

BAB III OUTPUT PRIMITIF BAB III OUTPUT PRIMITIF OBJEKTIF : Pada Bab ini mahasiswa mempelajari tentang : 1. Primitif Grafis. Algoritma Pembentukan Garis 3. Algoritma Pembentukan Lingkaran 4. Algoritma Pembentukan Ellips TUJUAN

Lebih terperinci

Pengenalan OpenGL. Sintax Perintah OpenGL. Library yang Berhubungan dengan OpenGL

Pengenalan OpenGL. Sintax Perintah OpenGL. Library yang Berhubungan dengan OpenGL Pengenalan OpenGL OpenGL adalah suatu graphic library yang sebagian bersifat open source, dipakai pada banyak platform (windows, linux) dan dapat digunakan pada berbagai jenis compiler seperti C++ atau

Lebih terperinci

SISTEM INFORMASI GEOGRAFI

SISTEM INFORMASI GEOGRAFI SISTEM INFORMASI GEOGRAFI Sistem Informasi Geografis merupakan sistem berbasis computer yang didesain untuk mengumpulkan, mengelola, memanipulasi, dan menampilkan informasi spasial (keruangan)1. Yakni

Lebih terperinci

BAB 2 LANDASAN TEORI

BAB 2 LANDASAN TEORI BAB 2 LANDASAN TEORI 2.1 Pengertian Komputer Istilah komputer (computer) berasal dari bahasa latin computere yang berarti menghitung. Dalam Bahasa Inggris komputer berasal dari kata to compute yang artinya

Lebih terperinci

HANDOUT DASAR ANIMASI

HANDOUT DASAR ANIMASI HANDOUT DASAR ANIMASI AREA KERJA MACROMEDIA FLASH MX 2004 TKJ Macromedia Flash MX 2004 adalah sebuah program animasi yang telah banyak digunakan oleh para desaier untuk menghasilkan desain yang profesional.

Lebih terperinci

Aplikasi-aplikasi Grafika Komputer

Aplikasi-aplikasi Grafika Komputer [IF 7021] Grafika Komputer Terapan Aplikasi-aplikasi Grafika Komputer Alfa Ryano 23507003 Program Magister Informatika - Sistem Informasi Sekolah Pascasarja Institut Teknologi Bandung 2008 Aplikasi-aplikasi

Lebih terperinci

BAB II TINJAUAN PUSTAKA

BAB II TINJAUAN PUSTAKA BAB II TINJAUAN PUSTAKA II.1. Aplikasi Aplikasi adalah suatu subkelas perangkat lunak komputer yang memanfaatkan kemampuan komputer langsung untuk melakukan suatu tugas yang diinginkan pengguna. Contoh

Lebih terperinci

BAB I PENDAHULUAN 1.1 Latar Belakang

BAB I PENDAHULUAN 1.1 Latar Belakang BAB I PENDAHULUAN 1.1 Latar Belakang Objek tiga dimensi merupakan salah satu komponen multimedia yang memegang peranan sangat penting sebagai bentuk informasi visual. Objek tiga dimensi dibentuk oleh sekumpulan

Lebih terperinci

1 Dasar-Dasar MineScape

1 Dasar-Dasar MineScape 1 Dasar-Dasar MineScape Buku petunjuk ini disiapkan sebagai bagian dari training Minescape. Untuk memahami buku ini, sebuah copy data telah dipersiapkan. Minescape merupakan software perencanaan tambang

Lebih terperinci

RANCANG BANGUN MODUL AJAR GRAFIKA KOMPUTER BERBASIS WEB

RANCANG BANGUN MODUL AJAR GRAFIKA KOMPUTER BERBASIS WEB RANCANG BANGUN MODUL AJAR GRAFIKA KOMPUTER BERBASIS WEB Juni Nurma Sari, Melvawati, dan Meilany Dewi Jurusan Teknik Komputer - Politeknik Caltex Riau Kampus Politeknik Caltex Riau, Jl. UmbanSari no 1,

Lebih terperinci

GIMP & INKSCAPE. Materi Ujian Sekolah Tertulis (Grade 12)

GIMP & INKSCAPE. Materi Ujian Sekolah Tertulis (Grade 12) Materi Ujian Sekolah Tertulis (Grade 12) GIMP & INKSCAPE Gambar Bitmap vs Vektor Dalam dunia desain digital, kita mengenal 2 jenis gambar yang berbeda yang dipresentasikan melalui komputer, yaitu gambar

Lebih terperinci

Komputer & Software Semester Ganjil 2014 Fak. Teknik Jurusan Teknik Informatika.

Komputer & Software Semester Ganjil 2014 Fak. Teknik Jurusan Teknik Informatika. Komputer & Software Semester Ganjil 2014 Fak. Teknik Jurusan Teknik Informatika Universitas i Pasundan Caca E Supriana S Si MT Caca E. Supriana, S.Si., MT. caca.e.supriana@unpas.ac.id Komputer Komputer

Lebih terperinci

SUMBER BELAJAR PENUNJANG PLPG

SUMBER BELAJAR PENUNJANG PLPG SUMBER BELAJAR PENUNJANG PLPG 2017 [TIK] BAB VIII PEMROGRAMAN BERORIENTASI OBJEK [Alfa Faridh Suni] KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN DIREKTORAT JENDERAL GURU DAN TENAGA KEPENDIDIKAN 2017 BAB VIII

Lebih terperinci

BAB II TINJAUAN PUSTAKA. Multimedia dapat diartikan sebagai penggunaan beberapa media

BAB II TINJAUAN PUSTAKA. Multimedia dapat diartikan sebagai penggunaan beberapa media BAB II TINJAUAN PUSTAKA 2.1 Multimedia Multimedia dapat diartikan sebagai penggunaan beberapa media untuk menggabungkan dan menyampaikan informasi dalam bentuk teks, audio, grafik, animasi, dan video.

Lebih terperinci

Animation. Semua gerakan yang Anda pikirkan, dapat dilakukan dalam Maya.

Animation. Semua gerakan yang Anda pikirkan, dapat dilakukan dalam Maya. Pengenalan Autodesk Maya 2009! BAB 1 Pada maya versi ini Anda akan diberi kemudahan dalam pembuatan games, film, TV, dan desain grafis. Maya 2009 memberikan sejumlah fitur baru dan perangkat tambahan yang

Lebih terperinci

BAB 4 IMPLEMENTASI DAN EVALUASI

BAB 4 IMPLEMENTASI DAN EVALUASI 54 BAB 4 IMPLEMENTASI DAN EVALUASI 4.1 Implementasi Program 4.1.1 Spesifikasi Kebutuhan Program Spesifikasi Perangkat Keras Perangkat keras yang digunakan untuk merancang sistem ini adalah : Processor

Lebih terperinci

BAB 2 LANDASAN TEORI. Komputer berasal dari bahasa Latin computare yang artinya menghitung. Jadi

BAB 2 LANDASAN TEORI. Komputer berasal dari bahasa Latin computare yang artinya menghitung. Jadi BAB 2 LANDASAN TEORI 2.1 Pengertian Komputer Komputer berasal dari bahasa Latin computare yang artinya menghitung. Jadi komputer dapat diartikan sebagai alat untuk menghitung. Perkembangan teknologi dan

Lebih terperinci

Modul Praktikum 1 Pemograman Berorientasi Objek

Modul Praktikum 1 Pemograman Berorientasi Objek Modul Praktikum 1 Pemograman Berorientasi Objek 1. Judul : Mengenal Lingkup Pemograman 2. Tujuan Percobaan : Diakhir praktikum, mahasiswa diharapkan mampu : Menuliskan program Java menggunakan text editor

Lebih terperinci

PRAKTIKUM-2 PENGENALAN ARCVIEW

PRAKTIKUM-2 PENGENALAN ARCVIEW PRAKTIKUM-2 PENGENALAN ARCVIEW Tujuan: - Mahasiswa dapat mengenal software Arcview beserta menu-menu yang terdapat di dalamnya - Mahasiswa dapat mengoperasikan software Arcview Pendahuluan Software ArcView

Lebih terperinci

BAB 3 Mengenali Lingkup Pemrograman Anda

BAB 3 Mengenali Lingkup Pemrograman Anda BAB 3 Mengenali Lingkup Pemrograman Anda 3.2 Tujuan Dalam sesi ini, kita akan membahas tentang bagaimana menulis, meng-compile dan menjalankan(run) program Java. Terdapat 2 cara dalam melakukannya, yang

Lebih terperinci

BAB 1 PENDAHULUAN. 1.1 Latar Belakang

BAB 1 PENDAHULUAN. 1.1 Latar Belakang BAB 1 PENDAHULUAN 1.1 Latar Belakang Pada dasarnya pembelajaran merupakan proses komunikasi antara guru dan peserta didik. Proses komunikasi yang terjadi tidak selamanya berjalan dengan lancar, bahkan

Lebih terperinci

BAB III ANALISIS MASALAH DAN RANCANGAN PROGRAM

BAB III ANALISIS MASALAH DAN RANCANGAN PROGRAM BAB III ANALISIS MASALAH DAN RANCANGAN PROGRAM III.1. Analisa Masalah Simulasi 3D mempunyai fungsi utama untuk membuat pemodelan 3D. Dari pemodelan 3D dapat diciptakan karya yang spektakuler seperti special

Lebih terperinci

BAB 2 LANDASAN TEORI

BAB 2 LANDASAN TEORI BAB 2 LANDASAN TEORI 2.1 Pengertian Komputer Komputer (computer) berasal dari bahasa Latin computare yang berarti menghitung. Komputer mempunyai arti yang sangat luas dan berbeda untuk orang yang berbeda.

Lebih terperinci

DASAR MENGGUNAKAN VISUAL BASIC 6.0

DASAR MENGGUNAKAN VISUAL BASIC 6.0 DASAR MENGGUNAKAN VISUAL BASIC 6.0 Apa itu Visual Basic? Kata Visual menunjukkan cara yang digunakan untuk membuat Graphical User Interface (GUI). Dengan cara ini Anda tidak lagi menuliskan instruksi pemrograman

Lebih terperinci

Dwiny Meidelfi, M.Cs

Dwiny Meidelfi, M.Cs Dwiny Meidelfi, M.Cs Tujuan: Praktikan mengerti perbedaan dari sistem koordinat kartesius dan sistem koordinat layar Praktikan mengetahui software yang digunakan dalam Kerja Lab Grafika Komputer titik

Lebih terperinci

BAB 2 LANDASAN TEORI

BAB 2 LANDASAN TEORI BAB 2 LANDASAN TEORI 2.1 Pengertian Komputer Teknologi komputer sesungguhnya telah banyak merubah sistem tata kerja yang digunakan oleh manusia yang bergerak di bidang informasi. Istilah komputer mempunyai

Lebih terperinci

Pemrograman Visual. Pengenalan Visual Basic. Sisilia Thya Safitri, MT Agus Priyanto, M.KOM

Pemrograman Visual. Pengenalan Visual Basic. Sisilia Thya Safitri, MT Agus Priyanto, M.KOM Pemrograman Visual Pengenalan Visual Basic Sisilia Thya Safitri, MT Agus Priyanto, M.KOM 20 September 2016 VISI S1 IF Menjadi Program Studi Informatika unggulan dalam pengembangan Teknologi Informasi yang

Lebih terperinci

PENGGUNAAN PROCESSING DALAM KOMPUTER GRAFIK

PENGGUNAAN PROCESSING DALAM KOMPUTER GRAFIK PENGGUNAAN PROCESSING DALAM KOMPUTER GRAFIK Meiyanto Eko Sulistyo Jurusan Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret, Surakarta Email : mekosulistyo@uns.ac.id Abstract

Lebih terperinci

TUGAS PROGRAM DIAGONAL, VETIKAL, DAN HORIZONTAL OPENGL (MENGGUNAKAN JAVA) NAMA : SYIFA MUTIARA SARI KELAS : 3KA23 NPM :

TUGAS PROGRAM DIAGONAL, VETIKAL, DAN HORIZONTAL OPENGL (MENGGUNAKAN JAVA) NAMA : SYIFA MUTIARA SARI KELAS : 3KA23 NPM : TUGAS PROGRAM DIAGONAL, VETIKAL, DAN HORIZONTAL OPENGL (MENGGUNAKAN JAVA) NAMA : SYIFA MUTIARA SARI KELAS : 3KA23 NPM : 16115784 Untuk membuat program garis vertikal, horizontal, dan diagonal kita membutuhkan

Lebih terperinci

Modul Praktikum Ke-1

Modul Praktikum Ke-1 Bahasa Pemrograman Dasar Fathurrohman 1 Modul Praktikum Ke-1 (Tampilan VB, Event, Property, Objek Kontrol : form, text, label, command) Mengenal Visual Basic (VB) Visual Basic adalah salah satu perangkat

Lebih terperinci

BAB 3 PERANCANGAN DAN PEMBUATAN. Engine akan dirancang agar memenuhi syarat maintainability, reusability dan

BAB 3 PERANCANGAN DAN PEMBUATAN. Engine akan dirancang agar memenuhi syarat maintainability, reusability dan 13 BAB 3 PERANCANGAN DAN PEMBUATAN 3.1 Perancangan Engine Engine akan dirancang agar memenuhi syarat maintainability, reusability dan usability. Maintainability berarti kode program engine harus mudah

Lebih terperinci

3. Jika y1 = y2 (garis horisontal), maka (a) x = x + 1 dan y tetap (b) gambar titik (x,y) di layar (c) Selesai

3. Jika y1 = y2 (garis horisontal), maka (a) x = x + 1 dan y tetap (b) gambar titik (x,y) di layar (c) Selesai .3.1 Algoritma Brute Force Algoritma brute force untuk membentuk garis didasarkan pada persamaan (-6), yaitu : 1. Tentukan dua titik ujung (x1,y1) dan (x,y). Jika x1 = x (garis vertikal), maka (a) y =

Lebih terperinci

BAB 3 Mengenali Lingkup Pemrograman Anda

BAB 3 Mengenali Lingkup Pemrograman Anda BAB 3 Mengenali Lingkup Pemrograman Anda 3.1 Tujuan Dalam bagian ini, kita akan membahas tentang bagaimana menulis, mengkompilasi dan menjalankan program Java. Terdapat dua cara dalam melakukannya, yang

Lebih terperinci

MODUL I PENGENALAN VISUAL BASIC.NET

MODUL I PENGENALAN VISUAL BASIC.NET MODUL I PENGENALAN VISUAL BASIC.NET A. TUJUAN Memahami platform Microsoft.NET. Mengenal Integrated Development Environment (IDE) Visual Basic.NET. Memahami struktur project Visual Basic.NET. Memahami jenis-jenis

Lebih terperinci

Dasar Pemrograman Java

Dasar Pemrograman Java Fakultas : FTI Modul ke : Praktikum 1 Program Studi : Informatika Pertemuan : Pekan II Mata Kuliah : 52323306 PBO Halaman : 14 Pemrograman Berorientasi Obyek Modul I. Dasar Pemrograman Java 1.1 PETUNJUK

Lebih terperinci

Tabel 1. Instruksi untuk menampilkan teks No. Bahasa Pemrograman Instruksi 1. Pascal WRITE ( Bahasa pemrograman itu mudah );

Tabel 1. Instruksi untuk menampilkan teks No. Bahasa Pemrograman Instruksi 1. Pascal WRITE ( Bahasa pemrograman itu mudah ); PERTEMUAN I BAHASA PEMROGRAMAN JAVA DAN PENGENALAN NETBEANS 1. Program dan Bahasa Pemrograman Di dalam dunia komputer sering kali dijumpai istilah program dan bahasa pemrograman. Kedua istilah tersebut

Lebih terperinci

Membuat Iklan Produk Dengan 3DStudio Max

Membuat Iklan Produk Dengan 3DStudio Max Membuat Iklan Produk Dengan 3DStudio Max Iklan menjadi sarana yang vital sebagai media promosi suatu produk dari sebuah perusahaan, apalagi bila disajikan dengan menarik dan dinamis. Banyak faktor yang

Lebih terperinci

BAB II TINJAUAN PUSTAKA

BAB II TINJAUAN PUSTAKA BAB II TINJAUAN PUSTAKA 2.1 Komputerisasi Komputerisasi merupakan suatu peralatan elektronik yang dilengkapi dengan mikroprosesor yang terdiri dari ribuan rangkaian elektronik. Dalam sistem komputer, prosesor

Lebih terperinci

BAB IV HASIL DAN UJI COBA

BAB IV HASIL DAN UJI COBA BAB IV HASIL DAN UJI COBA IV.1. Analisa Hasil Dalam bab ini akan dijelaskan dan ditampilkan bagaimana hasil dari rancangan sistem yang dibuat beserta pembahasan tentang sistem tersebut. Adapun hasil dari

Lebih terperinci

Praktikum 1 Installation for OpenCV

Praktikum 1 Installation for OpenCV Praktikum 1 Installation for OpenCV Persiapan Praktikum ini dapat dikerjakan dengan syarat mahasiswa: - Memiliki konsep dasar pemrograman dan pengoperasian MS.Visual C++ - Memiliki konsep dasar image processing

Lebih terperinci

CONTOH SOAL UJIAN KOMPETENSI GURU (UKG) 2012 MATA PELAJARAN TIK

CONTOH SOAL UJIAN KOMPETENSI GURU (UKG) 2012 MATA PELAJARAN TIK CONTOH SOAL UJIAN KOMPETENSI GURU (UKG) 2012 MATA PELAJARAN TIK No. Materi Indikator Contoh Soal 1 Pengantar TIK Menjelaskan fungsi berbagai peralatan teknologi informasi dan Perangkat lunak yang berhubungan

Lebih terperinci

Pendahuluan 9/7/2011. Overview. Deskripsi

Pendahuluan 9/7/2011. Overview. Deskripsi Pertemuan : I Dosen Pembina : Sriyani Violina Danang Junaedi Pendahuluan Overview Deskripsi Tujuan Instruksional Kaitan Materi Urutan Bahasan Penilaian Grade Referensi 2 Deskripsi Tujuan Instruksional

Lebih terperinci

BAB V IMPLEMENTASI SISTEM

BAB V IMPLEMENTASI SISTEM BAB V IMPLEMENTASI SISTEM Bab ini berisi uraian mengenai tahapan untuk membangun rancangan sistem baru. Kegiatan yang dibahas meliputi pengujian perangkat lunak, dan instalasi. 5.1 Implementasi Penjelasan

Lebih terperinci

INSTRUKSI PENCABANGAN

INSTRUKSI PENCABANGAN INSTRUKSI PENCABANGAN Sebagai pengembang (programmer) sudah pasti mengetahui jenis operasi instruksi. Salah satu yang perlu dipelajari atau dimengerti adalah operasi instruksi pencabangan. 3.1 Pencabangan

Lebih terperinci

Microsoft. Office 2007

Microsoft. Office 2007 Microsoft Office 2007 Mengenal Microsoft Office PowerPoint 2007 Microsoft PowerPoint 2007 adalah program yang digunakan untuk membuat slide atau presentasi. PowerPoint 2007 merupakan versi terbaru dari

Lebih terperinci

3 MEMBUAT DATA SPASIAL

3 MEMBUAT DATA SPASIAL 3 MEMBUAT DATA SPASIAL 3.1 Pengertian Digitasi Peta Digitasi secara umum dapat didefinisikan sebagai proses konversi data analog ke dalam format digital. Objek-objek tertentu seperti jalan, rumah, sawah

Lebih terperinci

BAB II LANDASAN TEORI

BAB II LANDASAN TEORI BAB II LANDASAN TEORI 2.1 Rekayasa Perangkat Lunak RPL (Rekayasa Perangkat Lunak) adalah suatu disiplin ilmu yang mempelajari semua aspek produksi dalam suatu proses perancangan suatu perangkat lunak /

Lebih terperinci

DASAR-DASAR MACROMEDIA FLASH

DASAR-DASAR MACROMEDIA FLASH DASAR-DASAR MACROMEDIA FLASH Flash merupakan program grafis animasi yang diproduksi oleh Macromedia corp, yaitu sebuah vendor software yang bergerak di bidang animais web. Macromedia Flash pertama kali

Lebih terperinci

Pada komputer grafik ada 3 macam sistem koordinat yang harus di perhatikan :

Pada komputer grafik ada 3 macam sistem koordinat yang harus di perhatikan : Pada komputer grafik ada 3 macam sistem koordinat yang harus di perhatikan : Koordinat nyata Koordinat sistem (koordinat cartesian) Koordinat tampilan / layar Grafika Komputer Page 2 Adalah koordinat yang

Lebih terperinci

BAB 2 LANDASAN TEORI. Data adalah fakta atau bagian dari fakta yang digambarkan dengan simbol-simbol,

BAB 2 LANDASAN TEORI. Data adalah fakta atau bagian dari fakta yang digambarkan dengan simbol-simbol, BAB 2 LANDASAN TEORI 2.1 Data dan Informasi Data adalah fakta atau bagian dari fakta yang digambarkan dengan simbol-simbol, gambar-gambar, nilai-nilai, bilangan-bilangan, uraian karakter yang mempunyai

Lebih terperinci

Proses Clipping Menggunakan Algoritma Cohen-Sutherland pada Ruang Dimensi Tiga

Proses Clipping Menggunakan Algoritma Cohen-Sutherland pada Ruang Dimensi Tiga Proses Clipping Menggunakan Algoritma Cohen-Sutherland pada Ruang Dimensi Tiga Veronica Lusiana Program Studi Teknik Informatika, Universitas Stikubank Semarang Email: verolusiana@yahoo.com Abstrak Menentukan

Lebih terperinci

BAB 4 IMPLEMENTASI DAN EVALUASI. membutuhkan spesifikasi Perangkat Keras (Hardware) dan Perangkat Lunak (Software)

BAB 4 IMPLEMENTASI DAN EVALUASI. membutuhkan spesifikasi Perangkat Keras (Hardware) dan Perangkat Lunak (Software) 108 BAB 4 IMPLEMENTASI DAN EVALUASI 4.1 Implementasi Implementasi majalah elektronik Bitmap beserta editor majalah ini akan membutuhkan spesifikasi Perangkat Keras (Hardware) dan Perangkat Lunak (Software)

Lebih terperinci