MODUL PROGRAM KEAHLIAN GANDA

(1)

i

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

(2)

ii

Penulis:

1. Eko Subiyantoro, S.Pd., S.T., MT. Email: [email protected]

Penelaah:

1. Siarra Maulida Asrin, S.T [081562783394], Email: [email protected]

2. Abdul Haliq, S.Pd., M.Pd., [085341259862] Email : [email protected]

3. Dyah Darma Andayani, S.T, M.Tel.Eng (081355721216) Email : [email protected]

Ilustrator :

1. Faizal Reza Nurzeha., A.Md

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.

(3)

iii

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 2015. 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. 195908011985031002

(4)

(5)

v

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 dalam kegiatan pembinaan karir bagi guru dan tenaga kependidikan.

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,

(6)

vi

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 ... 14 E.Latihan/Tugas ... 14 F.Rangkuman ... 15 G.Umpan Balik……… 16 H.Kunci Jawaban ... 16

KEGIATAN BELAJAR 2 OPENGL DAN LWJGL ... 19

C.Uraian Materi ... 19 D.Aktivitas Pembelajaran ... 22 E.Latihan/Tugas ... 31 F.Rangkuman ... 31 G. Umpan Balik……….. .. 32 H.Kunci Jawaban ... 32

(7)

vii

KEGIATAN BELAJAR 3 PRIMITIF OBJEK ... 35

C.Uraian Materi ... 35 D.Aktivitas Pembelajaran ... 38 E.Latihan/Tugas ... 43 F.Rangkuman ... 43 G. Umpan Balik………. 44 H.Kunci Jawaban ... 44

KEGIATAN BELAJAR 4 PEMODELAN OBJEK 2 DIMENSI ... 51

C.Uraian Materi ... 51 D.Aktivitas Pembelajaran ... 55 E.Latihan/Tugas ... 62 F.Rangkuman ... 63 G. Umpan Balik………. 63 H.Kunci Jawaban ... 64

KEGIATAN BELAJAR 5 PEMBUATAN OBJEK 3 DIMENSI ... 71

C.Uraian Materi ... 71 D.Aktivitas Pembelajaran ... 73 E.Latihan/Tugas ... 78 F.Rangkuman ... 79 G. Umpan Balik………... 80 H.Kunci Jawaban ... 80

KEGIATAN BELAJAR 6 PEMBUATAN TEKSTURE ... 85

C.Uraian Materi ... 85

(8)

viii

E.Latihan/Tugas ... 96

F.Rangkuman ... 97

G. Umpan Balik………. 98

H. Kunci Jawaban………. 98

KEGIATAN BELAJAR 7 TRANSFORMASI PROYEKSI ... 105

C.Uraian Materi ... 105 D.Aktivitas Pembelajaran ... 109 E.Latihan/Tugas ... 114 F.Rangkuman ... 115 G.Umpan Balik………. . 116 H.Kunci Jawaban ... 116

KEGIATAN BELAJAR 8 RENDERING ... 121

C.Uraian Materi ... 121 D.Aktivitas Pembelajaran ... 124 E.Latihan/Tugas ... 134 F.Rangkuman ... 136 G. Umpan Balik………137 H. Kunci Jawaban………. 138 PENUTUP ... 139 EVALUASI ... 141 GLOSARIUM ... 145 DAFTAR PUSTAKA ... 149

(9)

ix

DAFTAR GAMBAR

Gambar 1 Peta Kedudukan Modul Grafika Komputer ... 3

Gambar 2 Struktur Modul Grafika Komputer ... 4

Gambar 3 Translasi ... 52

Gambar 4 Rotasi... 52

Gambar 5 Skala ... 53

Gambar 6 Koordinat ... 68

Gambar 7 Surface ... 68

Gambar 8 Vertex dan Edge ... 68

Gambar 9 Penggunaan Teksture dalam Game Chect Out 3D ... 82

Gambar 10 Analogi Pengambilan Gambar oleh Kamera ... 102

Gambar 11 Transformasi Ortogonal dan Proyeksi ... 103

Gambar 12 Transformasi Ortogonal... 104

(10)

(11)

xi

DAFTAR TABEL

Tabel 1 Peta Kompetensi ... 3

Tabel 2 Data Algoritma DDA(Digital Differential Analyzer) ... 38

Tabel 4 Vertex Penyusun Kubus ... 93

(12)

xii

(13)

1

PENDAHULUAN

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.

(14)

2

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

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.

B. Tujuan

(15)

3 Desain Sistem Basis Data

(50 JP) 1

Sistem Manajemen Basis Data (50 JP)

Pemrograman Berorientasi Objek (50 JP) Pemrograman Berbasis Dekstop (50 JP) Pemrograman Berbasis Perangkat Bergerak (50 JP) Pemrograman Web Dinamis

(50 JP) Grafika Komputer

(50 JP)

Proyek Sistem Informasi Berbasis Dekstop

(50 JP)

Proyek Sistem Informasi Berbasis Web

(50 JP)

Proyek Sistem Informasi Berbasis Perangkat Bergerak

(50 JP) 2 5 3 4 6 7 8 9 10

Gambar 1 Peta kedudukan Modul Grafika Komputer

Tabel 1 Peta kompetensi Grafika Komputer :

Kompetensi Utama

Standar Kompetensi Guru Kompetensi

Inti Guru (KIG)

Kompetensi Guru Keahlian (KGK) Indikator pencapaian Kompetensi Profesional 1. Menguasai materi, struktur, konsep dan pola pikir keilmuan yang mendukung mata pelajaran yang diampu 20.13 Membangun objek 3D menggunakan konsep pemrograman grafik 20.13.1 Menganalisis Integrated Development Environment (IDE) pemrograman grafik

20.13.2 Membuat instruksi dasar OPENGL 20.13.3 Membuat pemodelan objek 3D menggunakan OPENGL 20.13.4 Membuat pergerakan objek 3D menggunakan OPENGL

(16)

4

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

Topik 1 Dasar-Dasar Grafika Komputer Topik 2 Pemodelan Objek 2 Dimensi Topik 3 Pemodelan Objek 3 Dimensi Topik 4 Rendering Kegiatan Belajar 1 Pengantar Grafika Komputer Kegiatan Belajar 2 OpenGL dan LWJGL Kegiatan Belajar 3 Primitif Drawing Kegiatan Belajar 4 Pembuatan Objek 2 Dimensi Kegiatan Belajar 5 Pembuatan objek 3 Dimensi Kegiatan Belajar 7 Transformasi Proyeksi Kegiatan Belajar 6 Pembuatan Teksture Kegiatan Belajar 8 Lighting dan Shading

Gambar 2 Struktur modul PKB Guru RPL Grade 7 Grafika Komputer

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 masing-masing 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 :

D. Ruang Lingkup Penggunaan Modul

(17)

5 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.

(18)

(19)

(20)

(21)

9

DASAR-DASAR GRAFIKA KOMPUTER

Pengantar Grafika Komputer

Setelah mengikuti kegiatan belajar 1 ini peserta diklat diharapkan dapat :

1. Melalui studi literatur peserta diklat dapat menganalisis komponen-komponen penting dalam grafika komputer.

2. Melalui diskusi peserta diklat dapat menggambarkan peranan grafika komputer dalam berbagai bidang.

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

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.

A. Tujuan Pembelajaran

B. Indikator Pencapaian Kompetensi

(22)

10

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

(23)

bermacam-11 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

(24)

12

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

(25)

13 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.

(26)

14

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.

Peserta diklat dibagi menjadi beberapa kelompok untuk mendiskusikan materi tentang grafika komputer dan penerapan dalam berbagai bidang, kemudian membuat presentasi.

Kegiatan Praktikum 1.1

1. Topik diskusi 1 : Teknik dan Teknologi dalam Grafika Komputer

2. Topik diskusi 2 : Penerapan Grafika Komputer

1. Suatu bidang ilmu yang mempelajari bagaimana membangun grafik (gambar) baik 2D maupun 3D yang kelihatan nyata menggunakan komputer adalah …

E. Latihan Soal

(27)

15 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

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 ,

(28)

16

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.

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 1. Grafika Komputer 2. a

H. Kunci Jawaban

G. Umpan Balik

(29)

(30)

(31)

19

OpenGL dan LWJGL

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

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

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

A. Tujuan Pembelajaran

B. Indikator Pencapaian Kompetensi

(32)

20

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 http://www.opengl.org 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

(33)

21 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);

(34)

22

Langkah-langkah instalasi LWJGL ke dalam IDE NetBeans

1. Pilih Lwjgl-X.X.zip yang tersedia dengan men-download file LWJGL http://lwjgl.org/download.php

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

(35)

23 3. Klik Tombol New Library

(36)

24

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.

(37)

25 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.

(38)

26

3. Pilih LWJGL > Klik Add Library.

4. Konfigurasi VM dengan cara klik kanan pada Tutorial lwjgl dan pilih Properties

(39)

27 Kemudian Pilih Run, dan tambahkan script berikut ke dalam kolom VM Options:

-Djava.library.path="Directory\lwjgl-2.9.1\native\windows"

(40)

28

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();

(41)

29 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()) {

(42)

30

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); } } }

(43)

31

Latihan

1. OpenGL (Open Graphics Library) bersifat Open-Source, multi-platform dan multi-language adalah sebuah program aplikasi interface untuk mendifinisikan suatu objek yaitu ....

2.

Fungsi dasar dari OpenGL adalah ....

OpenGL (Open Graphics Library) adalah sebuah program aplikasi interface 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.OpenGL adalah suatu spefikasi grafik yang low-level yang menyediakan fungsi untuk pembuatan grafik primitif termasuk titik, garis, dan lingkaran. OpenGL digunakan untuk keperluan-keperluan 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).

E. Latihan / Tugas

(44)

32

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 perintah-perintah OpenGL dan berapa besar proses pencapaian kompetensinya

1. Objek 2 dimensi dan objek 3 dimensi

2. Mengeluarkan koleksi perintah khusus(grafik) atau executable ke sistem operasi

H. Kunci Jawaban

G. Umpan Balik

(45)

(46)

(47)

35

PEMODELAN OBJEK 2 DIMENSI

Primitif Objek

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.

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

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

A. Tujuan Pembelajaran

B. Indikator Pencapaian Kompetensi

(48)

36

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. Random-scan (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 (x1,y1) dan (x2, y2). 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 (x0, y0) dan titik akhir (x1, y1).

3) Hitung Δx = x1 – x0 dan Δ y = y1 – y0.

4) Tentukan step, yaitu jarak maksimum jumlah penambahan nilai x maupun nilai y dengan cara :

(49)

37

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 = x1 dan y = y1

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 = x1 – x 0 = 10-5 = 5

Δy = y1 – y0 = 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) 0 6 5.8 (6,6) 1 7 6.6 (7,7) 2 8 7.4 (8,7) 3 9 8.2 (9,8) 4 10 9 (10,9) 10 9 8 7

(50)

38

6 5

5 6 7 8 9 10

 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 (x0, y0) dan titik

lainnya sebagai titik akhir (x1, y1 ).

3) Hitung Δx, Δy, Δ2x, dan 2Δy – 2Δx. 4) Hitung parameter p0 = 2Δy – Δx.

5) Untuk setiap xk sepanjang jalur garis, dimulai dengan k = 0  bila pk <0 maka titik selanjutnya (xk+1, yk) dan pk+1 = pk +2Δy

 bila tidak maka titik selanjutnya adalah (xk+1, yk+1) dan pk+1=pk+2Δ-y2Δx.

6) Ulangi langkah nomor 5 untuk menentukan posisi pixel selanjutnya, sampai x=xn.

 Membuat Titik Create_Point.java

(51)

39 public class Create_Point {

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)) {

(52)

40 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

glLoadIdentity();

gluOrtho2D(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glPushMatrix(); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glPushMatrix(); } } Keluaran Program

(53)

41

 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) {

(54)

42 } 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() { ....

} }

(55)

43 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);

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.

E. Latihan Soal

(56)

44

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

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 PrimitiveGaris.java import java.util.logging.Level;

H. Kunci Jawaban

G. Umpan Balik

(57)

45 import java.util.logging.Logger;

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(); }

glClear(GL_COLOR_BUFFER_BIT); glLoadIdentity(); glColor3d(1, 0, 0); draw(); glFlush(); }

Display.setDisplayMode(new DisplayMode(800, 600)); Display.setFullscreen(false);

Display.setTitle("GAMBAR Primitives-Geometric : GARIS"); Display.create();

(58)

46 //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();

glPushMatrix();

}

public void run() {

!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); } else { if (Display.isDirty()) { render(); } try { Thread.sleep(100);

(59)

47 } } Display.update(); Display.sync(60); } }

private void update() { //

}

public static void main(String[] args) { PrimitiveGaris b1 = new PrimitiveGaris(); try {

} catch (LWJGLException ex) {

Logger.getLogger(PrimitiveGaris.class.getName()).log(Level .SEVERE, null, ex);

(60)

(61)

(62)

(63)

51

Pemodelan Objek 2 Dimensi

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.

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

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

A. Tujuan Pembelajaran

B. Indikator Pencapaian Kompetensi

(64)

52

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 :

(65)

53 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.

(66)

54

 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).

(67)

55

 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 org.lwjgl.util.glu.GLU.gluOrtho2D; public class Translasi {

public void draw(){ }

glClear(GL_COLOR_BUFFER_BIT); glLoadIdentity();

(68)

56 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();

}

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() {

glLoadIdentity();

glPushMatrix(); }

public void run() {

!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); } else { if (Display.isDirty()) { render(); } try { Thread.sleep(100);

(69)

57 } catch (InterruptedException ex) {

} } Display.update(); Display.sync(60); } }

private void update() { }

public static void main(String[] args) { Rotasi b1 = new Rotasi();

try {

} 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.