Bahan Ajar Terseleksi
Mataku Matakulia liah h : Komp Komput uter er Graf Grafis is (TIS5623) Semester Ganjil
Pengusul : Anisya, S. Kom., M. Kom NIDN. 1005079101
Jurusan Teknik Informatika Fakultas Teknologi Industri Institut Teknologi Padang Agustus 2015
DAFTAR ISI
HALAMAN JUDUL ......................... ...................................... .......................... ........................... ........................... .......................... ......................i .........i DAFTAR ISI .......................... ........................................ ........................... .......................... .......................... .......................... ........................... ................ ..iiii Rencana Program Dan Kegiatan Pembelajaran Semester (RPKPS)..............................v BAB I
PENGANTAR PENGANTAR GRAFIKA GRAFIKA KOMPUTER KOMPUTER ........ ............. ......... ........ ......... ......... ......... ......... ........ ......... ......... ......... .......1 ..1 1.1 Definisi Komputer Grafik ................................... ................................................ .......................... ....................1 .......1 1.2. 2 Dimensi................................ Dimensi............................................. .......................... .......................... .......................... ..................1 .....1 1.3. 3 Dimensi................................ Dimensi............................................. .......................... .......................... .......................... ..................1 .....1 1.4. Pengolahan Citra vs Grafika Komputer Ko mputer ........................... ........................................ ....................2 .......2 1.5. Elemen-Elemen Pembentuk Grafik .......................... ........................................ ........................... .............2 2 1.6. Sekilas Pemakaian Grafik Komputer ........................... ........................................ ........................3 ...........3
BAB II
PENGENALAN KONSEP DEV C++ .......................... ....................................... .......................... ......................4 .........4 2.1 Sekilas Mengenai OpenGL .......................... ....................................... ........................... ........................... .............4 4 2.2 Penggunaan OpenGL ........................... ........................................ .......................... .......................... ....................4 .......4
BAB III III
TRANSFORMAS TRANSFORMASII OBJEK OBJEK 2 DIMENSI DIMENSI ......... .............. ......... ......... ......... ........ ......... ......... ......... ......... ........ .........10 .....10 3.1 Maksud Transformasi 2 Dimensi .......................... ....................................... .......................... ..................10 .....10 3.2 Tujuan Transformasi ......................... ....................................... ........................... .......................... ......................10 .........10 3.3 Transformasi objek ......................... ...................................... ........................... ........................... ........................10 ...........10 3.4 Transformasi koordinat .......................... ....................................... .......................... .......................... ..................10 .....10 3.4.1 Translasi ........................... ........................................ .......................... .......................... ........................... ................10 ..10 3.4.2 Skala................................. Skala.............................................. .......................... .......................... ........................... ................10 ..10 3.4.3 Rotasi .......................... ........................................ ........................... .......................... .......................... .................... .......14 14 3.5 Transformation Transform ation Sebagai S ebagai Sebuah Matriks.............................. Matriks............................................ ................15 ..15
BAB IV
ALGORITMA ALGORITMA PERPOTONGA PERPOTONGAN N OBJEK OBJEK ........ ............. ......... ......... ......... ........ ......... ......... ......... ......... ........ .........18 .....18 4.1 Clipping 4.1 Clipping .......................... ....................................... .......................... .......................... ........................... ........................... .............18 18 4.2 Clipping 4.2 Clipping Window / Viewport ......................... ....................................... ........................... ........................18 ...........18 4.2.1 Digital Differential Analyzer (DDA) Analyzer (DDA) Clipping Titik Clipping Titik ........................18 ........................18 4.2.2 Clipping Garis .......................... ........................................ ........................... .......................... ......................19 .........19 ii
DAFTAR ISI
HALAMAN JUDUL ......................... ...................................... .......................... ........................... ........................... .......................... ......................i .........i DAFTAR ISI .......................... ........................................ ........................... .......................... .......................... .......................... ........................... ................ ..iiii Rencana Program Dan Kegiatan Pembelajaran Semester (RPKPS)..............................v BAB I
PENGANTAR PENGANTAR GRAFIKA GRAFIKA KOMPUTER KOMPUTER ........ ............. ......... ........ ......... ......... ......... ......... ........ ......... ......... ......... .......1 ..1 1.1 Definisi Komputer Grafik ................................... ................................................ .......................... ....................1 .......1 1.2. 2 Dimensi................................ Dimensi............................................. .......................... .......................... .......................... ..................1 .....1 1.3. 3 Dimensi................................ Dimensi............................................. .......................... .......................... .......................... ..................1 .....1 1.4. Pengolahan Citra vs Grafika Komputer Ko mputer ........................... ........................................ ....................2 .......2 1.5. Elemen-Elemen Pembentuk Grafik .......................... ........................................ ........................... .............2 2 1.6. Sekilas Pemakaian Grafik Komputer ........................... ........................................ ........................3 ...........3
BAB II
PENGENALAN KONSEP DEV C++ .......................... ....................................... .......................... ......................4 .........4 2.1 Sekilas Mengenai OpenGL .......................... ....................................... ........................... ........................... .............4 4 2.2 Penggunaan OpenGL ........................... ........................................ .......................... .......................... ....................4 .......4
BAB III III
TRANSFORMAS TRANSFORMASII OBJEK OBJEK 2 DIMENSI DIMENSI ......... .............. ......... ......... ......... ........ ......... ......... ......... ......... ........ .........10 .....10 3.1 Maksud Transformasi 2 Dimensi .......................... ....................................... .......................... ..................10 .....10 3.2 Tujuan Transformasi ......................... ....................................... ........................... .......................... ......................10 .........10 3.3 Transformasi objek ......................... ...................................... ........................... ........................... ........................10 ...........10 3.4 Transformasi koordinat .......................... ....................................... .......................... .......................... ..................10 .....10 3.4.1 Translasi ........................... ........................................ .......................... .......................... ........................... ................10 ..10 3.4.2 Skala................................. Skala.............................................. .......................... .......................... ........................... ................10 ..10 3.4.3 Rotasi .......................... ........................................ ........................... .......................... .......................... .................... .......14 14 3.5 Transformation Transform ation Sebagai S ebagai Sebuah Matriks.............................. Matriks............................................ ................15 ..15
BAB IV
ALGORITMA ALGORITMA PERPOTONGA PERPOTONGAN N OBJEK OBJEK ........ ............. ......... ......... ......... ........ ......... ......... ......... ......... ........ .........18 .....18 4.1 Clipping 4.1 Clipping .......................... ....................................... .......................... .......................... ........................... ........................... .............18 18 4.2 Clipping 4.2 Clipping Window / Viewport ......................... ....................................... ........................... ........................18 ...........18 4.2.1 Digital Differential Analyzer (DDA) Analyzer (DDA) Clipping Titik Clipping Titik ........................18 ........................18 4.2.2 Clipping Garis .......................... ........................................ ........................... .......................... ......................19 .........19 ii
BAB V
TRANSFORMAS TRANSFORMASII 3 DIMENSI........ DIMENSI............ ........ ........ ......... ......... ......... ......... ........ ......... ......... ......... ......... ........ .........26 .....26 5.1 Transformasi 3D ......................... ...................................... .......................... .......................... ........................... ................26 ..26 5.2 Translasi 3D .......................... ........................................ ........................... .......................... .......................... ....................26 .......26 5.3 Scaling 3D................................ 3D............................................. .......................... .......................... .......................... ..................27 .....27 5.4 Rotation 3D............ 3D ......................... .......................... ........................... ........................... .......................... ......................27 .........27 5.5 OpenGL Transform Operasi .......................... ........................................ ........................... ........................29 ...........29 5.6 Komputer Grafis Menggunakan M enggunakan VB 6.0 6. 0 .......................... ....................................... ......................29 .........29 5.6.1 Membuat Garis Menggunakan Menggunakan VB 6.0............................... 6.0........................................29 .........29 5.6.2 Sintaks Garis & Lingkaran.................. Lingkaran................................ ........................... ........................34 ...........34
BAB VI
PEMODELAN PEMODELAN BENDA PADAT DENGAN DENGAN JARING JARING POLYGONAL POLYGONAL ........ ............ ........ ......... .......36 ..36 6.1 Pengenalan Jaring Polygonal ........................... ........................................ .......................... ......................36 .........36 6.2 Macam-Macam Poligon .......................... ....................................... .......................... .......................... ..................36 .....36 6.2.1 Poligon Terbuka............ Terbuka .......................... ........................... .......................... .......................... ....................36 .......36 6.2.2 Poligon Tertutup ........................... ........................................ .......................... .......................... ..................36 .....36 6.2.3 Poligon Bercabang .......................... ....................................... .......................... ........................... ................37 ..37 6.3 Teori Geometris Dari Poligon ........................... ........................................ .......................... ......................38 .........38 6.4 Sifat-Sifat Sif at-Sifat Jaring Poligonal ........................... ........................................ .......................... ....................39 .......39
BAB VII
PEMODELAN POLYHEDRA DENGAN JARING POLYGONAL...........................41 POLYGONAL...........................41 7.1 Jenis-Jenis Polyhedra ........................... ........................................ .......................... .......................... ....................41 .......41
BAB VIII VISUALISASI 3 DIMENSI ........................... ........................................ .......................... .......................... ....................44 .......44 8.1 Konsep Kamera ......................... ...................................... .......................... .......................... ........................... ................44 ..44 8.1.1 Cahaya.................................. Cahaya............................................... ........................... ........................... ........................44 ...........44 8.2 Jenis-Jenis Proyeksi .......................... ........................................ ........................... .......................... ......................45 .........45 8.2.1 Perspektif Proyeksi...................... Proyeksi................................... .......................... .......................... ....................45 .......45 8.2.2 Ortografi Proyeksi ......................... ...................................... .......................... .......................... ..................46 .....46 8.2.3 Fisheye Proyeksi ........................... ........................................ .......................... .......................... ..................46 .....46 8.2.4 Ultra Proyeksi Sudut Lebar ........................... ........................................ ........................... ................46 ..46 8.2.5 Omnimax Proyeksi .......................... ....................................... .......................... ........................... ................46 ..46 8.2.6 Proyeksi Panoramic ......................... ...................................... .......................... .......................... ................47 ...47 8.2.7 Proyeksi Silinder ........................... ........................................ .......................... .......................... ..................47 .....47 iii
8.2.8 Proyeksi Bulat............. Bulat .......................... ........................... ........................... .......................... ......................47 .........47 Daftar Pustaka
iv
RENCANA PROGRAM DAN KEGIATAN PEMBELAJARAN SEMESTER (RPKPS) 1. 2. 3. 4. 5. 6.
Nama Matakuliah Kode / SKS Se Semester Sifat Matakuliah Prasyarat Deskripsi Matakuliah
: Komputer Grafis : TIS5623 / 3 :V : Wajib : Me Metode Numerik :
Mata kuliah ini mengajarkan mengajarkan tentang tentang pembuatan dan manipulasi manipulasi gambar (visual) (visual) secara digital. Yang sebelumnya bentuk sederhana dari grafika komputer 2D sekarang sudah berkembang menjadi grafika komputer 3D. Setelah menjalani matakuliah ini mahasiswa diharapkan mampu memahami memahami prinsip prinsip dan metode dasar dasar dalam manipulasi manipulasi gambar. gambar. Dan mamp ma mpu u meng mengim impl plem emen enta tasi sian an dal dalam am bah bahas asa a pemr pemrog ogra rama man n Open OpenGL GL.. sert serta a ma mamp mpu u memanfaatkan memanfaatkan tool yang tersedia tersedia dalam memanipulasi memanipulasi grafik 2D dan 3D. 3D. Matakul Matakuliah iah ini diberik diberikan an pada semest semester er 5 dan bersifat bersifat wajib wajib bagi bagi seluruh seluruh mahasis mahasiswa wa jurusan Teknik Teknik Informatik Informatik 7. Tujuan Pembelajaran : Setelah menyelesaikan menyelesaikan Mata Kuliah Komputer Grafis , setiap mahasiswa diharapkan Mampu merepresentasi dan transformasi objek 2-D dan objek 3-D. menguasai tentang konsep dan teori pengembangan sistem berbasis grafik menguasai tentang prinsip dan teknik manipulasi gambar. • • •
8. Outcome Pembelajaran : a. Knowledge Knowledge and and Understan Understanding ding 1) Memiliki Memiliki penget pengetahua ahuan, n, wawasan wawasan serta serta pemaham pemahaman an terhadap terhadap konsep konsep sistem sistem berbasis berbasis grafik. 2) Mampu mengimplementasikan mengimplementasikan prinsip dan teknik teknik dalam memanipulasi gambar. 3) Mampu Mampu mereprese merepresentas ntasikan ikan dan mentr mentrans ansform formasi asi grafi grafik k 2D dan dan 3D meng mengguna gunakan kan bahasa pemrograman OpenGL. 4) Mampu menerapkan prinsip komunikatif komunikatif dalam bekerja mandiri , dan atau dengan kelompok, untuk menyelesaikan suatu pekerjaan dengan efektif dan efisien 5) Mampu berkomunikas berkomunikasii secara lisan maupun maupun tulisan tulisan untuk untuk menyampaikan menyampaikan ide,usulan, ide,usulan, gagasan maupun transfer pengetahuan dalam bidang Informatika kepada orang lain 6) Memiliki wawasan teknologi teknologi dan sosial guna menganalisa efek solusi berbasis ICT bagi perusahaan, masyarakat dan komponen lain yang terkait 7) Mampu menganalisa, menganalisa, memodelkan masalah dan mengimplementas mengimplementasikan ikan solusi solusi yang yang adaptable, changable dan kompetitif untuk menghasilkan suatu sistem informasi yang memenuhi standar mutu yang ditetapkan. v
8) Menguasai penggunaan teknologi terkini dalam pengembangan sistem informasi dalam berbagai platform pengembangan perangkat lunak. b. Intellectual and Skill 1) Mahasiswa mampu menjelaskan konsep dasar dan prinsip dalam perancangan grafika komputer. 2) Mahasiswa mampu menguraikan kerangka kerja dalam pembuatan aplikasi . 3) Mahasiswa mampu menganalisa kesalahan yang ada dalam aplikasi dan mampu melakukan kegiatan penanganan terhadap masalah yang dihadapi. c. Practical Skill Mahasiswa akan mendapatkan Practical Skill melalui tugas kuliah. d. Managerial Skill and Attitude 1) Mahasiswa mampu memanfaatkan kesempatan dan peluang yang ada pada sekitarnya dalam mengembangkan ilmu yang telah diberikan. 2) Mahasiswa mampu memberikan umpan balik kepada kelas. 3) Mahasiswa mengetahui peningkatan dari ilmu dan pengalaman yang mereka miliki. 4) Mahasiswa mendapatkan ilmu bagaimana cara memimpin diskusi dan memimpin sebuah proyek dalam pembangunan program aplikasi. 9. Materi Pembelajaran 1. Pendahuluan: 1.1 Sekilas Pemakaian Grafik Komputer, 1.2 Elemen gambar yang dibuat pada grafik computer, 1.3 Device tayangan grafik, 1.4 Tipe Data dan Device Input. 2. Konsep Dasar OpenGL dan Menggambarkan objek-objek sederhana dengan OpenGL, 2.1 Algoritma Clipping 2.2 Pengembangan Class dalam OpenGL, 3. Pendahuluan Kurva-Kurva Parametrik 3.1 Bentuk-bentuk parametric dari kurva, 3.2 Super-ellips, 4. Kurva-Kurva Parametrik 4.1 Koordinat Polar, 4.2 Kurva 3 Dimensi, 4.3 Representasi objek geometri dalam bentuk vector, 5. Algoritma perpotongan objek 5.1 Perpotongan dua garis 5.2 Perpotongan antara garis dan poligon 5.3 Perpotongan antara poligon 6. Transformasi objek 2 dimensi 6.1 Pengantar transformasi 6.2 Transformasi affin 2 dimensi vi
6.3 Sifat-sifat transformasi affin 2 dimensi
7. Transformasi objek 3 dimensi 7.1 Transformasi affin 3 dimensi 7.2 Sifat-sifat transformasi affin 3 dimensi 7.3 Relasi antara berbagai sistem koordinat 8. Pemodelan benda padat dengan jaring polygonal 8.1 Pengenalan jaring polygonal 8.2 Sifat-sifat jaring poligonal 8.3 Bekerja dengan jaring poligonal 8.4 Representasi benda padat dengan jaring polygonal 9. Pemodelan polyhedra dengan jaring polygonal 9.1 Jenis-jenis polyhedra 9.2 Representasi polihedra dengan jaring polygonal 9.3 Representasi bentuk-bentuk spiral dengan jaring polygonal. 10. Pemodelan permukaan dengan jaring polygonal 10.1 Bentuk implicit dari permukaan 10.2 Vektor normal dari permukaan 10.3 Permukaan dan transformasi affin 10.4 Bentuk-bentuk umum dari permukaan dan representasinya 11. Visualisasi 3 dimensi 11.1 Konsep kamera 11.2 Jenis-jenis proyeksi 11.3 Proyeksi geometri 11.4 Studi kasus 11.5 Proyeksi geometri dalam OpenGL 10. Jadual Kegiatan Mingguan Minggu Topik ( Pokok Bahasan ) Ke1 1
2
2
Metode Pembelajaran 3 Ceramah dan Diskusi Kelas
Pendahuluan - Penjelasan tentang RPKPS, - SAP dan - Kontrak Kuliah Komputer Grafis - Pengenalan matakuliah Komputer Grafis Konsep pembuatan gambar Tutorial, dengan OpenGL Diskusi dan - Pengenalan OpenGL Tanya Jawab - Penggambaran objekobjek sederhana dengan OpenGL - Algoritma Clipping - Pengembangan Class dalam OpenGL
Estimasi Waktu (Menit) 4 1x3x 50’
Media
1x3x 50’
Notebook, LCD, Papan tulis
5 Notebook, LCD, Papan tulis
vii
3
4
5,6
7
8
Pendahuluan Kurva-kurva parametrik - Bentuk-bentuk parametrik dari kurva - Super-elips Kurva-kurva parametrik - Koordinat Polar - Kurva 3 dimensi Representasi Grafik dalam bentuk vector - Pengulangan tentang vektor - Representasi dari objek-objek geometri Algoritma perpotongan objek - Perpotongan dua garis - Perpotongan antara garis dan poligon - Perpotongan antara poligon Transformasi objek 2 dimensi - Pengantar transformasi - Transformasi affin 2 dimensi - Sifat-sifat transformasi affin 2 dimensi Transformasi objek 3 dimensi - Transformasi affin 3 dimensi - Sifat-sifat transformasi affin 3 dimensi - Relasi antara berbagai sistem koordinat
Tutorial, Diskusi dan Tanya Jawab
1x3x 50’
Notebook, LCD, Papan tulis
Tutorial, Diskusi dan Tanya Jawab
1x3x 50’
Notebook, LCD, Papan tulis
Tutorial, Diskusi dan Tanya Jawab
2x3x 50’
Notebook, LCD, Papan tulis
Tutorial, Diskusi dan Tanya Jawab
1x3x 50’
Notebook, LCD, Papan tulis
Ujian Tengah Semester
9
Pemodelan benda padat Tutorial, dengan jaring polygonal Diskusi dan - Pengenalan jaring polygonal Tanya Jawab - Sifat-sifat jaring poligonal - Bekerja dengan jaring poligonal - Representasi benda padat dengan jaring polygonal
1x3x 50’
Notebook, LCD, Papan tulis
10,11,12
Pemodelan polyhedra dengan jaring polygonal - Jenis-jenis polyhedra
1x3x 50’
Notebook, LCD, Papan tulis
Tutorial, Diskusi dan Tanya Jawab
viii
- Representasi polihedra dengan jaring polygonal - Representasi bentuk-bentuk spiral dengan jaring polygonal. Pemodelan permukaan dengan jaring polygonal - Bentuk implicit dari permukaan - Vektor normal dari permukaan - Permukaan dan transformasi affin - Bentuk-bentuk umum dari permukaan dan representasinya
13
Visualisasi 3 dimensi - Konsep kamera - Jenis-jenis proyeksi - Proyeksi geometri - Studi kasus - Proyeksi geometri dalam OpenGL
Tutorial, Diskusi dan Tanya Jawab
3x3x 50’
Notebook, LCD, Papan tulis
14,15
Pembuatan Project Grafika Komputer
Diskusi dan Tanya Jawab
3x3x 50’
Notebook
16
Ujian Akhir Semester
11. Evaluasi Hasil Pembelajaran Evaluasi hasil pembelajaran pada matakuliah Interaksi Manusia dan Komputer ini dilakukan dengan berbagai macam cara penilaian sebagai berikut : 1. Penilaian terhadap kehadiran dan partisipasi di kelas 2. Penilaian terhadap tugas, quiz, dan PR 3. Penilaian terhadap dokumen laporan diskusi kelompok 4. Penilaian terhadap hasil kerja kelompok 5. Penilaian terhadap evaluasi mid test (UTS) 6. Penilaian terhadap evaluasi final test (UAS) Pembobotan : No. Penilaian 1 Kehadiran 2 Partisipasi Kelas (diskusi Penyelesaian Masalah) 3 Tugas dan PR 4 Quiz
Bobot 5% 10% 20% 10%
ix
5 6
UTS UAS
Range Nilai No. Range Nilai Angka
25% 30%
Nilai Huruf
1
80 – 100
A
2
65 - 79
B
3
55 – 64
C
4
45 – 54
D
5
0 - 44
E
12. Bahan, Sumber Informasi dan Referensi Sumber Informasi 1) Melakukan diskusi dengan tatap muka langsung atau lewat email. 2) Memanfaatkan kemajuan teknologi informasi dalam mengembangkan ilmu yang telah didapat dikelas. Referensi a) Buku Teks : 1) Alan Oursland, Using Opengl In Visual C++, Interface Technologies, Inc., 2000. 2) Dave Shreiner, Jakie Neider, Opengl Programming Guide, Fifth Edition, Addison Wesley 2006 3) Richard S. Wright, Jr., Benjamin Lipchak, Nicholas Haemel, Opengl® Superbible Fourth Edition, Comprehensive Tutorial And Reference, 2007 4) Shalini Govil-Pai, Sunnyvale, CA, U. S. A. Principles Of Computer Graphics Teory And Practice Using OpenGL And Maya, Springer, 2004 5) Tom Mcreynolds, David Blythe, Advanced Graphics Programming Using Opengl, Elsevier, Addison Wesley, 2005
6) Bhatia, Computer Graphics. I. K. International Pvt Ltd, 2008 7) Iwan Bunanto, Multimedia Digital - Dasar Teori dan Pengembangannya. Yogyakarta : Andi Offset, 2010 8) Samuel R Buss, 3D Computer Graphics: A Mathematical Introduction with OpenGL. Cambridge University Press, 2003 9) James D Foley, Computer Graphics: Principles and Practice. Addison-Wesley Professional, 1996 10) Fabio Ganovelli, Introduction to Computer Graphics: A Practical Learning Approach. CRC Press, 2014 11) Jonas Gomes, Computer Graphics: Theory and Practice. CRC Press, 2012 x
BAB I PENGANTAR GRAFIKA KOMPUTER 1.1. Definisi Komputer Grafik Bagian dari ilmu komputer yang berkaitan dengan pembuatan dan manipulasi gambar (visual) secara digital. Ilmu komputer pembuatan Gambar (Visual) <--> Digital Bentuk sederhana dari grafika komputer, Computer Graphics 2 D (2Dimensi) Computer Graphics 3 D (3Dimensi) Image Processing Pattern Recognition
1.2. 2 Dimensi
Gambar 1.1 Bentuk 2 Dimensi 1.3. 3 Dimensi
Gambar 1.2 Bentuk 3 Dimensi
1.4. Pengolahan Citra vs Grafika Komputer Pengolahan citra a. Berorientasi pixel b. Mengolah suatu gambar c. Materi nya berisi cara manipulasi gambar untuk menyajikan informasi dari gambar Grafika komputer a. Berorientasi vektor b. Menhasilkan gambar c. Materi berisi teknik2 cara menggambar
Gambar 1.3 Cara Kerja Grafika Komputer Graphics Library (GL) perantara aplikasi dengan Display Hardware (Graphics System). Application Program = memetakan objek aplikasi ke tampilan / citra dengan memanggil graphics library.
1.5. Elemen-Elemen Pembentuk Grafik
Gambar 1.4 Elemen-Elemen Pembentuk Grafik
1.6. Sekilas Pemakaian Grafik Komputer a. Bidang Sains, Teknologi, Bisnis Dalam bidang ini bentuk grafik dua dimensi (2D) dan tga dimensi (3D) banyak dimanfaatkan untuk menunjukkan suatu fungsi matematik, fenomena fisis, fungsi ekonomi, histogram, diagram batang, pie chat, diagram penjadwalan pekerjaan, diagram produksi dll. b. Bidang Kartografi Dalam bidang ini, grafika komputer banyak digunakan untuk menyajikan informasi geografis dan fenomena alamiah lain. Contoh : peta geografi, peta relief, peta eksplorasi minyak dan pertambangan, peta cuaca, peta kepadatan penduduk dll. c. Simulasi dan Animasi Simulasi dan animasi dalam grafika komputer dan citra banyak dipakai untuk membuat film animasi dan game. Keterkaitan Antara Grafik Komputer dan Pengolahan Citra dalam game dan film yaitu Grafik Komputer bertujuan menghasilkan citra (lebih tepat disebut grafik atau image). Sedangkan Pengolahan Citra ini bertujuan untuk memperbaiki kualitas citra pada grafik agar mudah diinterpretasi oleh manusia atau mesin (dalam hal ini komputer). d. Computer-Aided Design and Drafting Dalam CAD, grafika computer biasa digunakan untuk merancang komponen dari sistem mekanis, elektris, elektromekanis, piranti elektronis maupun piranti lain. Termasuk dalam kelompok ini adalah struktur bangunan, reaktor kimia, badan mobil, pesawat terbang, kapal lengkap dengan ruang-ruang yang ada, jaringan komputer. Dalam bidang ini tekanan untama dari pemakaian grafika komputer adalah untuk memproduksi gambar dengan ketelitian yang sangat tinggi. e. Kendali proses (Process Control) - GUI (Graphical User Interface) Dalam bidang ini grafika computer seolah-olah menyediakan suatu bahasa antarmuka pemakai (user interfaces) yang baru, karena ”dialog” antara pemakai dan kompu ter tidak lagi diketikkan dari keyboard, tetapi pemakai cukup memiliki suatu simbol / icon yang tersedia pada layar dengan menggunakan mouse, lightpen dll. f. Seni dan Komersial Dalam bidang ini, grafika komputer banyak dimanfaatkan untuk pembuatan ulang (reproduksi) gambar yang memiliki nilai historis tinggi dan penting untuk dilestarikan, seperti gambar- gambar dari pelukis terkenal. Juga digunakan untuk pembuatan iklan / logo dari suatu produk g. Office Automation and Electronic Publishing
BAB II PENGENALAN KONSEP DEV C++ 2.1. Sekilas Mengenai OpenGL
OpenGL (Open Graphics Library) adalah suatu spesifikasi grafik yang low-level yang menyediakan fungsi untuk mempermudah pekerjaan atau untuk keperluan – keperluan pemrograman grafis (Graphics Programming / GP), termasuk grafik primitif (titik, garis, dan lingkaran). OpenGL(Open Graphic Library) adalah sebuah library terdiri dari berbagai macam fungsi dan biasanya digunakan untuk menggambar sebuah objek 2D atau 3D. OpenGL bersifat Open-Source, multi-platform dan multi-language.
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,SGI, Linux, frreBSD dan sistem operasi lainnya. Sebelumnya, OpenGL dirancang untuk dimanfaatkan pada pemrograman C/C++, namun seiring dengan berjalannya waktu, OpenGL ini mampu dapat dimanfaatkan pada berbagai jenis bahasa pemrograman seperti Java, Visual, Basic, Delphi, dan sebagainya.
Untuk menggunakan
OpenGL dalam compiler bahasa pemrograman misalnya C++, dibutuhkan instalasi library tertentu. GLUT (OpenGL Utility Toolkit ) merupakan salah satu library dari pengembangan OpenGL untuk sistem windows. GLUT didesain untuk membuat program OpenGL yang berukuran kecil sampai medium. GLUT tidak dapat secara langsung digunakan, karena membutuhkan beberapa file tambahan antara lain : glut.h, glut.lib, dan glut32.dll yang disimpan pada direktori tertentu.
2.1 Penggunaan OpenGL
1. Persiapkan aplikasi Dev-C++ anda. 2. Mulai dengan klik File New Project Pilih Tab Multimedia Pilih Open GL.
Komputer Grafis / Anisya, S. Kom., M. Kom
4
Gambar 2.1 Awal Project
3. Setelah dipilih OK, kita akan dipandu untuk menentukan dimana lokasi penyimpanan untuk project tersebut. Terserah anda mau nyimpan filenya dimana. 4. Defaultnya, sudah ditambahkan file main.cpp. 5. Coba anda Compile (Execute Compile). 6. Setelah itu di running (Execute Run). 7. Perhatikan apa yang terjadi.
Gambar 2.2 Hasil Running Program 8. Sekarang coba edit coding yang dalam kotak.
Komputer Grafis / Anisya, S. Kom., M. Kom
5
Menjadi coding dibawah ini.
Jika langkah-langkah yang telah anda lakukan sesuai dengan yang seharusnya, maka hasilnya akan terlihat seperti berikut.
Komputer Grafis / Anisya, S. Kom., M. Kom
6
Logikanya :
Artikan sendiri apa pengaruh dari penetapan an gka yang digaris bawahi tersebut. Diatas terdapat glVertex3f dan glVertex2f. 2 dan 3 itu maksudnya adalah jumlah sumbunya. 2 ( x dan y) sedangkan 3 ( x, y, dan z).
Semua perintah yang ada pada opengl diawali dengan gl dan diikuti dengan huruf kapital pada setiap kata membentuk nama perintah (sebagai contoh glClearColor). Sebagai contoh pada dua perintah berikut ini :
Komputer Grafis / Anisya, S. Kom., M. Kom
7
glVertex3i(1,0,-2); glVertex3f(1.0, 0.0, -2.0);
glVertex3f(x,y,z);
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. The Colour Cube
Gambar 2.2 Warna TUGAS : Buatkan coding untuk pembuatan garis vertikal dan segitiga (triangles) dengan warna dimasing-masing sudut berbeda-beda. PENYELESAIAN : a. Garis Vertikal /* OpenGL animation code goes here */
glClearColor (0.0f, 0.0f, 0.0f, 0.0f); glClear (GL_COLOR_BUFFER_BIT); glPushMatrix (); glClearColor(1,1,1,0); glColor3f(1,1,1); // glBegin(GL_LINES); glVertex3f(0.10,10.0,13.13);
Komputer Grafis / Anisya, S. Kom., M. Kom
8
glVertex3f(0,0,0.0); glEnd (); glPopMatrix (); SwapBuffers (hDC); Sleep (1); } } /* shutdown OpenGL */
b. Segitiga /* OpenGL animation code goes here */ glClearColor (0.0f, 0.0f, 0.0f, 0.0f); glClear (GL_COLOR_BUFFER_BIT); glPushMatrix (); glRotatef (theta, 0.0f, 0.0f, 1.0f); glBegin (GL_TRIANGLES); glColor3f (1.0f, 0.0f, 0.0f);
glVertex2f (0.0f, 1.0f);
glColor3f (0.0f, 1.0f, 0.0f);
glVertex2f (0.87f, -0.5f);
glColor3f (0.0f, 0.0f, 1.0f);
glVertex2f (-0.87f, -0.5f);
glEnd (); glPopMatrix (); SwapBuffers (hDC); theta += 1.0f; Sleep (1); } } /* shutdown OpenGL */
==_SELAMAT
[email protected]==
Komputer Grafis / Anisya, S. Kom., M. Kom
9
BAB III TRANSFORMASI OBJEK 2 DIMENSI
3.1 Maksud Transformasi 2 Dimensi
Suatu model atau bentuk atau teknik-teknik memindahkan atau mengubah nilai posisi objek dalam sistem koordinat dua dimensi. Pemindahan objek ini dapat diartikan sebagai pemindahan titik. {2x2 Matrices} {2D Linear Transformation} 3.2 Tujuan Transformasi
a. Merubah atau menyesuaikan komposisi pandangan. b. Memudahkan membuat objek yang simetris c. Melihat objek dari sudut pandang berbeda d. Memindahkan satu atau beberapa objek dari satu tempat ke tempat lain, biasanya digunakan pada animasi komputer. Ada dua cara yang dapat digunakan untuk mentransformasi gambar yaitu : transformasi objek dan transformasi koordinat.
3.3 Transformasi objek
Definisinya adalah mengubah koordinat-koordinat dari tiap-tiap titik di objek dengan beberapa aturan, meninggalkan underlying system koordinat yang tidak bisa di ubah lagi. 3.4 Transformasi koordinat
Definisinya adalah sistem koordinat yang baru di buat sebelumnya merupakan semua titik objek dalam sistem yang baru. Transformasi dasar pada objek dua dimensi terdiri dari :
3.4.1
Translasi
Translasi merupakan suatu proses yang menyebabkan perpindahan objek dari satu titik ke titik lain. Translasi dilakukan dengan penambahan translasi pada suatu titik koordinat dengan
Komputer Grafis / Anisya, S. Kom., M. Kom
10
translasi vector yaitu (trx,try), dimana trx adalah translation vector menurut sumbu x sedangkan try adalah translasi vector terhadap sumbu y. Koordinat baru titik yang ditranslasi dapat diperoleh dengan menggun akan rumus:
x ’ = x + trx y ‘ = y + try
(x,y) adalah koordinat asal suatu objek dan (x’,y’) adalah koordinat baru objek tersebut setelah ditranslasi. Berikut contoh transformasi objek. Dengan a=(2,1), b= (4,1),c=(4,3), d=(2,3). Dengan translasi (Tx,Ty) = (4,3)
a (2,1)
Tx,Ty = 4,3
a’ (6,4)
a’= 2 + 4 = 6 = 1 + 3 = 4 b(4,1)
Tx,Ty = 4,3
b’(8,4)
b’ = 4 + 4 = 8 = 1 + 3 = 4 c(4,3)
Tx,Ty = 4,3
c’(8,6)
b’ = 4 + 4 = 8 = 3 + 3 = 6 d(2,3)
Tx,Ty = 4,3
d’(6,6)
b’ = 2 + 4 = 6 = 3 + 3 = 6
Komputer Grafis / Anisya, S. Kom., M. Kom
11
3.4.2
Skala
Penskalaan koordinat dimaksudkan untuk menggandakan setiap komponen yang ada pada objek secara skalar. Berikut contoh kasus dengan skala (dx,dy) = (3,2)
a (2,1)
dx,dy = 3,2
Komputer Grafis / Anisya, S. Kom., M. Kom
a’ (6,2)
12
a’= 2 * 3 = 6 = 1 * 2 = 2 b(4,1)
b’(12,2)
dx,dy = 3,2 b’ = 4 * 3 = 12 = 1 * 2 = 2
c(4,3)
c’(12,6)
dx,dy = 3,2 b’ = 4 * 3 = 12 = 3 * 2 = 6
d(2,3)
d’(6,6)
dx,dy = 3,2 b’ = 2 * 3 = 6 = 3 * 2 = 6
x2 = sxx1
y 2 = s y y1
x s x * x y s y
Komputer Grafis / Anisya, S. Kom., M. Kom
* y
13
3.4.3
Rotasi
Untuk rotasi garis atau polygon, kita membutuhkan sumbu sebagai arah untuk merotasikannya
Nilai x
= r cos φ ,
y = r sin φ x’ = x cos θ – y sin θ y’ = y sin θ + y cos θ
Rotasi P oleh lawan arah jarum jam
Komputer Grafis / Anisya, S. Kom., M. Kom
14
x' = xr + (x - xr ) cos(q) - (y - yr ) sin (q) y' = y r + (x - xr ) sin (q)+(y - y r ) cos(q)
3.5 Transformation Sebagai Sebuah Matriks
Scale: x’ = sxx y’ = syy
s x 0
s x x s y s y y y 0 x
Rotation: x’ = xcos - ysin y’ = xsin + ycos
cosθ sinθ x x cosθ y sinθ sinθ cosθ y x sinθ y cosθ
Translation: x’ = x + t x y’ = y + t y
Komputer Grafis / Anisya, S. Kom., M. Kom
t x x x t x t y t y y y
15
CONTOH SOAL :
Translasi dengan Tx,Ty = (4,3) w (1,2) x (6,2) y (5,4) z (2,4) Selanjutnya di Skalakan dengan aturan Sx,Sy=(-2,3) Selanjutnya di Rotasi terhadap sumbu x 30(derajat) = Untuk Nobp Genap Selanjutnya di Rotasi terhadap sumbu y 30(derajat) = Untuk Nobp Ganjil PENYELESAIAN :
w (1,2)
Translasi Tx,Ty = 4,3
a’ (5,5)
a’= 1 + 4 = 5 = 2 + 3 = 5 x(6,2)
Tx,Ty = 4,3
b’(10,5)
b’ = 6 + 4 = 10 = 2 + 3 = 5 y(5,4)
Tx,Ty = 4,3
c’(9,7)
b’ = 5 + 4 = 9 = 4 + 3 = 7 z(2,4)
Tx,Ty = 4,3
d’(6,7)
b’ = 2 + 4 = 6 = 4 + 3 = 7
w ‘(5,5)
Skala dx,dy = -2,3
w’’ (-10,15)
a’= 5 * -2 = -10 = 5 * 3 = 15 x’(10,5)
dx,dy = -2,3
x’’(-20,15)
b’ = 10 * -2 = -20
Komputer Grafis / Anisya, S. Kom., M. Kom
16
= 5 * 3 = 15 y’(9,7)
dx,dy = -2,3
y’’(-18,21)
b’ = 9 * -2 = -18 = 7 * 3 = 21 z’(6,7)
dx,dy = -2,3
z’’(-12,21)
b’ = 6 * -2 = -12 = 7 * 3 = 21 Untuk Rotasi sesuaikan dengan NoBP saudara
Komputer Grafis / Anisya, S. Kom., M. Kom
17
BAB IV ALGORITMA PERPOTONGAN OBJEK 4.1 Clipping
Istilah Kliping (Clipping) merupakan kumpulan guntingan Koran. Clipping berarti juga memotong objek dengan bentuk tertentu. Untuk Sarana pemotong objek disebut clipping window.
Dalam konteks grafika komputer, untuk melakukan clipping, kita lebih dulu harus menentukan bentuk window dan baru kemudian menentukan hanya objek yang terdapat di dalam window tersebut yang akan ditampilkan.
Contoh Teknik Clipping
Gambar 3.1 Perpotongan Gambar 4.2 Clipping Window / Viewport
Fungsi clipping window : Mengidentifikasi obyek yang akan di- clip dan memastikan bahwa data yang di ambil hanya yang terletak di dalam clipping window. Bentuk Clipping window : a. Segi empat, segi tiga b. Lingkaran atau elips c. Poligon dan lain-lain.
4.2.1 Digital Differential Analyzer (DDA) Clipping Titik
•
Untuk menentukan letak suatu titik di dalam clipping window menggunakan rumus sbb :
– Xmin ≤ x ≤ Xmax – Ymin ≤ y ≤ Ymax
•
Terdapat 2 buah titik P1(x1,y1) dan P2 (x2,y2 dengan : – P1 terletak di dalam clipping window,
karena :
Xmin ≤ X1 ≤ Xmax Ymin ≤ Y1 ≤ Ymax
– P2 terletak di luar clipping window, karena :
X2 ≥ Xmax
walaupun Ymin ≤ Y2≤ Ymax ,,dan X2 ≥ Xmin
4.2.2 Clipping Garis Clipping sebuah garis P1-P2 dengan window L,R,T,B akan berhubungan dengan.garis yang
terletak di dalam window dan garis di luar window. Dalam hal ini garis yang ingin kita tampilkan hanya garis yang terdapat di dalam window
(visible) Sedangkan garis di luar window akan di buat tidak tampak (invisible). Setelah garis di-clipping, data garis P1 dan P2 tidak boleh hilang. Dalam hal ini harus dibuatkan satu copy garis P1’ dan P2 ’ yang terletak di dalam window. Copy garis inilah yang ditampilkan pada layar.
Gambar 3.2 Clipping Garis
)
Algoritma Clipping Garis
1. Baca data garis 2. Baca data clipping window 3. Cek kondisi garis terhadap clipping window 4. Proses Clipping
Kondisi garis terhadap clipping window dapat : 1. Invisible Tidak kelihatan, terletak di luar clipping window 2. Visible Terletak di dalam clipping window 3. Halfpartial Terpotong sebagian oleh clipping window 4. Vollpartial Terpotong penuh oleh clipping window, garis melintasi clipping window
Gambar 3.3 Kondisi Garis
Untuk kondisi garis, aksi clipping yang perlu dilakukan: a. Invisible, garis tidak perlu ditampilkan b. Visible, garis ditampilkan Visibilitas suatu titik
a. Titik yang visible, titik terletak di dalam window b. Titik yang invisible, titik terletak di luar window c. Titik yang visible, jika nilai point code l,r,t,b = 0 d. Jika salah satu dari nilai point code l,r,t,b ≠ 0, maka titik tersebut di luar window. Pointcode
0000 0001 0010 0100 1000 1001 1010 0101 0110
Arti Kode
Terletak di dalam window Terletak di sebelah kiri window Terletak di sebelah kanan window Terletak di sebelah bawah window Terletak di sebelah atas window Terletak di sebelah kiri atas window Terletak di sebelah kanan atas window Terletak di sebelah kiri bawah window Terletak di sebelah kanan bawah window
Midpoint Subdivision
• Contoh : – Asumsi : Sumbu koordinat kartesian – Clipwindow (-100,100,100,-100) – P1(-140,90), P2(160,40)
TUGAS.
Tentukan titik potong pada grafik berikut, dimana clipping windownya berupa persegi. a. Clip window (-20, 20, 20, -20) b. P1 (4 , 23) – P2 (-4 , -24) = Garis P1 – P2 c. P3 (-24 , 5) – P4 (22 , -2) = Garis P3 – P4 d. P5 (24 , 6) – P6 (4 , 23)
= Garis P5 – P6
e. P7 (-18 , 2) – P8 (10 , 5)
= Garis P7 – P8
PENYELESAIAN :
Garis P1-P2 X1
Y1
X2
Y2
xM
yM
Garis
Midpoint
4
23
-4
-24
0
-1
P1 - P2
M
4
23
0
-1
2
11
P1 - M
M1
4
23
2
11
3
17
P1 - M1
M2
4
23
3
17
4
20
P1 - M2
M3
X1
Y1
X2
Y2
xM
yM
Garis
Midpoint
-4
-24
0
-1
-2
-13
P2 - M
M1
-4
-24
-2
-13
-3
-19
P2 - M1
M2
-4
-24
-3
-19
-4
-22
P2 - M2
M3
-4
-22
-3
-19
-4
-21
P2 - M3
M4
-4
-21
-3
-19
-4
-20
BAB V TRANSFORMASI 3 DIMENSI
5.1 Transformasi 3D
Salah satu sub bagian dari grafika komputer adalah pemodelan objek (object modeling). Pada dasarnya transformasi adalah memindahkan objek tanpa merusak bentuk. Tujuan transformasi adalah : Merubah atau menyesuaikan komposisi pemandangan. Memudahkan membuat objek yang simetris. Melihat objek dari sudut pandang yang berbeda. Memindahkan satu atau beberapa objek dari satu tempat ke tempat lain, ini biasa dipakai untuk animasi komputer. Transformasi pada dunia 3 dimensi, pada dasarnya sama dengan transformasi pada 2 dimensi, hanya pada 3 dimensi kita juga memperhitungkan sumbu 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. Transformasi pada 3 dimensi pada dasarnya sama dengan transformasi pada 2 dimensi, hanya pada 3 dimensi kita juga memperhitungkan sumbu z. sama seperti pada 2 dimensi, ada 3 transformasi dasar yang dilakukan terhadap vertex, yaitu: translasi, penskalaan, rotasi. Titik hasil transformasi dapat diperoleh melalui rumus dibawah ini disebut sebagai Affine Transformation. Serupa dengan transformasi 2D, yang menggunakan matriks 3 x 3, sedangkan untuk transformasi 3D menggunakan matriks 4 x 4 (X, Y, Z, W) 5.2 Translasi 3D
Titik (X,Y,Z) akan dirubah oleh jumlah Dx, Dy, dan Dz ke lokasi (X’, Y’, Z’) X ' Dx X Y ' Dy Y Z ' Dz Z
atau P' = T * P dimana
X ' Y ' P' Z ' 1 Komputer Grafis / Anisya, S. Kom., M. Kom
26
1 0 0 Dx 0 1 0 Dy T ( Dx, Dy, Dz ) T 0 0 1 Dz 0 0 0 1
5.3 Scaling 3D
X ' Y ' P' Z ' 1 Sx 0 0 0 0 Sy 0 0 S ( Sx, Sy, Sz ) S 0 0 Sz 0 0 0 0 1 X Y P Z 1
5.4 Rotation 3D
Rotasi 3 dimensi menggunakan sumbu koordinat sebagai pusat perputaran. Dengan demikian ada 3 macam rotasi yang dapat dilakukan, yaitu: a. Rotasi sumbu x b. Rotasi sumbu y c. Rotasi sumbu z Untuk rotasi 3D, kita perlu memilih sumbu untuk memutar objek. Baik itu sumbu X, sumbu Y, atau sumbu Z.
Komputer Grafis / Anisya, S. Kom., M. Kom
27
X ' Y ' P' Z ' 1 cos(θ ) sin(θ ) sin(θ ) cos(θ ) Rz 0 0 0 0
0 0
1 0 0 1 0 0
0 0 1 0 cos(θ ) sin(θ ) Rx 0 sin(θ ) cos(θ ) 0 0 0
cos(θ ) 0 Ry sin(θ ) 0 X Y P Z 1
0
0 1 0
0
sin(θ )
0
1
0
0
Ry (θ ) 0 cos(θ ) 0 0 0 1
Sekarang bagaimana jika rotasi yang terjadi selain di sekitar salah satu sumbu Cartesian? Ada dua cara untuk melihat hal ini: Serangkaian rotasi sekitar sumbu Cartesian, yang dapat dikombinasikan dengan mengalikan matriks yang sesuai bersama-sama. Sekali lagi, matriks righmost adalah operasi yang terjadi pertama. Perhatikan bahwa dengan pendekatan ini mungkin ada lebih dari satu kombinasi rotasi yang menghasilkan hasil akhir yang sama. Sumbu alternatif rotasi dapat dipilih, selain sumbu Cartesian, dan titik diputar jumlah yang diberikan tentang sumbu ini. Untuk setiap perubahan orientasi terdapat sumbu dan rotasi unik sudut tunggal (0 <= theta <= 180 derajat) yang akan menghasilkan rotasi yang diinginkan. Pendekatan alternatif ini adalah dasar untuk "quaternions", yang tidak mungkin akan dibahas
Komputer Grafis / Anisya, S. Kom., M. Kom
28
lebih lanjut dalam kursus ini. (Quaternions digunakan berat dalam paket WorldToolKit, yang tidak lagi diproduksi, dan dapat berguna untuk interpolasi rotasi antara dua sudut miring.) Komposisi ditangani dengan cara yang mirip dengan kasus 2D, mengalikan matriks transformasi dari kanan ke kiri.
5.5 OpenGL Transform Operasi
Dalam terjemahan OpenGL, rotasi, dan skala yang dilakukan dengan menggunakan perintah seperti: glTranslate{fd} (X, Y, Z) - glTranslatef (1,0, 2,5, 3,0) glRotate{df} (Angle, X, Y, Z) - glRotatef (60,0, 0,0, 0,0, 1,0) glScale{df} (X, Y, Z) - glScalef (1,0, 1,5, 2,0)
Apa perintah ini dilakukan dalam praktek adalah untuk menghasilkan matriks transformasi yang sesuai untuk operasi yang diminta, kalikan dengan matriks apapun saat ini di atas matriks tumpukan sedang aktif, dan mengganti matriks di atas tumpukan dengan hasilnya. Jika Anda ingin menghitung dan menyimpan hasil dari serangkaian kompleks transformasi, satu pendekatan adalah untuk mendorong sebuah matriks identitas ke stack, melakukan setiap operasi pada gilirannya, dan kemudian menyimpan salinan hasil dari puncak stack menjadi variabel global atau statis, (mungkin muncul itu dari tumpukan jika tidak akan dibutuhkan di sana segera.)
5.6 Komputer Grafis Menggunakan VB 6.0 5.6.1 Membuat Garis Menggunakan VB 6.0
a. Persiapkan aplikasi visual basic 6.0 anda
Komputer Grafis / Anisya, S. Kom., M. Kom
29
b. Jika tampilan vb 6.0 anda sudah seperti tampilan di atas, selanjutnya anda atur properties dari form tersebut, seperti dibawah ini.
Form1
Caption
Membuat Garis
Form1
StartupPosition
CenterScreen
Selanjutnya menambahkan listing program kedalam form, dengan cara klik double pada area kosong. Jika itu telah anda lakukan, maka akan muncul
Anda modifikasi coding diatas seperti berikut
Komputer Grafis / Anisya, S. Kom., M. Kom
30
Jika udah selesai, tekan F5 atau klik
. Tampilan selanjutnya
Untuk melihat hasilnya, terlebih dahulu kita klik di area yang kosong didalam form. Untuk mengetahui arti dari scale (0 , 70) – (70 , 0), anda ganti aja angkanya sesuai yang anda mau dan amati perubahannya.
Hasilnya :
Komputer Grafis / Anisya, S. Kom., M. Kom
31
Lakukan Penyimpanan Project, dengan cara : a. Tekan Ctrl + S, b. Tentukan lokasi penyimpanan
c. Jika lokasi penyimpanannya sudah dipilih, klik “Save” untuk menyimpan form. d. Dan klik “Save” untuk menyimpan Project.
Sekarang kita membuat kotak pada form vb 6.0. a. Kita masih bekerja di project yang sama, tapi pada form yang berbeda, kita tambahkan form baru pada project sebelumnya, Klik Kanan Project Pilih Add Form
Komputer Grafis / Anisya, S. Kom., M. Kom
32
b. Pilih “Open”
Form2
Caption
Membuat Kotak
Form2
StartupPosition
CenterScreen
c. Untuk menambahkan coding, sama halnya seperti form sebelumnya,
d. Untuk melihat hasilnya, kita harus ganti Startup Object nya terlebih dahulu (Klik Kanan “Project1”
Pilih “Project1 Propertis…”
Pada “Startup Object” Kita ganti dengan
“Form2”).
Komputer Grafis / Anisya, S. Kom., M. Kom
33
e. Setelah itu , tekan F5 atau klik f.
.
Hasilnya :
Tugas Anda, Analisa coding berikut,
5.6.2
Sintaks Garis & Lingkaran
a. Line Method adalah metode yang digunakan untuk membuat garis horizontal, vetikal, atau diagonal. Sintaks: ObjectName.Line(x1,y1)-(x2,y2),Color,[B][F]
Cara membuat : Private Sub Form_Click() Scale (0, 90)-(90, 0) Line (12, 0)-(22, 45), vbBlue
Komputer Grafis / Anisya, S. Kom., M. Kom
34
Line (22, 0)-(32, 55), vbRed, B Line (32, 0)-(42, 42), , BF End Sub
b. Circle Method Circle Method adalah metode yang digunakan untuk menggambar lingkaran. Sintaks: ObjectName.Circle(x,y),Radius,Color
Cara membuat : Private Sub Form_Click() Circle (2000, 1000), 800 End Sub
TUGAS :
Buatkan coding vb 6.0 untuk menghasilkan gambar seperti dibawah ini (Persegi Panjang, Lingkaran, dan Garis Miring) :
Komputer Grafis / Anisya, S. Kom., M. Kom
35
BAB VI PEMODELAN BENDA PADAT DENGAN JARING POLYGONAL
6.1 Pengenalan Jaring Polygonal
Sebuah poligon di komputer grafis (generasi gambar) sistem adalah bentuk dua dimensi yang dimodelkan dan disimpan dalam database. Sebuah poligon dapat berwarna, berbayang dan bertekstur, dan posisinya dalam database ditentukan oleh koordinat dari simpul (sudut). Polygon Sebelum masuk pada permodelan tiga dimensi, ada beberapa hal yang harus dijelaskan secara mendasar, terutama pada poligon itu sendiri Poligon secara literal berarti banyak sudut. Dapat didefinisikan sebagai bangun datar yang terdiri dari susunan garis – garis yang yang membentuk sebuah sirkuit yang memiliki banyak sudut. 6.2 Macam-Macam Poligon 6.2.1 Poligon Terbuka
Poligon terbuka adalah poligon yang titik awal dan titik akhirnya merupakan titik yang berlainan (tidak bertemu pada satu titik).
Gambar 5.1 Poligon Terbuka 6.2.2 Poligon Tertutup
Poligon tertutup atau kring adalah poligon yang titik awal dan titik akhirnya bertemu pada satu titik yang sama.
Gambar 5.2 Poligon Tertutup 6.2.3 Poligon Bercabang
Poligon cabang adalah suatu poligon yang dapat mempunyai satu atau lebih titik simpul, yaitu titik dimana cabang itu terjadi.
Gambar 5.3 Poligon Bercabang
Dalam pembuatan grafis tiga dimensi, pemodelan poligonal adalah metode untuk menciptakan model 3D dengan menghubungkan segmen garis melalui titik-titik dalam ruang 3D. Model poligonal sangat fleksibel dan dapat ditampilkan oleh komputer dengan sangat cepat. Kekurangannya polygonal modeling adalah tidak dapat membuat permukaan melengkung secara akurat sesuai dengan ukuran geometris yang tepat. Permukaan melengkung biasanya dibentuk melalui metode penghalusan (smoothing) yang dibentuk dari satu garis ke garis lainnya, atau dari satu poligon ke poligon lainnya. Oleh karena itu, polygonal modeling biasa dipergunakan untuk membuat model-model 3 Dimensi objek non geometris, seperti pada kartun, mahluk hidup, dan lain-lain. Sebelum masuk lebih dalam ke dalam model poligonal tiga dimensi, ada beberapa istilah yang penting dalam permodelan poligonal ini, diantaranya :
a. Vertex Vertex adalah representasi sebuah titik ke dalam bidang tiga dimensi. Vertex tunggal disebut juga vertices. Vertex maupun vertices jika dalam bahasa sehari hari sering disebut sebagai simpul. b. Edge Edge dalam bahasa inggris berarti tepi. Tepi atau edge dalam permodelan grafik ini merujuk pada garis yang menghubungkan dua vertices. c. Segitiga tiga buah vertex yang saling berhubungan satu sama lain membentuk sebuah bidang datar (plane) segitiga, inilah yang merupakan objek dasar dalam permodelan poligonal. d. Poligon seperti yang sudah dibahas diatas, poligon merupakan sebuah bangun datar yang memiliki banyak sudut. Namun dalam permodelan tiga dimensi, poligon merujuk pada kumpulan dari segitiga – segitiga yang membentuk bangun datar lain, atau bahkan bangun ruang yang kasar. Poligon yang lebih kompleks dapat membuat objek yang terdiri lebih dari 3 simpul. Sekelompok poligon, terhubung satu sama lain dengan simpul bersama, umumnya disebut sebagai elemen. Setiap poligon yang membentuk elemen disebut wajah (face) atau permukaan. Poligon adalah kumpulan dari wajah atau permukaan tersebut. e. Mesh atau wireframe mesh atau wireframe (jala) adalah kumpulan kumpulan dari poligon yang tersusun dan terhubung sedemikian sehingga membentuk sebuah objek tiga dimensi.
Permodelan poligon dalam grafik tiga dimensi merupakan sebuah cara yang sederhana. Dalam permodelan poligon ini, sebuah bangun ruang, atau objek tiga dimensi yang akan dibangun dapat dengan leluasa dibuat karena bagaimanapun juga, prinsip dari permodelan ini adalah menyusun sedemikian vertex dan tepi – tepi dengan bebas, tergantung dari pikiran si pembuat tersebut.
6.3 Teori Geometris Dari Poligon
Seperti yang telah dibahas sebelumnya, obyek dasar yang digunakan dalam pemodelan poligon ini adalah simpul (vertices), titik dalam ruang tiga dimensi. Dua simpul dihubungkan oleh sebuah garis lurus menjadi tepi ( edge). Tiga simpul, terhubung satu sama lain dengan tiga tepi, mendefinisikan sebuah segitiga, yang merupakan poligon sederhana dalam ruang Euclidean.
Gambar 5.4 Ruang Euclidean
Ruang Euclidean adalah sebuah ruang tiga dimensi dimana setiap titik yang berada di dalam ruang tersebut memiliki alamat – alamat berdasarkan koordinat – koordinat.
Seperti yang telah dibahas sebelumnya, obyek dasar yang digunakan dalam pemodelan poligon ini adalah simpul (vertices), titik dalam ruang tiga dimensi. Dua simpul dihubungkan oleh sebuah garis lurus menjadi tepi (edge). Tiga simpul, terhubung satu sama lain dengan tiga tepi, mendefinisikan sebuah segitiga, yang merupakan poligon sederhana dalam ruang Euclidean.
6.4 Sifat-Sifat Jaring Poligonal
a. Angles Setiap poligon memiliki banyak sudut karena memiliki sisi. Setiap sudut memiliki beberapa sudut. Dua yang paling penting adalah:
Interior sudut, Jumlah dari sudut interior sederhana-n gon adalah (n - 2) π radian atau (n - 2)
× 180 derajat. Hal ini karena setiap sederhana-n gon (memiliki "n" sisi) dapat dianggap terdiri dari (n - 2) segitiga, yang masing-masing memiliki jumlah sudut radian π atau 180 derajat.
Eksterior Sudut, Sudut eksterior sudut tambahan untuk sudut interior .
Nama
Sudut
Sifat Tidak umumnya diakui sebagai poligon, meskipun beberapa
Monogon
1
disiplin ilmu seperti teori graf kadang-kadang menggunakan istilah.
Digon
2
Triangle
3
Tidak umumnya diakui sebagai poligon pada bidang euclidean, meskipun dapat kita jumpai sebagai poligon bola. Poligon sederhana yang bisa dijumpai di bidang euclidean. Bisa seperti permukaan pesawat. Poligon sederhana yang bisa menyeberang sendiri; poligon
Quadrilateral
4
sederhana yang dapat cekung; poligon sederhana yang dapat non-cyclic. Poligon sederhana yang biasa kita jumpai sebagai bintang
Pentagon
5
biasa. Sebuah bintang pentagon dikenal sebagai pentagram atau pentakel.
Hexagon
6
Bisa seperti permukaan pesawat. Poligon sederhana sehingga bentuk biasa tidak constructible
Heptagon
7
dengan kompas dan sejajar. Namun, hal itu dapat dibangun menggunakan konstruksi neusis.
Hendecagon (or undecagon)
11
Poligon sederhana sehingga bentuk biasa tidak dapat dibangun dengan dom, sejajar, dan sudut trisector.
TUGAS :
Buatkan satu program c++ untuk menampilkan poligon dengan banyak sudut tergantung digit terakhir dari noBP anda.
BAB VII PEMODELAN POLYHEDRA DENGAN JARING POLYGONAL
7.1 Jenis-Jenis Polyhedra
Polyhedra adalah suatu bidang tiga dimensi yang tersusun atas sisi-sisi berbentuk polygon. Kata Polyhedra diambil dari kata yunani kuno, yaitu poly atau banyak dan edon yang berarti dasar. Setiap garis penghubung (edge) pada polyhedra menyatukan tepat dua buah polygon.
Polyhedra memiliki beberapa jenis sesuai dengan banyaknya sisi yang dimiliki. 1. Tetrahedron Penamaan polyhedra ini berasal dari kata tetra- yang berarti empat, karena terdiri atas 4 sisi poligon berbentuk segitiga. Bentuk ini lebih dikenal sebagai bentuk piramida atau limas segitiga sama sisi. Memiliki 6 garis penghubung antar sisi serta 4 buah titik sudut. Dalam OpenGL, fungsi yang dapat dipakai untuk membuat bentuk ini adalah sebagai berikut:
glutWireTetrahedron();
atau glutSolidTetrahedron();
Gambar 1. Tetrahedron
2. Hexahedron Nama Hexahedron diambil dari kata hexa yang berarti enam. Polyhedra ini terdiri atas 6 sisi poligon berbentuk segiempat. Bentuk ini umumnya dikenal sebagai kubus. Memiliki 12 garis penghubung antara poligon dan 8 titik sudut. Dalam OpenGl, fungsi yang dapat digunakan adalah:
Komputer Grafis / Anisya, S. Kom., M. Kom
41
glutWireCube(panjangsisi);
Atau glutSolidCube(panjangsisi);
Parameter panjang sisi dapat berupa bilangan integer, foating point, ataupun double.
Gambar 2. Hexahedron
3. Octahedron Nama polyhedra ini berasal dari kata octal yaitu delapan, karena terdiri dari 8 sisi poligon. Polyhedra ini memiliki 12 garis penghubung poligon dan 6 titik sudut. Fungsi yang dapat dipakai di dalam OpenGL adalah: glutWireOcatahedron();
atau glutSolidOctahedron();
Gambar 3. Octahedron 4. Dodecahedron Polyhedra yang memiliki sisi 12 buah poligon. Poligon-poligon tersebut berupa pentagon, yaitu polihon yang memiliki 5 garis tepi. Fungsi yang dapat digunakan untuk membuat polyhedra ini menggunaka OpenGL adalah,
Komputer Grafis / Anisya, S. Kom., M. Kom
42
glutWireDodecahedron();
atau glutSolidDodecahedron();
Gambar 4. Dodecahedron
5. Icosahedron Polyhedra ini memiliki 20 buah sisi poligon yang berbentuk segitiga. Seluruh segitiga yang ada merupakan segitiga yang kongruen. Fungsi yang dapat dipakai untuk membuat bentuk ini menggunaka OpenGL adalah,
glutWireIcosahedron();
atau glutSolidIcosahedron();
Gambar 5. Icosahedron TUGAS:
Buat sebuah polyhedra sesuai keinginan anda pada kertas milimeter yang telah disediakan.
Komputer Grafis / Anisya, S. Kom., M. Kom
43
BAB VIII VISUALISASI 3 DIMENSI 8.1 Konsep Kamera
Rendering adalah proses menghasilkan gambar dari 2D atau 3D model (atau model dalam apa yang secara kolektif bisa disebut file adegan), dengan program-program komputer. Juga, hasil model seperti itu bisa disebut render a. Ini adalah upaya untuk mensimulasikan fenomena visual yang dihasilkan dari karakteristik optik kamera dan mata manusia. Efek ini dapat meminjamkan unsur realisme untuk adegan, bahkan jika efeknya hanyalah artefak simulasi kamera. Secara umum, proses untuk menghasilkan rendering 2D dari objek-objek 3D melibatkan 5 komponen utama : 1. Geometri 2. Kamera 3. Cahaya 4. Karakteristik Permukaan 5. Algoritma Rendering Dalam grafika 3D, sudut pandang ( point of view) adalah bagian dari kamera. Kamera dalam grafika 3D biasanya tidak didefinisikan secara fisik, namun hanya untuk menetukan sudut pandang kita pada sebuah world, sehingga sering disebut virtual camera. Pada kamera, dikenal 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.
8.1.1 Cahaya
Sumber cahaya pada grafika 3D merupakan sebuah objek yang penting, karena dengan cahaya ini sebuah world dapat terlihat dan dapat dilakukan proses rendering. Sumber cahaya
ini juga membuat sebuah world menjadi lebih realistis dengan adanya bayangan dari objekobjek 3D yang ada. Sebuah sumber cahaya memiliki jenis. Pada grafika 3D dikenal beberapa macam sumber cahaya, yaitu : a. Point light
Memancar ke segala arah b. Spotlight
Memancarkan cahaya ke daerah tertentu dalam bentuk kerucut. c. Ambient light
Cahaya latar/alam. Cahaya latar tersebut dimodelkan mengikuti apa yang terjadi di alam, dalam keadaan tanpa sumber cahaya sekalipun, benda masih dapat dilihat. d. Directional light
Memancarkan cahaya dengan intensitas sama ke suatu arah tertentu. Sebuah kamera minimal terdiri atas:
Kotak yang kedap cahaya (badan kamera)
Sistem lensa
Pemantik potret (shutter )
Pemutar film
8.2 Jenis-Jenis Proyeksi
Daftar berikut menjelaskan jenis proyeksi yang berbeda yang dapat digunakan dengan kamera. Jenis yang paling umum adalah perspektif dan proyeksi ortografi. CAMERA_TYPE harus item pertama dalam sebuah pernyataan kamera. Jika tidak ada yang ditentukan, kamera perspektif adalah default. Anda harus mencatat bahwa buffer vista hanya dapat digunakan dengan perspektif dan kamera ortografi.
8.2.1 Perspektif Proyeksi
Perspektif kata kunci menentukan kamera bawaan perspektif yang mensimulasikan kamera lubang jarum klasik. (Horisontal) sudut pandang yang baik ditentukan oleh rasio antara panjang vektor arah dan panjang vektor yang tepat atau dengan sudut kata kunci opsional, yang merupakan cara yang lebih disukai. The sudut pandang harus lebih besar dari 0 derajat dan lebih kecil dari 180 derajat. Lihat gambar di "Menempatkan Kamera" untuk geometri kamera perspektif.
8.2.2 Ortografi Proyeksi
Kamera ortografi menawarkan dua mode operasi: Proyeksi ortografi murni. Proyeksi ini menggunakan sinar kamera sejajar dengan membuat gambar adegan. Daerah pandang ditentukan oleh panjang kanan dan atas vektor. Salah satunya harus ditentukan, mereka tidak diambil dari kamera default. Jika dihilangkan metode kedua kamera yang digunakan. Jika, dalam kamera perspektif, Anda mengganti perspektif kata kunci dengan ortografi dan meninggalkan semua parameter lainnya sama, Anda akan mendapatkan pandangan ortografi dengan bidang gambar yang sama, yaitu ukuran gambar adalah sama. Hal yang sama dapat dicapai dengan menambahkan kata kunci sudut untuk kamera ortografi. Sebuah nilai sudut adalah opsional. Jadi modus kedua ini aktif jika ada up dan kanan berada dalam pernyataan kamera, atau ketika kunci sudut adalah dalam pernyataan kamera. Anda harus menyadari bahwa meskipun bagian terlihat dari perubahan adegan ketika beralih dari perspektif pandangan ortografi. Selama semua objek menarik yang dekat titik look_at mereka akan tetap terlihat jika kamera ortografi digunakan. Benda jauh mungkin keluar dari pandangan saat benda dekat akan tinggal di tampilan. Jika objek terlalu dekat dengan lokasi kamera mereka mungkin hilang. Terlalu dekat sini berarti, di balik ortografi bidang proyeksi kamera (pesawat yang melewati titik look_at).
8.2.3 Fisheye Proyeksi
Ini adalah proyeksi bola. The sudut pandang ditentukan oleh keyword sudut. Sudut 180 derajat menciptakan "standar" fisheye sementara sudut 360 derajat menciptakan super-fisheye ("I-lihat-segala-view"). Jika Anda menggunakan proyeksi ini Anda harus mendapatkan gambar lingkaran. Jika hal ini tidak terjadi, yaitu Anda mendapatkan gambar elips, Anda harus membaca "Rasio Aspek".
8.2.4 Ultra Proyeksi Sudut Lebar
Proyeksi ini agak mirip dengan fisheye tetapi proyek gambar ke persegi panjang bukan lingkaran. The sudut pandang dapat ditentukan dengan menggunakan kata kunci sudut.
8.2.5 Omnimax Proyeksi
Proyeksi Omnimax adalah fisheye 180 derajat yang memiliki sudut pandang berkurang dalam arah vertikal. Pada kenyataannya proyeksi ini digunakan untuk membuat film yang dapat
dilihat di kubah-seperti Omnimax bioskop. Gambar akan terlihat agak elips. Sudut kata kunci tidak digunakan dengan proyeksi ini.
8.2.6 Proyeksi Panoramic
Proyeksi ini disebut "silinder proyeksi persegi panjang". Ini mengatasi masalah degenerasi proyeksi perspektif jika sudut pandang pendekatan 180 derajat. Ini menggunakan jenis proyeksi silinder untuk dapat menggunakan tampilan sudut yang lebih besar dari 180 derajat dengan distorsi lateral peregangan ditoleransi. Sudut kata kunci yang digunakan untuk menentukan sudut pandang.
8.2.7 Proyeksi Silinder
Menggunakan proyeksi ini adegan diproyeksikan ke silinder. Ada empat jenis proyeksi silinder tergantung pada orientasi silinder dan posisi sudut pandang. Sebuah nilai float dalam kisaran 1 sampai 4 harus mengikuti kata kunci silinder. The sudut pandang dan panjang vektor atau kanan menentukan dimensi dari kamera dan gambar terlihat. Kamera untuk digunakan ditentukan oleh nomor. Jenis adalah:
silinder vertikal, sudut pandang tetap silinder horisontal, sudut pandang tetap silinder vertikal, sudut pandang bergerak sepanjang sumbu silinder silinder horisontal, sudut pandang bergerak sepanjang sumbu silinder
8.2.8 Proyeksi Bulat
Menggunakan proyeksi ini adegan diproyeksikan ke sebuah bola. Sintaks: kamera { bulat [Sudut HORIZONTAL [VERTIKAL]] [CAMERA_ITEMS ...] }
Nilai pertama setelah sudut menetapkan sudut pandang horizontal kamera. Dengan nilai kedua opsional, sudut pandang vertikal diatur: baik dalam derajat. Jika sudut vertikal tidak specfied, standarnya ke setengah sudut horizontal.
Proyeksi bola mirip dengan proyeksi fisheye, dalam adegan tersebut diproyeksikan pada bola. Tapi tidak seperti kamera fisheye, menggunakan koordinat persegi panjang bukan koordinat kutub; dalam hal ini bekerja dengan cara yang sama seperti pemetaan bola (map_type 1).
Ini memiliki beberapa manfaat. Pertama, memungkinkan gambar diberikan dengan kamera bola untuk dipetakan pada bola tanpa distorsi (dengan kamera fisheye, pertama Anda harus mengubah gambar dari kutub ke koordinat persegi panjang di beberapa editor foto). Juga, memungkinkan efek seperti "pemetaan lingkungan", sering digunakan untuk simulasi refleksi di penyaji scanline.