GRAFIKA KOMPUTER Nopember 2013

Transkripsi

1 GRAFIKA KOMPUTER Nopember 2013

2 Daftar Isi DAFTAR ISI 2 BAB 1. PENGANTAR GRAFIKA KOMPUTER DAN PEMANFAATNANYA PENDAHULUAN PENYAJIAN PENUTUP SOAL LATIHAN PETUNJUK PENILIAN TINDAK LANJUT 12 BAB 2. TEKNOLOGI DISPLAY PENDAHULUAN PENYAJIAN PENUTUP SOAL LATIHAN PETUNJUK PENILAIAN UMPAN BALIK 17 BAB 3. SYNTHETIC CAMERA PANDAHULUAN PENYAJIAN SOAL LATIHAN PETUNJUK PENILAIAN UMPAN BALIK 23

3 BAB 4. WARNA PENDAHULUAN PENYAJIAN PENUTUP SOAL LATIHAN PETUNJUK PENILAIAN UMPAN BALIK 28 BAB 5. SISTEM KOORDINAT PENDAHULUAN PENYAJIAN PENUTUP SOAL LATIHAN PETUNJUK PENILAIAN UMPAN BALIK 33 BAB 6. ALGORITHMA GARIS PENDAHULUAN PENYAJIAN PENUTUP SOAL LATIHAN PETUNJUK PENILAIAN UMPAN BALIK 39 BAB 7. ALGORITMA LINGKARAN PENDAHULUAN PENYAJIAN PENUTUP 42

4 7.3.1 SOAL LATIHAN PETUNJUK PENILAIAN UMPAN BALIK 42 BAB 8. CLIPPING PENDAHULUAN PENUTUP SOAL LATIHAN PETUNJUK PENILAIAN UMPAN BALIK 51 BAB 9. TRANSFORMASI 2 DISMENSI PENDAHULUAN PENYAJIAN PENUTUP SOAL LATIHAN PETUNJUK PENILAIAN UMPAN BALIK 58 BAB 10. TRANSFORMASI 3 DIMENSI PENDAHULUAN PENYAJIAN PENUTUP SOAL LATIHAN PETUNJUK PENILAIAN UMPAN BALIK 64 BAB 11. PROYEKSI 65

5 11. 1 PENDAHULUAN SOAL LATIHAN PETUNJUK PENILAIAN UMPAN BALIK 70 BAB 12. 3D STREET ART PENDAHULUAN PENYAJIAN PENUTUP SOAL LATIHAN PETUNJUK PENILAIAN UMPAN BALIK 76 BAB 13. UJIAN TENGAH SEMESTER PENDAHULUAN PENYAJIAN - SOAL UJIAN PENUTUP SOAL PETUNJUK PENILAIAN 78 BAB 14. UJIAN AKHIR SEMESTER PENDAHULUAN PENYAJIAN - SOAL UJIAN PENUTUP SOAL PETUNJUK PENILAIAN 80 DAFTAR PUSTAKA 81

6

7 Bab 1. Pengantar Grafika Komputer dan Pemanfaatnanya 1.1 Pendahuluan Grafika Komputer merupakan merupakan cabang ilmu komputer yang membahas algorithma untuk menampilkan simulasi (benda). Grafika komputer tidak sama dengan pemrosesan citra (image processing) Mata kuliah grafika komputer tidak membahas software komersial seperti adobe photoshop, corel draw dan sebagainya. Mata kuliah grafika komputer juga tidak membahas tentang grafik bisnis, seperti diagram pie, diagram garis dan sebagainya. 1.2 Penyajian Grafika Komputer mencakup area : o Film (spesial effects) o Industri : CAD (computer aided design) Automated machining o Visualisasi : data ilmiah hasil medik (scanning,x-ray, MRI) o Permainan Komputer o Distribusi Online Film

8 Pemodelan Industri Visualisasi data ilmiah

9 Medical Permainan/Game

10 Tiga tema utama dalam grafika komputer : q Modeling n Bagaimana kita merepresentasikan (= memodelkan) objek 3 Dimensi? n Bagaimana kita dapat membuat model dari objek-objek tertentu? q Animation n Bagaimana kita merepresentasikan gerakan sebuah objek n Bagaimana kita dapat memberikan kendali kepada pembuat animasi (animator) dalam pembuatan animasi q Rendering n Bagaimana kita mensimulasikan formasi gambar n Bagaimana kita dapat mensimulasikan cahaya seperti pada dunia nyata? Modelling dapat diartikan dalam beberapa poin penting, sebagai berikut n Representasi objek / lingkungan q shape geometri dari sebuah objek q appearance emission, reflection, and transmission of light Untuk membuat modelling dilakukan dengan langkah sebagai berikut q deskripsimanual (misal : menuliskan rumus) q manipulasi secara interaktif q menggunakan prosedur / program q melakukan pemindaian (scanning) dari objek riil Pergereakan model dilakukan dengan memperhatikan q posisi, sudut dan sebagainya sebagai fungsi dari waktu Proses dan caranya kita mengendailkan gerakan q membuat gerakan menggunakan tangan, mengisi keyframe q simulasi perilaku (membat program yang berfungsi sebagai "otak" dari sebuah objek)

11 q simulasi fisika q menangkap gerakan Proses caranya kita meniru dunia nyata? q cahaya yang datang difokuskan oleh lensa q energi cahaya mempengaruhi film q representasi gambar sebagai titik-titik / pixels (x,y) q membutuhkan representasi dari kamera Proses caranya kita meniru perilaku cahaya? q cahaya dianggap sebagai photon (partikel cahaya) q menangkap gerak lurus dari photon q membuat model interaksi antara cahaya dengan permukaan benda Gambar Diagram Proses Grafika Komputer 1.3 Penutup Grafika Komputer sangat beragam dapat diimplementasikan dalam berbagai hal. Proses terpentingnya adalah melakukan pemodelan baik 2d ataupun 3D kemudian memanipulasi, visualisasi dan tampilan.

12 1.3.1 Soal Latihan 1. Bagaimana kita merepresentasikan (= memodelkan) objek 3 Dimensi? 2. Bagaimana kita dapat membuat model dari objek-objek tertentu? 3. Bagaimana kita merepresentasikan gerakan sebuah objek 4. Bagaimana kita dapat memberikan kendali kepada pembuat animasi (animator) dalam pembuatan animasi 5. Bagaimana kita mensimulasikan formasi gambar 6. Bagaimana kita dapat mensimulasikan cahaya seperti pada dunia nyata? Petunjuk Penilian Soal Latihan dinilai untuk mereview pemahaman mahasiswa dalam menerima materi. Penilaian dilakukan dengan dasar sebagai berikut: Benar kurang dari 50% dianggap belum memahami Benar antara 50% sd 70% dianggap cukup memahami Benar 70% sampai 100% dianggap menguasai Tindak Lanjut Apabila rata-rata kelas dibelum memahami, maka materi harus disampaikan ulang di dalam kelas.

13 Bab 2. Teknologi Display 2.1 Pendahuluan Materi Teknologi Display disampaikan pada minggu ke -2 dengan tujuan menjelaskan cara, metode dan teknologi dalam penampilan gambar. 2.2 Penyajian Ada dua cara menampilkan gambar : Vector Display Raster Display Vector Display adalah gambar ditampilkan sebagai kumpulan segmen garis (vector) Raster Display adalah gambar ditampilkan sebagai kumpulan titik (pixel) Raster Display menggunakan peralatan seperti : Cathode Ray Tube (CRT) / Tabung sinar katoda o Tabung vakum yang berisi sumber elektron yang digunakan untuk melihat gambar untuk mempercepat dan membelokkan berkas elektron ke layar neon untuk menciptakan gambar. Gambar dapat mewakili bentuk gelombang listrik (osiloskop), gambar (televisi, monitor komputer), radar target dan lain-lain Plasma Display

14 o Sebuah layar plasma adalah video tampilan komputer dimana setiap piksel pada layar diterangi oleh sedikit kecil plasma atau gas yang dibebankan, agak seperti lampu neon kecil. Plasma menampilkan lebih tipis dari tabung sinar katoda (CRT) menampilkan dan lebih terang dari liquid crystal display (LCD). Liquid Cristal Display (LCD) o Suatu jenis display yang menggunakan Liquid Crystal sebagai media refl eksinya. LCD sudah digunakan di berbagai bidang, sebagai contoh: monitor,tv, kalkulator. Pada LCD berwarna semacam monitor terdapat puluhan ribu pixel. Pixel adalah satuan terkecil di dalam suatu LCD. Pixel-pixel yang berjumlah puluhan ribu inilah yang membentuk suatu gambar dengan bantuan perangkat controller, yang terdapat di dalam suatu monitor. Prinsip kerja : menyalakan / mematikan satu titik di penampil. Metode CRT Paling banyak digunakan Bekerja berdasarkan prinsip scanning : Horizontal Scanning Vertical Scanning Scanning harus dilakukan dengan cepat untuk mencegah efek kerdipan (flicker)

15 Liquid Crystal Displays (LCDs) LCDs: organic molecules, naturally in crystalline state, that liquefy when excited by heat or E field Crystalline state twists polarized light 90º. Plasma display panels Similar in principle to fluorescent light tubes Small gas-filled capsules are excited by electric field, emits UV light

16 UV excites phosphor Phosphor relaxes, emits some other color Raster Display System Setiap kondisi pixel di layar disimpan ke dalam memori yang disebut : frame buffer. Pixel mempunyai informasi mengenai : lokasi = lokasi memori di frame buffer

17 banyaknya (lokasi) pixel yang dapat disimpan disebut sebagai resolusi warna = banyaknya byte di frame buffer = 2 n 1 bit memori = 2 1 warna = 2 warna 4 bit memori = 2 4 warna = 16 warna 8 bit memori (1 byte) = 2 8 warna = 256 warna Kapasitas memori membatasai banyaknya pixel yang ditampilkan dan warna yang dapat direpresentasikan. 2.3 Penutup Teknologi Display menjelaskan konsep LCD, CRT dan Raster. Dengan memahaminya akan memudahkan bagaimana penampilan grafis dapat dilakukan Soal Latihan 1. Jelaskan proses kerja Raster dan Vector Display! 2. Apa perbedaan teknologi LCD, Plasma dan Raster Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan 2 item penting dalam soal latihan. Penilian subyektif diserahkan kepada dosen pengampu Umpan Balik Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang akan dijelaskan.

18 Bab 3. Synthetic Camera 3.1 Pandahuluan Synthetic camera disampaikan dalam materi grafika komputer minggu ke 3. Tujuan matakuliah ini untuk mengenalkan proyeksi perpektif dengan mata berada di sumbu proyeksi sangat membatasi sudut pandang. Memutar objek agar memperoleh sudut pandang yang berbeda sangat tidak efisien. Pendekatan lain adalah dengan menggunakan synthetic camera 3.2 Penyajian Citra objek dibawa cahaya menuju lensa sehingga di lensa muncul bayangan objek, oleh cahaya bayangan tersebut kemudian diteruskan ke film (plastik yang dilapisi dengan bahan kimia peka cahaya) sehingga menimbulkan reaksi kimia yang membentuk citra objek Synthetic camera adalah metoda memposisikan camera untuk melihat benda. Membutuhkan tiga komponen : Bidang proyeksi Sistem koordinat viewer

19 mata. Cara kerjanya adalah objek dipindahkan ke koordinat viewer dan kemudian 'bayangan' objek diproyeksikan perspektif. Objek perlu dipindahkan ke koordinat viewer agar posisi objek sesuai dengan (align) arah mata. Viewing Coordinate Viewing coordinate sering juga disebut sebagai UVN system. Sistem koordinat UVN mempunyai tiga sumbu : l U l V l N Viewing coordinate diperoleh berdasarkan informasi mengenai : l posisi kamera pada world coordinate, posisi ini disebut juga sebagai VRP (Viewing Reference Point).VRP ditentukan berdasarkan vector r = (r x, r y,r z ) l Arah viewplane, disebut sebagai VPN (Viewplane Normal) dan ditentukan berdasarkan vector n (n x,n y,n z ). Vector n ditentukan berdasarkan world coordinate. l Arah sumbu V ditentukan berdasarkan vector u. Vector u bersifat tegak lurus terhadap n dan v.

20 l posisi mata (eye) ditentukan dalam viewing coordinate dan disimbolkan dengan e = (e u,e v,e n ). Umumnya e berisi (0,0,E) Untuk menghitung n,v dan u, Pemakai dapat menentukan nilai n dengan memasukkan vector norm dan vector n dihitung sebagai : norm norm Untuk memperoleh norm, tentukan titik yang menjadi pusat pandang camera (look at) dan kemudian norm dihitung sebagai : norm = scene - r Vector v ditentukan oleh pemakai berdasarkan vector up (u x,u y,u z ) dan dihitung sebagai :

21 up' = up up' v = up' ( up n)* n l Catatan : l tanda menyatakan dotproduct dua vector l tanda up menyatakan panjang vector up Karena vector u harus tegak lurus terhadap n dan v maka vector u dapat diperoleh dari : u = n v l Catatan : n x v menyatakan cross product Vieweing Coordinate Setiap titik di world coordinate (w) dapat ditransformasikan ke viewing coordinate (p) n = dengan menggunakan rumus :

22 Setelah titik di world coordinate di transformasikan ke viewplane maka tahap selanjutnya adalah melakukan proyeksi perspektif terhadap titik di viewplane. Jika diketahui titik p=(p u ;p v ;p n ) adalah titik di viewplane dan mata terletak di (e u ;e v ;e n ) maka titik q (u*,v*) sebagai proyeksi perspektif dari p dapat diperoleh dengan t = w - r pu = t u e n - p n v* pv = t v u* = e n p u - e u p n pn = t n = Apabila e = (0,0,e n ) maka rumus di atas dapat disederhanakan menjadi e n - p n e n p v - e v p n p u* = p e n Penutup Synthetic camera mengenalkan proyeksi perpektif dengan mata berada di sumbu proyeksi sangat membatasi sudut pandang. Memutar objek agar memperoleh sudut pandang yang berbeda sangat tidak efisien.

23 3.3.1 Soal Latihan 1. Jelaskan bagaimana cara kerja synthetic camera? Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian subyektif diserahkan kepada dosen pengampu Umpan Balik Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang akan dijelaskan.

24 Bab 4. Warna 4.1 Pendahuluan Materi tentang warna menjelaskan proses pemberian dan hasil yang utampilkan ketika pewarnaan terhadap ssuatu objek selesai dijalankan. 4.2 Penyajian Warna sebenarnya merupakan persepsi kita terhadap pantulan cahaya dari bendabenda. Cahaya merupakan energi elektromagnetik. Cahaya dapat dibagi menjadi dua bagian : q Cahaya terlihat (visible light) yaitu bagian dari energi elektromagnetik dengan panjang gelombang nm (nanometer) q Cahaya tidak terlihat (invisible light) yaitu bagian dari energi elektromagnetik dengan panjang gelombang < 400 nm atau > 700 nm Mata manusia hanya peka terhadap panjang gelombang nm dan perbedaan panjang gelombang tersebut dipersepsikan sebagai 'warna'.

25 Spektrum Warna Proses Manusia Melihat Warna Bagian mata yang sensitif terhadap cahaya disebut sebagai retina, retina berisi dua macam kelompok sel yaitu : rod dan cone. Rods Cones q Hanya dapat membedakan terang dan gelap (hitam / putih) q Mata mempunyai 120 juta rod q Tidak sensitif terhadap warna q Bagian retina yang peka terhadap warna q Mata mempunyai 60 juta cones q Ada tiga macam cones, masing-masing peka terhadap warna merah (L), biru (S) dan hijau (M).

26 q Dapat membedakan 200 warna sekaligus Fovea adalah arena di retina yang berisi cones, Berukuran 1/150 inch, Fovea hanya mempunyai sudut pandang sebesar 1,7 derajad. Diluar itu gambar terlihat kabur. Setiap cones di fovea mempunyai satu jalur syaraf ke otak dan dapat mengirim 'gambar' sekaligus (paralel). Bandingkan : Video Kamera mempunyai sensor tetapi hanya dapat mengirim 'gambar' satu persatu (stream). Warna dapat diproduksi berdasarkan dua cara : q Substractive Colour q Additive Colour Substractive : warna dihasilkan sebagai akibat dari diserapnya warna tertentu. q Tinta cetak Additive : warna dihasilkan sebagai campuran dari warna yang dipancarkan oleh sumber cahaya. q Monitor

27 Ada berbagai cara untuk menghasilkan warna menggunakan komputer. Beberapa model warna yang digunakan antara lain : q RGB q HSV / HSB q HLS q CMY(K) q CIE Warna diperoleh dari campuran tiga warna dasar (primary color), yaitu : Red, Green, Blue. Setiap komponen warna disimpan sebagai angka dari (0-FF), dengan q 0 = tidak ada komponen q 255 = komponen digunakan penuh Menggunakan warna dasar (primary color) : Cyan, Magenta, Yellow dan Black. Warna lain diperoleh karena campuran warna dasar menyerap warna dasar dan memantulkan warna yang diinginkan. HSB merupakan sistem warna yang menggunakan ukuran : q Hue : warna yang diinginkan, diukur dengan nilai 0 o o, dengan 0 o = red,12 o =green, 240 o =blue q Saturation : keaslian warna, diukur dengan nilai 0% - 100%. Nilai 0 menyatakan warna putih dan 100% menyatakan warna asli q Value / Brightness : pengaruh kecerahan, 0% menyatakan tidak ada cahaya (hitam) dan 100% menyatakan warna putih. HLS, Menggunakan ukuran : q Hue : warna yang diinginkan, diukur dengan nilai 0 o o, dengan 0 o = red,12 o =green, 240 o =blue

28 q Lightness : pengaruh warna putih, nilai maksimum Lightness menyatakan warna putih sedangkan nilai minimum menyatakan warna hitam. q Saturation : keaslian warna, diukur dengan nilai 0% - 100%. Nilai 0 menyatakan warna putih dan 100% menyatakan warna asli CIE (Commission Internationale d'eclairage) mendefinisikan tiga sumber cahaya hipotetis x,y,z yang menggunakan kurva positif dari spektrum 4.3 Penutup Pewarna harus dikenali dalam range HSB, KSL dna CIE Soal Latihan 1. Jelaskan perbedaan antara: HSB HSL CIE Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian subyektif diserahkan kepada dosen pengampu Umpan Balik Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang akan dijelaskan.

29

30 Bab 5. Sistem Koordinat 5.1 Pendahuluan Materi sistem koordinat menjelaskan dan mengenalkan konsep grafis menggunakan sistem koordinat yang akan membantu dalam proses penyusunan algoritma grafika. 5.2 Penyajian Ada dua macam sistem koordinat : l Cartesian l Polar Sistem Koordinat Polar menggunakan sudut terhadap garis horison (α) dan jarak dari titik pusat (R) untuk menunjukkan lokasi sebuah benda Sistem Koordinat Cartesian menggunakan pasangan (x,y) untuk menyatakan lokasi sebuah benda di bidang (2D) dan pasangan (x,y,z) untuk lokasi di ruang (3D). Sistem Koordinat juga dapat dibagi menjadi dua macam bergantung kepada situasi : l World Coordinate (wc) l Sistem Koordinate untuk menyatakan lokasi benda di dunia l Screen Coordinate (sc) l Sistem Koordinat untuk menyatakan lokasi titik di layar. World Coordinate mempunyai batas -~ sampai dengan +~ untuk sumbu x dan y. Apabila area yang dilihat pada world coordinat dibatasi pada area tertentu maka area tersebut dinamakan window.

31 Screen Coordinate Screen Coordinate menggunakan orientasi sumbu y yang berbeda dengan World Coordinate. Screen Coordinate hanya menggunakan nilai positif untuk sumbu x dan y dan titik (0,0) terletak di pojok kiri atas. Batas maksimal pada sumbu x = Xmax dan batas maksimal pada sumbu y = Ymax v* p v = Perbedaan orientasi tersebut menyebabkan gambar di World menjadi tampak terbalik di screen. Area yang digunakan untuk menampilkan gambar di layar disebut sebagai viewport. Tranformasi

32 1- p n e n Agar gambar di screen tampak sama dengan di world maka perlu dilakukan transformasi koordinat. Dengan demikian setiap titik di wc dapat diketahui lokasinya di sc sebagai : x sc = x wc y sc = ymax y wc Rumus (1) tidak dapat mengatasi persoalan : l Pemakaian window dan viewport. l Nilai negatif dari koordinat wc. 5.3 Penutup Pewarna harus dikenali dalam range HSB, KSL dna CIE.

33 5.3.1 Soal Latihan 1. Jelaskan cara kerja transformasi dari World Coordinate ke Screen Coordinate Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian subyektif diserahkan kepada dosen pengampu Umpan Balik Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang akan dijelaskan.

34 Bab 6. Algorithma Garis 6.1Pendahuluan Bagian ini menjelaskan bagaimana algorithma garis dibuat dan manipulasi garis sehingga menghasilkan beberapa fungsi matematika. 6.2 Penyajian Permasalahan Pixel mana yang harus dipilih untuk menggambar sebuah garis? Algorithma garis adalah algorithma untuk menentukan lokasi pixel yang paling dekat dengan garis sebenarnya (actual line). Ada tiga algorithma utama untuk menggambar garis : q Line Equation q DDA Algorithm q Bresenham s Algorithm

35 Line Equation Sebuah garis lurus dapat diperoleh dengan menggunakan rumus : y = mx + b dimana : q m = gradien q b = perpotongan garis dengan sumbu y. Apabila dua pasang titik akhir dari sebuah garis dinyatakan sebagai (x1,y1) and (x2, y2), maka nilai dari gradien m dan lokasi b dapat dihitung dengan Gradien danm Tipe Garis Algorithma DDA

36 Digital differential analyzer (DDA) merupakan algorithma untuk menghitung posisi pixel disepanjang garis dengan menggunakan posisi pixel sebelumnya. Algorithma berikut ini menggunakan asumsi bahwa garis berada di kuadran I atau II serta garis bertipe cenderung tegak atau cenderung mendatar. Untuk garis dengan 0 < m < 1, maka x i+1 = x i +1 dan : yi +1 = yi + m Untuk garis dengan m > 1, maka y i+1 = y i + 1 dan : x i+ 1 = xi + 1 m Algorithma Bresenham Bresenham mengembangkan algorithma yang lebih efisien. Algorithma ini mencari nilai integer yang paling mendekati garis sesungguhnya (actual line). Algorithma ini tidak memerlukan pembagian. Algorithma Bresenham yang disajikan berikut ini hanya dapat digunakan untuk garis yang berada di kuadran I dan 0 < m < 1. Anda yang ingin mempelajari pembuktian matematis dari algorithma Bresenham silahkan membaca buku Computer Graphics (Hearn dan Baker)

37 d1=m ½, karena d1> 0 atau positif maka pixel berikutnya adalah pixel (x i+1, y i+1 ) Algorthma Bresenham (0<m<1) Atribut Garis Atribut garis meliputi : q Ketebalan garis q Pola garis q Warna garis

38 6.3 Penutup beberapa algoritma garis diperlukan untuk memanipulasi garis sehingga dapat menampilkan sesuatu kebutuhan grafika. Algoritma Brehemsam dan DDA minimal harus dipahami mahasiswa Soal Latihan 1. Gambar garis berikut ini dengan menggunakan algorithma Bresenham : (0;1) (6;5) (2;2) (7;5) (0;1) (5;7) Jawaban:

39 6.3.2 Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian subyektif diserahkan kepada dosen pengampu Umpan Balik Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang akan dijelaskan.

40 Bab 7. Algoritma Lingkaran 7.1 Pendahuluan Materi mengenai algoritma Lingkaran menjelaskan bagaimana lingkaran di manupulasi dengan algoritme tertentu dalam grafika komputer 7.2 Penyajian Menggambar lingkaran dapat menggunakan rumus : l sin dan cosinus l Algorithma Bresenham Pemakaian sinus dan cosinus membutuhkan memori karena melibatkan angka pecahan serta komputasi yang rumit dalam menentukan nilai sinus dan cosinus. Bresenham s Circle Algorithma lingkaran bresenham melibatkan angka integer dan tidak membutuhkan pembagian. Algorithma yang disajikan berikut ini hanya membahas pada kuadran I yaitu pada x 0 dan y 0

41 Contoh Algorithma Lingkaran Bresenham : Δ i =(x i +1) 2 +(y i -1) 2 -R 2 Δi < 0 maka α=m H - m D (kasus 1 dan 2) bila α 0 maka pilih m H bila α > 0 maka pilih m D Δi > 0 maka (kasus 3 dan 4) β = m D m V bila β 0 maka pilih m D bila β > 0 maka pilih m V Δi = 0 maka pilih m D Δ i =(x i +1) 2 +(y i -1) 2 -R 2 Δi < 0 maka α=m H - m D (kasus 1 dan 2) bila α 0 maka pilih m H bila α > 0 maka pilih m D Δi > 0 maka (kasus 3 dan 4) β = m D m V

42 bila β 0 maka pilih m D bila β > 0 maka pilih m V Δi = 0 maka pilih m D 7.3 Penutup Algorutma lingkaran mengimplementasikan algoritma bresenham dan sin dan cons Soal Latihan 1. Implementasikan algorithma lingkaran Bresenham ke dalam salah satu bahasa pemrograman. 2. Tugas kelompok (maks 3 orang). 3. Kumpulkan listing program dan printout hasil program. 4. Dikumpulkan pada pertemuan berikutnya Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian subyektif diserahkan kepada dosen pengampu Umpan Balik Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang akan dijelaskan.

43 Bab 8. Clipping 8.1 Pendahuluan Materi ini menjelaskan implementasi algoritma Clipping Cohen-Sutherland pada pbjek grafika komputer 8.2 Penyajian Clipping adalah metoda untuk hanya menampilkan garis pada area yang visible (terlihat) seperti pada gambar berikut: Terdapat Visible dan Ivisible Link Berdasarkan posisi garis terhadap area gambar maka garis dapat dibedakan menjadi : Bagaimana menentukan visible dan invisible line? fully visible : (x1 xmin) dan (x1 xmax) o dan (y1 ymin) dan (y1 ymax) dan (x2 xmin) o dan (x2 xmax) dan (y2 ymin) dan (y2 ymax)

44 partially visible : - - coba sendiri dan anda akan menemukan bahwa tidak mudah melakukan hal tersebut! Algorithma Clipping Berbagai algorithma telah dikembangkan untuk menangani masalah pemotongan garis tersebut, antara lain : Cyrus- Beck Cohen- Sutherland Algorithma Cohen-Sutherland Area gambar dibatasi oleh xmin,xmax, ymin,ymax Cohen dan Sutherland memberikan kode kepada tiap area yang mungkin dilewati oleh sebuah garis atau disebut sebagai region code. Region code mempunyai panjang empat bit dan menggunakan urutan sebagai berikut :

45 Sehingga diperoleh region code : Garis kemungkinan partially visible atau fully invisible apabila region code dari ujung garis tersebut mempunyai bit bernilai 1

46 Pemotongan (clipping) dilakukan terhadap ujung-ujung garis yang region code berisi bit bernilai 1. Contoh sebelumnya menunjukkan bahwa ujung Pa, Pb, Qc,Qd dan Re yang akan mengalami pemotongan Ujung garis Pa Region code Pa =1000 Pa berpotongan dengan garis ymax sehingga menghasilkan titik potong p1 (x1,ymax) Ujung garis Pb Region code Pb = 0010 Pb berpotongan dengan garis xmax sehingga menghasilkan titik potong p2 (xmax,y1)

47 Dengan menggunakan cara yang sama maka lokasi titik potong untuk tiap area akan sesuai tabel di bawah ini : Koordinat titik potong dapat dicari dengan cara :

48 Untuk ujung-ujung garis dengan region code berisi bit 1 maka ada tiga kemungkinan perpotongan antara garis P dengan area gambar Apabila ditemukan lebih dari satu titik potong maka pilih titik potong yang paling "dekat" dengan area gambar. Contoh algoritma: Ambil ujung pertama (Pa) dari garis P rc = Tentukan Region Code dari Pa

49 switch (rc) 0 : p = Pa 1 : p = (xmin,yp1) 2 : p = (xmax,yp2) 4 : p = (xp2,ymin) 5 : p1 = (xp2,ymin) ; p2 = (xmin,yp1) Tentukan mana yang lebih dekat antara p1 & p2 6 : p1 = (xp2,ymin) ; p2 = (xmax,yp2) p = Tentukan mana yang lebih dekat antara p1 & p2 8 : p = (xp1,ymax) 9 : p1 = (xp1,ymax) ; p2 = (xmin,yp1) p = Tentukan mana yang lebih dekat antara p1 & p2 10 : p1 = (xp2,ymax) ; p2 = (xmin,yp1) p = Tentukan mana yang lebih dekat antara p1 & p2 Ambil ujung kedua (Pb) dari garis P rc = Tentukan Region Code dari Pb switch (rc) 0 : q = Pb 1 : q = (xmin,yp1) 2 : q = (xmax,yp2) 4 : q = (xp2,ymin) 5 : p1 = (xp2,ymin) ; p2 = (xmin,yp1) q = Tentukan mana yang lebih dekat antara p1 & p2 6 : p1 = (xp2,ymin) ; p2 = (xmax,yp2)

50 q = Tentukan mana yang lebih dekat antara p1 & p2 8 : p1 = (xp1,ymax) 9 : p1 = (xp1,ymax) ; p2 = (xmin,yp1) q = Tentukan mana yang lebih dekat antara p1 & p2 10 : p1 = (xp2,ymax) ; p2 = (xmin,yp1) q = Tentukan mana yang lebih dekat antara p1 & p2 Gambar garis dari p menuju q 8.3 Penutup Algorutma Cohen-Sutherland digunakan untuk memanipulasi algoritma clipping yang digunakan untuk memootng objek grafika Soal Latihan 1. Tugas (kelompok) : Tentukan titik-titik potong dari garis-garis berikut : P = (2,1) - (6,7) Q = (2,3) - (7,5) S = (4,2) - (8,7) pada area gambar (2,2) - (5,5) 2. Tugas kelompok (maks 3 orang). 3. Kumpulkan listing program dan printout hasil program. 4. Dikumpulkan pada pertemuan berikutnya.

51 8.3.2 Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian subyektif diserahkan kepada dosen pengampu Umpan Balik Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang akan dijelaskan.

52 Bab 9. Transformasi 2 Dismensi 9.1 Pendahuluan Materi pada bagian ini menjelaskan proses transformasi atau perubahan objek grafis menjadi objek 2 Dimensi. 9.2 Penyajian Transformasi adalah Metoda untuk memanipulasi lokasi sebuah titik. Ada 3 macam transformasi : q Translation (Pergerseran) q Scaling (Penskalaan) q Rotation (Pemutaran ) Translation Titik A (x,y) digeser sejumlah Tr x pada sumbu x dan digeser sejumlah Tr y pada sumbu y Rumus Umum : Q(x,y) = P(x,y) +Tr = P(x+Trx, y+try) Contoh : Diketahui : A(2,4) digeser sejauh (4,2) Ditanya : lokasi hasil pergeseran (A ) Jawab : A (x,y) = A + Tr = (2,4) + (4,2) = (6,6)

53 Scalling Menggunakan asumsi titik pusat (0,0). Lokasi asli dikalikan dengan besaran S x pada sumbu x dan S y pada sumbu y Rumus Umum : Q(x,y) = A * S = A(x,y) * S(x,y) = A(x*S x, y * S y ) Contoh Diketahui : Titik A (1,1);B (3,1); C(2,2), ketiga titik tersebut diskalakan sebesar S x = 2 dan S y = 3 Ditanyakan : Lokasi titik hasil penskalaan Jawab : A =(1*2, 1*3) = (2,3) B =(3*2, 1*3) = (6,3) C =(2*2, 2*3) = (4,6)

54 Rotasi Dari rumus trigonometri diketahui bahwa : x' = y' = r cos( φ + θ ) r sin( φ + θ ) = r cosφ cosθ r sinφ sinθ = r sinφ cosθ + r cosφ sinθ Dimana r merupakan jarak dari titik asal terhadap titik pusat (0,0). Diketahui pula : Sehingga : x = r cosφ, y = r sinφ

55 x'=xcosθ ysinθ y'=xsinθ+ycosθ Contoh Diketahui : A(1,1);B(3,1);C(2,2) Ditanyakan : Rotasikan ketiga titik tersebut sebesar 90 o Jawab : A =(1*cos 90-1*sin 90, 1*cos 90+1*sin 90) =(0-1,0+1)=(-1,1) B =(3*cos 90 1*sin 90, 1*cos *sin 90) =(-1,3) C =(2*cos 90 2*sin 90, 2 * cos *sin 90) =(-2,2)

56 Rotasi/Penskalaan pada Sembarang Titik Pusat Tahapan untuk melakukan rotasi atau penskalaan dengan sembarang titik pusat (x r, y r ). q Lakukan pergeseran sebesar (-x r,-y r ) q Lakukan rotasi atau penskalaan q Lakukan pergeseran sebesar (x r,y r ) Transformasi Menggunakan Metric Rumus transformasi juga dapat dinyatakan dengan matriks seperti berikut : a b c M = d e f g h i Sehingga rumus transformasi menjadi : [ x' y' 1] = [ x y 1 ]* M

57 Tranformasi Berturut-turut Transformasi berturut-turut akan lebih mudah dihitung dengan menggunakan matriks transformasi Rumus Umum : M b = M 1 * M 2 * M 3 *...*M n Dengan M b merupakan matrik transformasi baru dan M 1...M n merupakan komponen matrik transformasi. 9.3 Penutup Transformasi 2D memerlukan traslasi, scallliung dan rotasi sebagai proses transformasi yang berurutan Soal Latihan 1. Diketahui : Titik A(1,1); B(3,1); C(2,3) Ditanyakan : Skalakan sebesar (3,3) titik tersebut dengan menggunakan titik pusat (2,2)

58 Jawab : a) Pergeseran sebesar (-2,-2) A =(1-2,1-2) = (-1,-1) B =(3-2,1-2) = (1,-1) C =(2-2,3-2) = (0,1) b) Penskalaan A = (-1*3,-1*3) = (-3,-3) B = (1*3,-1*3) = (3,-3) C = (0*3,1*3) = (0,3) c) Pergeseran sebesar (2,2) A = (-3+2,-3+2) = (-1,-1) B = (3+2,-3+2) = (5,-1) C = (0+2,3+2) = (2,5) Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian subyektif diserahkan kepada dosen pengampu Umpan Balik Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang akan dijelaskan.

59 Bab 10. Transformasi 3 Dimensi 10.1 Pendahuluan Materi ini membahas bagaimana proses transformasi objek grafika ke dalam bentuk 3 Dimensi 10.2 Penyajian Yang membedakan 2 dimensi dengan 3 dimensi? q 2 Dimensi : Tinggi dan Lebar q 3 Dimensi : Tinggi, Lebar dan Kedalaman Kedalaman adalah jarak antara pemirsa (viewer) terhadap benda yang dia lihat. Perbedaan 2D dan 3 D dapat digambarkan sebagai berikut: Elaborasi 3 D

60 Bagaimana manusia memperoleh kesan kedalaman? q Manusia mempunyai dua mata. q Kedua mata manusia mempunyai selisih sudut pandang 120 o q Perbedaan sudut pandang tersebut membuat masing-masing mata memperoleh gambar yang berbeda untuk objek yang sama. q Perbedaan gambar diproses oleh otak sehingga kita memperoleh kesan 'kedalaman' atau jarak terhadap benda. Percobaan : Tutup salah satu mata anda selama kurang lebih 2 hari dan anda akan mengetahui bahwa anda tidak dapat menentukan dengan mudah jarak antara anda dengan benda yang anda lihat Sifat 3D Setiap titik dalam 3 dimensi ditentukan oleh tiga posisi : q x : jarak titik tersebut terhadap sumbu x q y : jarak titik tersebut terhadap sumbu y q z : jarak titik tersebut terhadap sumbu z Posisi sebuah titik dalam 3 dimensi dituliskan dalam bentuk (x,y,z). Komputer dapat digunakan untuk mengolah benda tiga dimensi. Ada tiga persoalan dalam mengolah benda tiga dimensi menggunakan komputer : q Pembuatan lokasi titik 3D q Manipulasi titik 3D q Transformasi titik 3D menjadi 2D

61 Proses yang digunakan untuk menghasilkan lokasi titik-titik 3D yang menunjukkan bentuk dari benda 3D. Ada 3 macam proses untuk menghasilkan lokasi titik 3D : q Penentuan langsung menggunakan peralatan seperti mouse3d, scanner3d berbagai peralatan lain q Menggunakan parametric surface q Menggunakan prosedur khusus seperti extrude dan surface of revolution. Scanner 3D Scanner 3D merupakan peralatan yang digunakan untuk menghasilkan lokasi titiktitik 3D secara langsung dengan menunjuk lokasi titik tersebut. Contoh peralatan : mouse, trackball, laser scanner dan sebagainya. Parametric Surface Digunakan untuk menghasilkan benda-benda yang dapat direpresentasikan dalam rumus matematika seperti : bola, donut, tabung, cone dan sebagainya Extrude Merupakan prosedur menghasilkan lokasi titik 3D dengan menarik titik-titik 2 dimensi ke satu arah tertentu Surface of Revolution Prosedur untuk menghasilkan lokasi titik 3D dengan cara memutar profile pada sumbu putar

62 Representasi Struktur data titik 3 D Titik 3D dapat disimpan sebagai : q Mesh n Mesh merupakan kumpulan titik 3D yang saling dihubungkan. n Model yang dihasilkan disebut sebagai wireframe model n Permukaan benda (surface) diperoleh dengan menghubungkan titik-titik vertex baik dalam bentuk segiempat atau segitia. n Umumnya digunakan surface dalam bentuk segitiga karena bentuk segitiga akan selalu berada dalam keadaan planar (datar). q Rumus matematika q Titik profile Proses Komputer 3D

63 10.3 Penutup Transformasi 3 D dilakukan dengan beberapa langkah utama yaitu manipulasi dan penampilan. Kemudian dilakukan beberapa langkah seperti transformasi, pewarnaan, perspektif dan camera Soal Latihan 1. Tuliskan cara Mesh Mesh dengan surface segi- empat disimpan Jawaban : Point3D = record x,y,z:real; end; Mesh = record

64 jumvertex,jumedge:integer; vertex : array [ ] of Point3D; edge : array[ ,1..2] of integer; end; Ilustrasi: Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian subyektif diserahkan kepada dosen pengampu Umpan Balik Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang akan dijelaskan.

65 Bab 11. Proyeksi Pendahuluan Materi ini menjelaskan metode menggambarkan benda tiga dimensi pada bidang 2 dimensi 11.2 Penyajian Proyeksi adalah metoda menggambarkan benda tiga dimensi pada bidang 2 dimensi. Ada 2 cara melakukan proyeksi : q Proyeksi paralel : Semua garis paralel akan tampak paralel pada bidang proyeksi. q Proyeksi perspektif : Semua garis paralel akan menghilang di titik pusat proyeksi. Proyeksi Pararel Ada dua macam proyeksi paralel : q Proyeksi Orthographic q Proyeksi Oblique Proyeksi orthographic adalah proyeksi dengan mata tegak lurus terhadap bidang proyeksi

66 Proyeksi Oblique adalah proyeksi dengan mata berada di lokasi yang tidak tegak lurus terhadap bidang proyeksi Proyeksi orthographic dibagi menjadi 2 macam : q Pandangan Multiview Orthographic q Pandangan Axonometric yang dibagi menjadi tiga macam : n Isometric : Proyeksi dimana 3 muka dipendekkan dalam ukuran yang sama n Dimetric : Proyeksi dimana 2 muka benda dipendekkan dalam ukuran yang sama n Trimetric : Proyeksi dimana 2 muka dipendekkan dalam ukuran yang berbeda Proyeksi ini diperoleh dengan menolkan salah satu koordinat sesuai dengan sumbu proyeksi. Terhadap bidang xy : Q(x,y) = P(x,y,z) Terhadap bidang xz : Q(x,z) = P(x,y,z) Terhadap bidang yz : Q(y,z) = P(x,y,z) Contoh Proyeksi Multiview Orthographic Contoh Proyeksi Axonometric

67 Proyeksi Oblique Memproyeksikan ke garis sejajar yang tidak tegak lurus terhadap bidang proyeksi. Dibagi menjadi dua macam q Cavalier q Cabinet Proyeksi perspektif bergantung pada dua variable : lokasi mata dan bidang proyeksi.

68 Proyeksi Perpektif Dengan bidang proyeksi adalah bidang xy dan titik terletak di sumbu z sejauh E maka titik hasil proyeksi akan z = 0 apabila : 1 t' = 1 z E y' = y * t' x' = x * t' dengan E > z 11.3 Penutup Proyeksi benda 3D ke dalam bidang 2D dapat dilakukan denga beberapa teknik proyeksi, antara lain Proyeksi paralel : Semua garis paralel dan Proyeksi perspektif.

69 Soal latihan Diketahui sebuah benda dengan vertex-vertex dan edge seperti tabel di bawah ini, lakukan proyeksi perspektif jika E terletak di z=10 dan z = 20: Jawaban

70 Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian subyektif diserahkan kepada dosen pengampu Umpan Balik Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang akan dijelaskan.

71 Bab 12. 3D Street Art 12.1 Pendahuluan Materi ini memeberikan pengalaman kepada peserta didik untuk melakukan praktek materi yang didapatkan dalam format project 3D Street Art Penyajian 3D street art adalah proses mengabungkan unsur kreatif grafik dengan konsep 3D pada grafika komputer. Cara Kerja 3 D Street Art sebagai berikut 1. membuat Bidang Art, lakukan langkah berikut

72 2. Placing the object

73 3. Proyeksi 4. Skala dan Efek 5. Skala dan Efek

74 6. Realisme 7. Compare

75 12.3 Penutup Proyek 3D street art ini dibuat untuk mengimplementasi teori kedalam praktek rieal yang penuh dengan implementasi keilmuan Soal Latihan Buat kelompok maksimal 5 orang dan lakukan langkah diatas dengan objek gambar lainnya Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian subyektif diserahkan kepada dosen pengampu

76 Umpan Balik Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang akan dijelaskan.

77 Bab 13. Ujian Tengah Semester 13.1 Pendahuluan Soal Ujian tengah Semester digunakan sebagai instrumen penilaian dan kemampuan mahasiswa dalam menerima materi kuliah yang dijadwalkan 13.2 Penyajian - Soal Ujian Peraturan 1. Soal dikerjakan secara berurutan sesuai nomor soal 2. Ujian bersifat terbuka, tetapi tidak diperbolehkan bekerjasama 3. Apabila diketahui bekerjasama dalam bentuk pinjam meminjam catatan, memberikan jawaban dan lainnya, petugas akan mencatat dan akan mendapatkan pengurangan nilai Pertanyaan 1. Jelaskan yang anda ketahui mengenai: a. Grafika Komputer b. Sistem Grafika Komputer 2. Jelaskan perbedaan antara Image Processing dan Computer Graphics 3. Jelaskan bagaimana cara bekerja a. Vector Display b. Rasyer Display 4. Bedakan Primitif Grafis dibawah ini: a. Pixel (dot) b. Garis (Line) c. Lingkaran (Circle) d. Ellipse e. Kurva f. Character 5. Jelaskan Digital Differential Analyser Algorithm bekerja dalam komputer grafik. 6. Jelaskan Bresenham s algorithm bekerja dalam komputer grafik. 7. Jelaskan algoritma yang digunakan pada area filling a. Scan line b. Boundary fill c. Flood fill

78 8. Berdasarkan, 3D street art project kelompok anda, berikan informasi sebagai berikut: a. Nama Project anda : b. Ide projecy anda : 13.3 Penutup Sebagai evaluasi tengah semester memberikan masukan kepada pegampu porsi materi yang sudah dan belum dikuasai oleh mahasiswa Soal seperti pada bagian penyajian Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian didasarkan pada ukuran kuantitatif kepada dosen pengampu: Kurang dari 50 poit : D 51 sd 65 poin: C 66 sd 75 poin : B 76 keatas poin : A

79 Bab 14. Ujian Akhir Semester 13.1 Pendahuluan Soal Ujian Akhir Semester digunakan sebagai instrumen penilaian dan kemampuan mahasiswa akhir dalam menerima materi kuliah yang dijadwalkan 13.2 Penyajian - Soal Ujian Peraturan Soal dikerjakan secara berurutan sesuai nomor soal Ujian bersifat terbuka, tetapi tidak diperbolehkan bekerjasama Apabila diketahui bekerjasama dalam bentuk pinjam meminjam catatan, memberikan jawaban dan lainnya, petugas akan mencatat dan akan mendapatkan pengurangan nilai Pertanyaan: 1. Diketahui sebuah benda dengan vertex-vertex dan edge seperti tabel di bawah ini, lakukan proyeksi perspektif jika E terletak di z=10 dan z = 20: 2. Tuliskan cara Mesh Mesh dengan surface segi- empat disimpan 3. Diketahui : Titik A(1,1); B(3,1); C(2,3) Ditanyakan : Skalakan sebesar (3,3) titik tersebut dengan menggunakan titik pusat (2,2)

80 14.3 Penutup Sebagai evaluasi akhir semester memberikan masukan kepada pegampu porsi materi yang sudah dan belum dikuasai oleh mahasiswa Soal seperti pada bagian penyajian Petunjuk Penilaian Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian didasarkan pada ukuran kuantitatif kepada dosen pengampu: Kurang dari 50 poit : D 51 sd 65 poin: C 66 sd 75 poin : B 76 keatas poin : A

81 Daftar Pustaka Hearn, D dan Baker M.P., 1997, Computer Graphics, Prentice Hall, Inc., New Jersey. Shirley P., Ashikhmin M., dan Marschner S., 2009, Fundamentals of Computer Graphics, A K Peters Asthana, R.G.S. dan Sinha, N.K., 2001, Computer Graphics For Scientists and Engineers, New Age International Ltd., New Delhi. Ammeraal L., dan Kang Z., 2007, Computer Graphics for Java Programmer, 2 nd Edition, Wiley,