Download - Dasar teori dan algoritma grafika komputer
![Page 1: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/1.jpg)
Ihr Logo
Dasar teori dan algoritma grafika komputer
![Page 2: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/2.jpg)
Your LogoHere comes your footer Page 2
Sub Pokok Bahasan
Geometri Dasar
Geometri Lanjut
Geometri Dua Dimensi
![Page 3: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/3.jpg)
Ihr Logo
Geometri Dasar
![Page 4: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/4.jpg)
Your Logo
Geometri Dasar
Sistem koordinat
Kuadran garis
Gradien
Algoritma garis DDA
Algoritma garis Bresenham
Algoritma lingkaran Bresenham
Grafika Komputer Page 4
![Page 5: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/5.jpg)
Your Logo
SISTEM KOORDINATLailatul Husniah, S.ST
Grafika Komputer Page 5
![Page 6: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/6.jpg)
Your Logo
Sistem Koordinat
Pada komputer grafik ada 3 macam sistem koordinat yang harus di perhatikan :
Koordinat nyata
Koordinat sistem (koordinat cartesian)
Koordinat tampilan / layar
Grafika Komputer Page 6
![Page 7: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/7.jpg)
Your Logo
Koordinat nyata (World Koordinat)
Adalah koordinat yang pada saat itu objek yang bersangkutan berada.
Ex: koordinat sebuah kursi tergantung dari letak kursi itu ada dimana & bagaimana letaknya.
Dalam implementasinya koordinat nyata bisa dikatakan sebagai WINDOW yaitu area di dunia nyata yang menunjukkan bagian yang dilihat oleh pemirsa.
Grafika Komputer Page 7
![Page 8: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/8.jpg)
Your Logo
Koordinat sistem (koordinat cartesian)
Setiap titik yang digambar dengan teknik point-plotting lokasinya ditentukan berdasarkan sistem koordinat cartesian.
Setiap titik ditentukan lokasinya melalui pasangan nilai x dan y.
Dimana nilai koordinat x bertambah positif dari kiri ke kanan dan nilai y bertambah positif dari bawah ke atas.
Grafika Komputer Page 8
![Page 9: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/9.jpg)
Your Logo
Koordinat sistem (koordinat cartesian)
Grafika Komputer Page 9
![Page 10: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/10.jpg)
Your Logo
Koordinat tampilan/layar Arah sumbu koordinat kartesian berkebalikan dengan
yang digunakan di layar komputer
Pada layar komputer sumbu x bertambah positif ke kanan dan sumbu y bertambah positif ke bawah
Seperti pada gambar berikut jika sebuah titik pada koordinat cartesian digambar ulang ke layar komputer maka secara visual lokasi titik tersebut akan berubah.
Grafika Komputer Page 10
![Page 11: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/11.jpg)
Your Logo
Koordinat tampilan/layar
Grafika Komputer Page 11
![Page 12: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/12.jpg)
Your Logo
Dalam implementasinya koordinat tampilan/layar bisa dikatakan sebagai VIEWPORT yaitu area di layar monitor yang menunjukkan dimana WINDOW akan ditampilkan
Grafika Komputer Page 12
Koordinat tampilan/layar
![Page 13: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/13.jpg)
Your LogoGrafika Komputer Page 13
Koordinat tampilan/layar
![Page 14: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/14.jpg)
Your Logo
Koordinat tampilan/layar
Grafika Komputer Page 14
Untuk memetakan sebuah titik di window ke titik di viewport digunakan rumus :
![Page 15: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/15.jpg)
Your Logo
KUADRAN GARISLailatul Husniah, S.ST
Grafika Komputer Page 15
![Page 16: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/16.jpg)
Your Logo
Garis
Garis merupakan salah satu bentuk dasar dari gambar Sebuah garis dalam grafika disebut segment Garis dibuat dengan menentukan posisi titik diantara titik
awal dan akhir dari suatu garis, yaitu (x1,y1) dan (x2,y2)
Here comes your footer Page 16
![Page 17: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/17.jpg)
Your Logo
Kuadran Garis Berdasarkan arah garis maka sebuah garis dapat di salah satu area
(kuadran). Tanda panah pada arah garis menunjukkan lokasi (x2,y2)
Here comes your footer Page 17
![Page 18: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/18.jpg)
Your Logo
Kuadran Garis
Here comes your footer Page 18
Pada gambar diatas, garis 1 terletak pada kuadran I, garis 2 di kuadran III, garis 3 di kuadran IV, garis 4 di kuadran II
Jadi kuadran garis tidak berhubungan dengan nilai negatif maupun positif tetapi menyatakan arah garis
![Page 19: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/19.jpg)
Your Logo
Contoh
Here comes your footer Page 19
![Page 20: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/20.jpg)
Your Logo
GRADIEN
Grafika Komputer Page 20
![Page 21: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/21.jpg)
Your Logo
Gradien
Nilai kecenderungan sebuah garis, disimbolkan dengan huruf m dan dihitung dengan rumus
Here comes your footer Page 21
![Page 22: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/22.jpg)
Your Logo
ALGORITMA GARIS DDA
Grafika Komputer Page 22
![Page 23: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/23.jpg)
Your Logo
Algoritma Garis DDA (Digital Differential Analyzer) Merupakan salah satu algoritma menggambar garis yang
sederhana Bentuk garis :
Cenderung mendatar
Cenderung tegak
Miring 450
Here comes your footer Page 23
Gradien bernilai 0 < m < 1 Pixel bertambah 1 pada sumbu x dan bertambah sebesar m pixel pada sumbu y
Gradien bernilai m > 1 Pixel bertambah 1 pada sumbu y dan bertambah sebesar 1/m pixel pada sumbu x
Gradien bernilai m = 1 Pixel bertambah 1 pada sumbu x dan bertambah sebesar 1 pixel pada sumbu y
![Page 24: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/24.jpg)
Your Logo
Algoritma DDAPrinsip algoritma ini adalah mengambil nilai integer terdekat dengan jalur garis berdasarkan atas sebuah titik yang telah ditentukan sebelumnya(titik awal garis)
Algoritma pembentukan garis DDA:1. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis.2. Tentukan salah satu titik sebagai awal(x0,y0) dan titik akhir(x1,y1).3. Hitung dx=x1 x0, dan dy= y1 y04. Tentukan langkah, yaitu dengan cara jarak maksimum jumlah penambahan
nilai x maupun nilai y, dengan cara:1.Bila nilai absolut dari dx lebih besar dari absolut dy, maka langkah= absolut dari dx.
2.Bila tidak maka langkah= absolutdari dy
5. Hitung penambahan koordinat pixel yaitu x_increment=dx/langkah, dan y_increment=dy/langkah
6. Koordinat selanjutnya (x+x_increment, y+y_increment)7. Posisi pixel pada layar ditentukan dengan pembulatan nilai koordinat tersebut8. Ulangi nomor 6 dan 7 untuk menentukan posisi pixel selanjutnya,sampai x=x1
dan y=y1
Here comes your footer Page 24
![Page 25: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/25.jpg)
Your Logo
Kelemahan algoritma DDA :
Hanya dapat digunakan untuk nilai x1 < x2 dan y1 < y2 atau garis yang berada di kuadran I
Here comes your footer Page 25
![Page 26: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/26.jpg)
Your Logo
ALGORITMA GARIS BRESENHAM
Grafika Komputer Page 26
![Page 27: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/27.jpg)
Your Logo
Algoritma Garis Bresenham
Dikembangkan oleh Bresenham
Berdasarkan selisih antara garis yang diinginkan terhadap setengah ukuran dari pixel yang sedang digunakan
Here comes your footer Page 27
![Page 28: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/28.jpg)
Your Logo
Algoritma Bresenham untuk dx > dy
Here comes your footer Page 28
![Page 29: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/29.jpg)
Your Logo
Algoritma Bresenham untuk dx < dy
Here comes your footer Page 29
![Page 30: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/30.jpg)
Your Logo
Contoh
Hitung lokasi 5 titik pertama yang dilewati oleh garis (10,30) – (256,147) menggunakan algoritma bresenham!
Gambarkan hasil perhitungannya!
Here comes your footer Page 30
![Page 31: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/31.jpg)
Your Logo
Contoh gunakan algoritma untuk dx > dy
Garis (10,30) – (256,147) dx = (x2 – x1) = (256 – 10) = 246 dy = (y2 – y1) = (147 – 30) = 117 e = 2 * dy – dx = 2 * 117 – 246 = -12 d1 = 2 * dy = 2 * 117 = 234 d2 = 2 * (dy – dx) = 2 * (117 – 246) = -258 x = 10 ; y = 30
e = -12 e < 0 e = e + d1 = -12 + 234 = 222 x = x + 1 = 11 ; y = y = 30 e = 222 e >= 0 e = e + d2 = 222 + -258 = -36 x = x + 1 = 12; y = y + 1 = 31
Here comes your footer Page 31
![Page 32: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/32.jpg)
Your Logo
Contoh
e = -36 e < 0 e = e + d1 = -36 + 234 = 198x = x + 1 = 13; y =y =31
e = 198 e >= 0 e =e + d2 = 198 + -258 = -60x = x + 1 =14; y =y +1 = 32
Here comes your footer Page 32
![Page 33: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/33.jpg)
Your Logo
ALGORITMA LINGKARAN BRESENHAM
Lailatul Husniah, S.ST
Grafika Komputer Page 33
![Page 34: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/34.jpg)
Your Logo
Lingkaran Untuk menggambar sebuah lingkaran hanya diperlukan menggambar
titik-titik pada oktan pertama saja, sedangkan titik-titik pada kuadran lain dapat diperoleh dengan mencerminkan titik-titik pada oktan pertama.
Dari gambar dibawah ini titik pada oktan pertama dapat dicerminkan melalui sumbu Y = X untuk memperoleh titik-titik pada oktan kedua dari kuadran pertama.
Titik-titik pada kuadran pertama dicerminkan melalui sumbu X = 0 untuk memperoleh titik-titik pada kuadran kedua.
Gambar berikut menunjukkan menggambar lingkaran dengan merefleksikan oktan pertama
Grafika Komputer Page 34
![Page 35: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/35.jpg)
Your Logo
Lingkaran
Grafika Komputer Page 35
![Page 36: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/36.jpg)
Your Logo
Lingkaran
Grafika Komputer Page 36
![Page 37: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/37.jpg)
Your Logo
Algoritma Lingkaran Bresenham
Here comes your footer Page 37
![Page 38: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/38.jpg)
Your Logo
Contoh Jika diketahui R = 5 dan titik terakhir yang dipilih adalah
(0,5) hitung koordinat titik berikutnya yang harus dipilih Jawab
Here comes your footer Page 38
![Page 39: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/39.jpg)
Your Logo
Latihan Soal
Hitung 3 titik pertama yang dilewati garis A dengan koordinat (100,150)-(10,30) menggunakan algoritma garis Bresenham dan gambarkan hasilnya.
Jika diketahui R=10 dan titik terakhir yang dipilih adalah (10,20), hitung koordinat titik berikutnya yang harus dipilih.
Here comes your footer Page 39
![Page 40: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/40.jpg)
Ihr Logo
Geometri Lanjut
![Page 41: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/41.jpg)
Your Logo
Geometri Lanjut
Polygon
Algoritma flood fill
Grafika Komputer Page 41
![Page 42: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/42.jpg)
Your Logo
POLYGON
Here comes your footer Page 42
![Page 43: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/43.jpg)
Your Logo
Polygon Polygon adalah bentuk yang
disusun dari serangkaian garis Titik sudut dari polygon disebut
vertex Garis penyusun polygon disebut
edge Sebuah polygon selalu mempunyai
properti dasar : jumlah vertex koordinat vertex data lokasi tiap vertex
Here comes your footer Page 43
. Polygon digambar dengan menggambar masing-masing edge dengan setiap edge merupakan pasangan dari vertexi – vertex i+1, kecuali untuk edge terakhir merupakan pasangan dari vertexn – vertex1
![Page 44: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/44.jpg)
Your Logo
Operasi-operasi pada polygon Menginisialisasi polygon
inisialisasi terhadap polygon perlu dilakukan untuk mengatur agar field vertnum berisi 0.
Menyisipkan vertex menyimpan informasi tentang vertex dan menyesuaikan informasi tentang jumlah vertex dengan menambahkan satu ke vertnum.
Menggambar polygon mengunjungi vertex satu per satu dan menggambar edge dengan koordinat (vertexi.x, vertexi.y) – (vertex i+1.x – vertex i+1.y) dari vertex nomor satu sampai vertnum – 1. Khusus untuk edge terakhir mempunyai koordinat (vertexvertnum.x , vertexvertnum.y) – (vertex1.x – vertex1.y).
Mewarnai polygon Mengisi area yang dibatasi oleh edge polygon dengan warna tertentu.
Here comes your footer Page 44
![Page 45: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/45.jpg)
Your Logo
Algoritma menggambar polygon
Here comes your footer Page 45
![Page 46: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/46.jpg)
Your Logo
ALGORITMA FLOOD FILL
Here comes your footer Page 46
![Page 47: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/47.jpg)
Your Logo
Algoritma Flood Fill (Seed Fill) Merupakan algoritma untuk mengisi area di dalam sebuah polygon.
Bekerja dengan cara : Pemakai menentukan warna polygon serta lokasi titik yang menjadi titik awal. Kemudian algoritma akan memeriksa titik-titik tetangga. Bila warna titik tetangga tidak sama dengan warna isi polygon maka titik
tersebut akan diubah warnanya. Proses tersebut dilanjutkan sampai seluruh titik yang berada di dalam polygon
selesai diproses. Penentuan titik tetangga dapat menggunakan metode 4 koneksi atau 8
koneksi seperti berikut :
Here comes your footer Page 47
![Page 48: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/48.jpg)
Your Logo
Algoritma Flood Fill (Seed Fill)
Ketepatan algoritma Flood Fill ditentukan oleh titik awal (seed point) dan apakah polygon yang diwarnai merupakan polygon tertutup.
Apabila polygon tidak tertutup, meskipun hanya 1 titik yang terbuka maka pengisian akan melebar ke area di luar polygon.
Here comes your footer Page 48
![Page 49: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/49.jpg)
Your Logo
Algoritma Flood Fill (Seed Fill)
Here comes your footer Page 49
![Page 50: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/50.jpg)
Ihr Logo
Geometri Dua Dimensi
![Page 51: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/51.jpg)
Your Logo
Geometri Dua Dimensi
Transformasi Affine 2D Translasi Skala Rotasi Transformasi homogeneous Clipping dua dimensi:
Ketampakan garisAlgoritma Cohen-SutherlandAlgoritma Sutherlan-Hodgeman
Grafika Komputer Page 51
![Page 52: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/52.jpg)
Your Logo
Transformasi
Transformasi merupakan metode untuk mengubah lokasi titik.
Bila transformasi dikenakan terhadap sekumpulan titik yang membentuk sebuah benda maka benda tersebut akan mengalami perubahan.
Transformasi dasar : translation (translasi) scaling (skala) rotation (putar)Reflection (refleksi)
Here comes your footer Page 52
![Page 53: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/53.jpg)
Your Logo
Translasi
Translasi adalah transformasi yang menghasilkan lokasi baru dari sebuah objek sejauh jarak pergeseran tr = (trx,try).
Untuk menggeser benda sejauh tr maka setiap titik dari objek akan digeser sejauh trx dalam sumbu x dan try dalam sumbu y.
Here comes your footer Page 53
![Page 54: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/54.jpg)
Your Logo
Contoh Jika diketahui titik L (1,-1) dan vektor translasi (3,2)
maka hitung lokasi titik L yang baru setelah dilakukan translasi.
Jawab : Lx = 1 dan Ly = -1 dan trx=3 try=2 maka (Qx,Qy) = (Lx + trx , Ly + try) = (1+3, -1+2) = (4,1) Jadi, lokasi titik L yang baru adalah (4,1).
Here comes your footer Page 54
![Page 55: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/55.jpg)
Your Logo
Contoh
Here comes your footer Page 55
![Page 56: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/56.jpg)
Your Logo
Skala Berbeda dengan transformasi geser yang tidak
mengubah bentuk objek, transformasi skala akan mengubah bentuk objek sebesar skala Sx dan Sy sehingga :
Here comes your footer Page 56
![Page 57: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/57.jpg)
Your Logo
Contoh
Gambar berikut menunjukkan suatu objek setelah mengalami transformasi skala dengan Sx=2 Sy=2
Here comes your footer Page 57
![Page 58: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/58.jpg)
Your Logo
Rotasi
Here comes your footer Page 58
Pemutaran objek dilakukan dengan menggeser semua titik P sejauh sudut q dengan tr = 0 dan titik pusat pemutaran berada di titik (0,0), sehingga :
![Page 59: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/59.jpg)
Your Logo
Contoh
Dari gambar diperoleh koordinat titik sudut dari objek tersebut adalah P1=(1,1), P2=(3,1), P3=(3,2), P4 = (1,2). Objek diputar 60° dengan titik pusat (0,0)
Here comes your footer Page 59
Objek berikut diputar sebesar 60°
![Page 60: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/60.jpg)
Your Logo
Contoh
Here comes your footer Page 60
Dengan cara yang sama diperoleh:
![Page 61: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/61.jpg)
Your Logo
Contoh
Here comes your footer Page 61
![Page 62: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/62.jpg)
Your Logo
Contoh
Here comes your footer Page 62
![Page 63: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/63.jpg)
Your Logo
Skala Atau Rotasi Menggunakan Sembarang Titik Pusat Seperti telah dijelaskan sebelumnya, skala dan rotasi
menggunakan titik (0,0) sebagai titik pusat transformasi.
Agar dapat menggunakan sembarang titik pusat (Xt,Yt) sebagai titik pusat maka transformasi dilakukan dengan urutan :
Translasi (-Xt, -Yt) Rotasi atau Skala Translasi (Xt,Yt)
Here comes your footer Page 63
![Page 64: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/64.jpg)
Your Logo
Contoh
Dengan menggunakan objek persegi panjang sebelumnya, putar objek sebesar 60° dengan titik pusat (3,2)
Jawab:
Karena objek diputar pada titik pusat (3,2) maka sebelum dilakukan pemutaran objek harus ditranslasikan sebesar (-3,-2), setelah itu objek diputar sebesar 60° dan kemudian hasil pemutaran ditranslasikan sebesar (3,2).
Here comes your footer Page 64
![Page 65: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/65.jpg)
Your Logo
Contoh
Here comes your footer Page 65
![Page 66: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/66.jpg)
Your Logo
Contoh
Here comes your footer Page 66
![Page 67: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/67.jpg)
Your Logo
Transformasi Homogeneous
Transformasi yang sudah dibahas sebelumnya baik di titik pusat (0,0) maupun di sembarang titik merupakan transformasi linear
Transformasi juga dapat dilakukan dengan menggunakan matriks transformasi yang menggabungkan transformasi translasi, penskalaan dan rotasi ke dalam satu model matriks atau sering disebut juga sebagai transformasi homogeneous
Isi dari matriks transformasi bergantung pada jenis transformasi yang dilakukan
Here comes your footer Page 67
![Page 68: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/68.jpg)
Your Logo
Transformasi Homogeneous
Transformasi dilakukan dengan menggunakan rumus:
Here comes your footer Page 68
100
0cossin
0sincos
M
![Page 69: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/69.jpg)
Your Logo
Clipping 2 Dimensi
Tidak semua garis harus digambar di area gambar karena garis-garis yang tidak terlihat di area gambar seharusnya tidak perlu digambar.
Metode untuk menentukan bagian garis yang perlu digambar atau tidak perlu digambar disebut clipping.
Clipping juga dapat diartikan sebagai suatu tindakan untuk memotong suatu objek dengan bentuk tertentu.
Here comes your footer Page 69
![Page 70: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/70.jpg)
Your Logo
Ketampakan Garis (Line Visibility)
Posisi ketampakan garis terhadap area gambar (viewport) :Garis yang terlihat seluruhnya (fully visible): garis tidak perlu dipotong
Garis yang hanya terlihat sebagian (partially visible): garis yang perlu dipotong
Garis yang tidak terlihat sama sekali (fully invisible): garis tidak perlu digambar
Here comes your footer Page 70
![Page 71: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/71.jpg)
Your Logo
Algoritma Cohen-sutherland Merupakan metode untuk menentukan apakah sebuah
garis perlu dipotong atau tidak dan menentukan titik potong garis
Area gambar didefinisikan sebagai sebuah area segiempat yang dibatasi oleh xmin dan xmax,ymin dan ymax.
Here comes your footer Page 71
![Page 72: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/72.jpg)
Your Logo
Algoritma Cohen-sutherland Setiap ujung garis diberi kode 4 bit dan disebut sebagai
region code. Region code ditentukan berdasarkan area dimana ujung garis tersebut berada
Susunan region code :
Here comes your footer Page 72
![Page 73: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/73.jpg)
Your Logo
Algoritma Cohen-sutherland
Here comes your footer Page 73
![Page 74: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/74.jpg)
Your Logo
Contoh Jika diketahui area gambar
ditentukan dengan xmin=1, ymin = 1 dan xmax=4, ymax=5 dan 2 garis :
P (–1, –2) – (5,6)
Q (–1,5) – (6,7)
Here comes your footer Page 74
Maka untuk menentukan region code dari masing-masing garis tersebut adalah :
![Page 75: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/75.jpg)
Your Logo
Contoh
Here comes your footer Page 75
Karena region code kedua ujung garis tidak 0000 maka garis P kemungkinan bersifat partialy invisible dan perlu dipotong.
![Page 76: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/76.jpg)
Your Logo
Contoh
Here comes your footer Page 76
Karena region code kedua ujung garis tidak 0000 maka garis Q kemungkinan bersifat partialy invisible dan perlu dipotong
Ujung Garis Q (-1,5)
Ujung Garis Q (6,7)
![Page 77: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/77.jpg)
Your Logo
Menentukan Titik Potong Langkah berikutnya menentukan lokasi titik potong antara garis tersebut dengan batas area gambar.
Titik potong dihitung berdasarkan bit=1 dari region code dengan menggunakan panduan tabel berikut :
dengan xp1,xp2,yp1, dan yp2 dihitung menggunakan persamaan berikut ini :
Here comes your footer Page 77
![Page 78: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/78.jpg)
Your Logo
Persamaan
Here comes your footer Page 78
![Page 79: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/79.jpg)
Your Logo
Menentukan Titik Potong Bergantung pada lokasi ujung garis maka akan diperoleh 2,3,atau 4 titik potong seperti gambar berikut:
Bila ditemukan titik potong lebih dari 2 pada 1 ujung maka pilih titik potong yang ada di dalam area gambar.
Here comes your footer Page 79
![Page 80: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/80.jpg)
Your Logo
Contoh
Here comes your footer Page 80
![Page 81: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/81.jpg)
Your Logo
Contoh
Here comes your footer Page 81
![Page 82: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/82.jpg)
Your Logo
Contoh
Here comes your footer Page 82
![Page 83: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/83.jpg)
Your Logo
Ada 4 titik potong pada garis P yaitu (1, 0.67), (1.25,1), (4, 4.7), (4.25, 5).
Pilih titik potong yang terdapat dalam viewport yaitu (1.25,1) dan (4, 4.7).
Here comes your footer Page 83
![Page 84: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/84.jpg)
Your Logo
Latihan Soal
Jika diketahui area gambar ditentukan dengan xmin=0, ymin = 0 dan xmax=9, ymax=9 dan 3 garis :
A (-2, -1) – (3, 9)
B (-1,-3) – (2,8)
C(-4, -2) – (1, 5)
Tentukan region code dan titik potong dari masing-masing garis.
Here comes your footer Page 84
![Page 85: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/85.jpg)
Your Logo
Latihan Soal
Jika diketahui area gambar ditentukan dengan xmin=0, ymin = 0 dan xmax=9, ymax=9 dan 3 garis :
A (0, -2) – (3, 9)
B (-1,-1) – (2,8)
C(-2, -1) – (0, 10)
Tentukan region code dan titik potong dari masing-masing garis
Here comes your footer Page 85
![Page 86: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/86.jpg)
Your Logo
Algoritma Sutherland-Hodgeman (SH)
Digunakan untuk kliping poligon
Idenya melakukan pemotongan terhadap batas demi batas window secara terpisah
Pemotongan terhadap suatu batas (dan perpanjangan batas itu) menghasilkan suatu poligon lain yang akan dipotongkan terhadap batas selanjutnya (dan perpanjangannya)
Here comes your footer Page 86
![Page 87: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/87.jpg)
Your Logo
Contoh Gambar berikut ini dimana suatu poligon dipotong terhadap suatu
window berbentuk persegi panjang
Pemotongan pertama dilakukan terhadap sisi kiri, kemudian kanan, bawah, dan terakhir atas.
Here comes your footer Page 87
![Page 88: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/88.jpg)
Your Logo
Cara pemotongan terhadap suatu garis batas (1) Algoritma SH memiliki aturan sbb, jika poligon dinyatakan oleh verteks-
verteks v1, v2, …..vn :
Sisi demi sisi diperiksa terhadap batas window mulai dari sisi v1v2, v2v3,….. vn-1vn dan vnv1, untuk mendapatkan verteks-verteks membentuk poligon baru hasil pemotongan tersebut . Pada tahap inisialisasi poligon hasil berisikan 0 verteks.
Bila suatu sisi vivi+1 berpotongan dengan batas window dengan vi berada di luar mengarah dan berada di dalam batas window maka dilakukan komputasi untuk mendapatkan titik perpotongannya yaitu vi’, dan verteks-verteks vi’ dan vi+1 dicatat sebagai verteks berikutnya di poligon hasil pemotongan.
Bila suatu sisi vivi+1 berpotongan dengan batas window dengan vi berada di dalam mengarah dan berada di luar batas window maka dilakukan komputasi untuk mendapatkan titik perpotongannya yaitu vi’, dan verteks dicatat sebagai verteks berikutnya di poligon hasil pemotongan
Here comes your footer Page 88
![Page 89: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/89.jpg)
Your Logo
Cara pemotongan terhadap suatu garis batas (2)
Here comes your footer Page 89
Bila suatu sisi vivi+1 tidak berpotongan dengan batas window dan berada di sebelah dalam batas window maka verteks vi+1 dicatat sebagai verteks berikutnya di poligon hasil pemotongan.
Bila suatu sisi vivi+1 tidak berpotongan dengan batas window dan berada di sebelah luar batas window maka tidak ada yang dicatat.
![Page 90: Dasar teori dan algoritma grafika komputer](https://reader033.vdocuments.pub/reader033/viewer/2022061514/56813b1f550346895da3d2b1/html5/thumbnails/90.jpg)
Your Logo
Contoh Beikut ini adalah contoh pemotongan poligon terhadap sisi kiri
window persegi empat
Poligon yang dihasilkan adalah dengan verteks-verteks v1’v2v3v3’
Here comes your footer Page 90
Pada pemeriksaan v1v2 diperoleh v1’, dan v2
Pada pemeriksaan v2v3 diperoleh v3
Pada pemeriksaan v3v4
diperoleh v3’Pada pemeriksaan v4v1 tidak ada verteks baru