Dasar teori dan algoritma grafika komputer

1. Dasar teori dan algoritma grafika komputer

2. Sub Pokok Bahasan • Geometri Dasar • Geometri Lanjut • Geometri Dua Dimensi Here comes your footer  Page 2

3. Geometri Dasar

4. Geometri Dasar • Sistem koordinat • Kuadran garis • Gradien • Algoritma garis DDA • Algoritma garis Bresenham • Algoritma lingkaran Bresenham Grafika Komputer  Page 4

5. Lailatul Husniah, S.ST Sistemkoordinat Grafika Komputer  Page 5

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

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

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

9. Koordinat sistem (koordinat cartesian) Grafika Komputer  Page 9

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

11. Koordinat tampilan/layar Grafika Komputer  Page 11

12. Koordinat tampilan/layar • Dalam implementasinya koordinat tampilan/layar bisa dikatakan sebagai VIEWPORT yaitu area di layar monitor yang menunjukkan dimana WINDOW akan ditampilkan Grafika Komputer  Page 12

13. Koordinat tampilan/layar Grafika Komputer  Page 13

14. Koordinat tampilan/layar • Untukmemetakansebuahtitikdi window ketitikdi viewport digunakanrumus : Grafika Komputer  Page 14

15. Lailatul Husniah, S.ST Kuadrangaris Grafika Komputer  Page 15

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

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

18. Kuadran Garis • 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 Here comes your footer  Page 18

19. Contoh Here comes your footer  Page 19

20. gradien Grafika Komputer  Page 20

21. Gradien • Nilai kecenderungan sebuah garis, disimbolkan dengan huruf mdan dihitung dengan rumus Here comes your footer  Page 21

22. Algoritma garis DDA Grafika Komputer  Page 22

23. Algoritma Garis DDA (Digital Differential Analyzer) • Merupakan salah satu algoritma menggambar garis yang sederhana • Bentuk garis : • Cenderung mendatar • Cenderung tegak • Miring 450 • 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 Here comes your footer  Page 23

24. Algoritma DDA Prinsip 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: • Tentukan dua titik yang akan dihubungkan dalam pembentukan garis. • Tentukan salah satu titik sebagai awal(x0,y0) dan titik akhir(x1,y1). • Hitung dx=x1­x0, dan dy= y1­y0 • Tentukan langkah, yaitu dengan cara jarak maksimum jumlah penambahan  nilai x maupun nilai y, dengan cara: • Bila nilai absolut dari dx lebih besar dari absolut dy, maka langkah= absolut dari dx. • Bila tidak maka langkah= absolutdari dy • Hitung penambahan koordinat pixel yaitu x_increment=dx/langkah, dan y_increment=dy/langkah • Koordinat selanjutnya (x+x_increment, y+y_increment) • Posisi pixel pada layar ditentukan dengan pembulatan nilai koordinat tersebut • Ulangi nomor 6 dan 7 untuk menentukan posisi pixel selanjutnya,sampai x=x1 dan y=y1 Here comes your footer  Page 24

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

26. AlgoritmagarisBresenham Grafika Komputer  Page 26

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

28. Algoritma Bresenham untuk dx > dy Here comes your footer  Page 28

29. Algoritma Bresenham untuk dx < dy Here comes your footer  Page 29

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

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

32. Contoh e = -36  e < 0 e = e + d1 = -36 + 234 = 198 x = x + 1 = 13; y =y =31 e = 198  e >= 0 e =e + d2 = 198 + -258 = -60 x = x + 1 =14; y =y +1 = 32 Here comes your footer  Page 32

33. Lailatul Husniah, S.ST AlgoritmalingkaranBresenham Grafika Komputer  Page 33

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

35. Lingkaran Grafika Komputer  Page 35

36. Lingkaran Grafika Komputer  Page 36

37. Algoritma Lingkaran Bresenham Here comes your footer  Page 37

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

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

40. Geometri Lanjut

41. Geometri Lanjut • Polygon • Algoritma flood fill Grafika Komputer  Page 41

42. Polygon Here comes your footer  Page 42

43. 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 • Polygon digambardenganmenggambarmasing-masing edge dengansetiap edge merupakanpasangandarivertexi – vertex i+1, kecualiuntuk edge terakhirmerupakanpasangandarivertexn – vertex1 . Here comes your footer  Page 43

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

45. Algoritma menggambar polygon Here comes your footer  Page 45

46. Algoritma flood fill Here comes your footer  Page 46

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

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

49. Algoritma Flood Fill (Seed Fill) Here comes your footer  Page 49

50. Geometri Dua Dimensi