Ihr Logo Dasar teori dan algoritma grafika komputer.

Presentasi berjudul: "Ihr Logo Dasar teori dan algoritma grafika komputer."— Transcript presentasi:

1 Ihr Logo Dasar teori dan algoritma grafika komputer

2 Your Logo Here comes your footer  Page 2 Sub Pokok Bahasan  Geometri Dasar  Geometri Lanjut  Geometri Dua Dimensi

3 Ihr Logo Geometri Dasar

4 Your Logo Geometri Dasar  Sistem koordinat  Kuadran garis  Gradien  Algoritma garis DDA  Algoritma garis Bresenham  Algoritma lingkaran Bresenham Grafika Komputer  Page 4

5 Your Logo SISTEM KOORDINAT Lailatul Husniah, S.ST Grafika Komputer  Page 5

6 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

7 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

8 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

9 Your Logo Koordinat sistem (koordinat cartesian) Grafika Komputer  Page 9

10 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

11 Your Logo Koordinat tampilan/layar Grafika Komputer  Page 11

12 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

13 Your Logo Grafika Komputer  Page 13 Koordinat tampilan/layar

14 Your Logo Koordinat tampilan/layar Grafika Komputer  Page 14  Untuk memetakan sebuah titik di window ke titik di viewport digunakan rumus :

15 Your Logo KUADRAN GARIS Lailatul Husniah, S.ST Grafika Komputer  Page 15

16 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

17 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

18 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

19 Your Logo Contoh Here comes your footer  Page 19

20 Your Logo GRADIEN Grafika Komputer  Page 20

21 Your Logo Gradien  Nilai kecenderungan sebuah garis, disimbolkan dengan huruf m dan dihitung dengan rumus Here comes your footer  Page 21

22 Your Logo ALGORITMA GARIS DDA Grafika Komputer  Page 22

23 Your Logo Algoritma Garis DDA (Digital Differential Analyzer)  Merupakan salah satu algoritma menggambar garis yang sederhana  Bentuk garis :  Cenderung mendatar  Cenderung tegak  Miring 45 0 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

24 Your Logo 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: 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­y0 4. 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 tersebut 8. Ulangi nomor 6 dan 7 untuk menentukan posisi pixel selanjutnya,sampai x=x1 dan y=y1 Here comes your footer  Page 24

25 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

26 Your Logo ALGORITMA GARIS BRESENHAM Grafika Komputer  Page 26

27 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

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

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

30 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

31 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

32 Your Logo 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 Your Logo ALGORITMA LINGKARAN BRESENHAM Lailatul Husniah, S.ST Grafika Komputer  Page 33

34 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

35 Your Logo Lingkaran Grafika Komputer  Page 35

36 Your Logo Lingkaran Grafika Komputer  Page 36

37 Your Logo Algoritma Lingkaran Bresenham Here comes your footer  Page 37

38 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

39 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

40 Ihr Logo Geometri Lanjut

41 Your Logo Geometri Lanjut  Polygon  Algoritma flood fill Grafika Komputer  Page 41

42 Your Logo POLYGON Here comes your footer  Page 42

43 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 vertex i – vertex i+1, kecuali untuk edge terakhir merupakan pasangan dari vertex n – vertex 1

44 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 (vertex i.x, vertex i.y) – (vertex i+1.x – vertex i+1.y) dari vertex nomor satu sampai vertnum – 1. Khusus untuk edge terakhir mempunyai koordinat (vertex vertnum.x, vertex vertnum.y) – (vertex 1.x – vertex 1.y).  Mewarnai polygon Mengisi area yang dibatasi oleh edge polygon dengan warna tertentu. Here comes your footer  Page 44

45 Your Logo Algoritma menggambar polygon Here comes your footer  Page 45

46 Your Logo ALGORITMA FLOOD FILL Here comes your footer  Page 46

47 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

48 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

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

50 Ihr Logo Geometri Dua Dimensi

51 Your Logo Geometri Dua Dimensi  Transformasi Affine 2D  Translasi  Skala  Rotasi  Transformasi homogeneous  Clipping dua dimensi:  Ketampakan garis  Algoritma Cohen-Sutherland  Algoritma Sutherlan-Hodgeman Grafika Komputer  Page 51

52 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

53 Your Logo Translasi  Translasi adalah transformasi yang menghasilkan lokasi baru dari sebuah objek sejauh jarak pergeseran tr = (tr x,tr y ).  Untuk menggeser benda sejauh tr maka setiap titik dari objek akan digeser sejauh tr x dalam sumbu x dan tr y dalam sumbu y. Here comes your footer  Page 53

54 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

55 Your Logo Contoh Here comes your footer  Page 55

56 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

57 Your Logo Contoh  Gambar berikut menunjukkan suatu objek setelah mengalami transformasi skala dengan S x =2 S y =2 Here comes your footer  Page 57

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

59 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°

60 Your Logo Contoh Here comes your footer  Page 60 Dengan cara yang sama diperoleh:

61 Your Logo Contoh Here comes your footer  Page 61

62 Your Logo Contoh Here comes your footer  Page 62

63 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 (X t,Y t ) sebagai titik pusat maka transformasi dilakukan dengan urutan :  Translasi (-X t, -Y t )  Rotasi atau Skala  Translasi (X t,Y t ) Here comes your footer  Page 63

64 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

65 Your Logo Contoh Here comes your footer  Page 65

66 Your Logo Contoh Here comes your footer  Page 66

67 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

68 Your Logo Transformasi Homogeneous Transformasi dilakukan dengan menggunakan rumus: Here comes your footer  Page 68

69 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

70 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

71 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

72 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

73 Your Logo Algoritma Cohen-sutherland Here comes your footer  Page 73

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

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

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

77 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

78 Your Logo Persamaan Here comes your footer  Page 78

79 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

80 Your Logo Contoh Here comes your footer  Page 80

81 Your Logo Contoh Here comes your footer  Page 81

82 Your Logo Contoh Here comes your footer  Page 82

83 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

84 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

85 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

86 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

87 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

88 Your Logo Cara pemotongan terhadap suatu garis batas (1)  Algoritma SH memiliki aturan sbb, jika poligon dinyatakan oleh verteks-verteks v 1, v 2, …..v n :  Sisi demi sisi diperiksa terhadap batas window mulai dari sisi v 1 v 2, v 2 v 3,….. v n-1 v n dan v n v 1, untuk mendapatkan verteks-verteks membentuk poligon baru hasil pemotongan tersebut. Pada tahap inisialisasi poligon hasil berisikan 0 verteks.  Bila suatu sisi v i v i+1 berpotongan dengan batas window dengan v i berada di luar mengarah dan berada di dalam batas window maka dilakukan komputasi untuk mendapatkan titik perpotongannya yaitu v i ’, dan verteks-verteks v i ’ dan v i+1 dicatat sebagai verteks berikutnya di poligon hasil pemotongan.  Bila suatu sisi v i v i+1 berpotongan dengan batas window dengan v i berada di dalam mengarah dan berada di luar batas window maka dilakukan komputasi untuk mendapatkan titik perpotongannya yaitu v i ’, dan verteks dicatat sebagai verteks berikutnya di poligon hasil pemotongan Here comes your footer  Page 88

89 Your Logo Cara pemotongan terhadap suatu garis batas (2) Here comes your footer  Page 89  Bila suatu sisi v i v i+1 tidak berpotongan dengan batas window dan berada di sebelah dalam batas window maka verteks v i+1 dicatat sebagai verteks berikutnya di poligon hasil pemotongan.  Bila suatu sisi v i v i+1 tidak berpotongan dengan batas window dan berada di sebelah luar batas window maka tidak ada yang dicatat.

90 Your Logo Contoh  Beikut ini adalah contoh pemotongan poligon terhadap sisi kiri window persegi empat  Poligon yang dihasilkan adalah dengan verteks-verteks v 1 ’v 2 v 3 v 3 ’ Here comes your footer  Page 90 Pada pemeriksaan v 1 v 2 diperoleh v 1 ’, dan v 2 Pada pemeriksaan v 2 v 3 diperoleh v 3 Pada pemeriksaan v 3 v 4 diperoleh v 3 ’ Pada pemeriksaan v 4 v 1 tidak ada verteks baru