Module Dasar Teori dan Algoritma Grafika Komputer

  

Dasar teori dan algoritma

grafika komputer

Sub Pokok Bahasan

   Geometri Dasar

   Geometri Lanjut

   Geometri Dua Dimensi

  

Geometri Dasar

Geometri Dasar

   Sistem koordinat

   Kuadran garis

   Gradien

   Algoritma garis DDA

   Algoritma garis Bresenham

   Algoritma lingkaran Bresenham

  Lailatul Husniah, S.ST

Sistem Koordinat

   Pada komputer grafik ada 3 macam sistem koordinat yang harus di perhatikan :

  

  Koordinat nyata

  

  Koordinat sistem (koordinat cartesian)

  

  Koordinat tampilan / layar

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.

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.

  

Koordinat sistem (koordinat cartesian)

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.

  Koordinat tampilan/layar

Koordinat tampilan/layar

  

  Dalam implementasinya koordinat tampilan/layar bisa dikatakan sebagai VIEWPORT yaitu area di layar monitor yang menunjukkan dimana WINDOW akan ditampilkan

  Koordinat tampilan/layar

Koordinat tampilan/layar

  

  Untuk memetakan sebuah titik di window ke titik di viewport digunakan rumus :

  Lailatul Husniah, S.ST

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)

Kuadran Garis

   Berdasarkan arah garis maka sebuah garis dapat di salah satu area (kuadran).

   Tanda panah pada arah garis menunjukkan lokasi (x2,y2)

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

  Contoh

  GRADIEN

Gradien

   Nilai kecenderungan sebuah garis, dan dihitung disimbolkan dengan huruf m dengan rumus

  

Algoritma Garis DDA (Digital Differential Analyzer)



  

Merupakan salah satu algoritma menggambar garis yang

sederhana 

  Bentuk garis : 

  Cenderung mendatar Gradien bernilai 0 < m < 1 Pixel bertambah 1 pada sumbu x dan bertambah sebesar m pixel pada sumbu y

  

  Cenderung tegak Gradien bernilai m > 1 Pixel bertambah 1 pada sumbu y dan bertambah sebesar 1/m pixel pada sumbu x

  

  Miring 45 Gradien bernilai m = 1 Pixel bertambah 1 pada sumbu x dan bertambah sebesar 1 pixel pada sumbu y

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

Kelemahan algoritma DDA :

  

  Hanya dapat digunakan untuk nilai x1 < x2 dan y1 < y2 atau garis yang berada di kuadran I

  

ALGORITMA GARIS

BRESENHAM

Algoritma Garis Bresenham

   Dikembangkan oleh Bresenham

  

Berdasarkan selisih antara garis yang

diinginkan terhadap setengah ukuran dari pixel yang sedang digunakan

  

Algoritma Bresenham untuk dx > dy

  

Algoritma Bresenham untuk dx < dy

Contoh

   Hitung lokasi 5 titik pertama yang dilewati oleh garis (10,30) – (256,147) menggunakan algoritma bresenham!

   Gambarkan hasil perhitungannya!

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

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

  Lailatul Husniah, S.ST

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

  Lingkaran

  Lingkaran

  Algoritma Lingkaran Bresenham

Contoh

  

  Jika diketahui R = 5 dan titik terakhir yang dipilih adalah (0,5) hitung koordinat titik berikutnya yang harus dipilih

  

  Jawab

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.

  

Geometri Lanjut

Geometri Lanjut

   Polygon

   Algoritma flood fill

  POLYGON

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 digambar dengan menggambar masing-masing edge dengan setiap . edge merupakan pasangan dari vertex – vertex , kecuali untuk edge _{i i+1} terakhir merupakan pasangan dari vertex – vertex _{n 1}

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 .x, vertex .y) – (vertex .x – vertex .y) dari vertex nomor satu _{i i i+1 i+1} sampai vertnum – 1. Khusus untuk edge terakhir mempunyai koordinat (vertex .x , vertex .y) – (vertex .x – vertex .y). _{vertnum vertnum 1 1}

   Mewarnai polygon Mengisi area yang dibatasi oleh edge polygon dengan warna tertentu.

  Algoritma menggambar polygon

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 :

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.

  Algoritma Flood Fill (Seed Fill)

  

Geometri Dua Dimensi

Geometri Dua Dimensi

   Transformasi Affine 2D

   Translasi

   Skala

   Rotasi

   Transformasi homogeneous

   Clipping dua dimensi:

  

  Ketampakan garis

  

  Algoritma Cohen-Sutherland

  

  Algoritma Sutherlan-Hodgeman

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)

Translasi

  

  Translasi adalah transformasi yang menghasilkan lokasi baru dari sebuah objek sejauh jarak pergeseran tr = ( tr tr x, y).

  

  Untuk menggeser benda sejauh tr maka setiap titik dari objek akan digeser sejauh tr

  tr x dalam sumbu x dan y dalam sumbu y.

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

  Contoh

Skala

  

  Berbeda dengan transformasi geser yang tidak mengubah bentuk objek, transformasi skala akan mengubah bentuk objek sebesar skala Sx dan Sy sehingga :

Contoh

  

  Gambar berikut menunjukkan suatu objek setelah mengalami transformasi skala dengan Sx=2 Sy=2

Rotasi

  

  Pemutaran objek dilakukan dengan menggeser semua titik P sejauh sudut q dengan tr = 0 dan titik pusat pemutaran berada di titik (0,0), sehingga :

Contoh

  

  Dari gambar diperoleh

   Objek berikut diputar

  koordinat titik sudut dari

  sebesar 60°

  objek tersebut adalah P1=(1,1), P2=(3,1), P3=(3,2), P4 = (1,2).

  Objek diputar 60° dengan titik pusat (0,0)

  Contoh

  Dengan cara yang sama diperoleh:

  Contoh

  Contoh

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)

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

  Contoh

  Contoh

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

Transformasi Homogeneous

  Transformasi dilakukan dengan menggunakan rumus:  ^{ } _ ^{   } _ ^{  }

  1 cos sin sin cos

      M

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.

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

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.

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 :

  Algoritma Cohen-sutherland

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) Maka untuk menentukan region code dari masing-masing garis tersebut adalah :

  Contoh

  Karena region code kedua ujung garis tidak 0000 maka garis P kemungkinan bersifat partialy invisible dan perlu dipotong.

Contoh

  Ujung Garis Q (-1,5) Ujung Garis Q (6,7)

  Karena region code kedua ujung garis tidak 0000 maka garis Q kemungkinan bersifat partialy invisible dan perlu dipotong

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

  Persamaan

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

  

  Contoh

  Contoh

  Contoh

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

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.

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

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)

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.

  Cara pemotongan terhadap suatu garis batas (1) 

  Algoritma SH memiliki aturan sbb, jika poligon dinyatakan oleh verteks- verteks v , v , …..v : _{ 1 2 n}

  Sisi demi sisi diperiksa terhadap batas window mulai dari sisi v v , v v ,….. v _{1 2 2 3 n- 1 n n} v dan v v , untuk mendapatkan verteks-verteks membentuk poligon baru ₁ hasil pemotongan tersebut . Pada tahap inisialisasi poligon hasil berisikan 0 _ verteks.

  Bila suatu sisi v v berpotongan dengan batas window dengan v berada _{i i+1 i} di luar mengarah dan berada di dalam batas window maka dilakukan komputasi untuk mendapatkan titik perpotongannya yaitu v ’, dan verteks- _i verteks v ’ dan v dicatat sebagai verteks berikutnya di poligon hasil _{i i+1 } pemotongan.

  Bila suatu sisi v berpotongan dengan batas window dengan v berada _{i i+1} v _i di dalam mengarah dan berada di luar batas window maka dilakukan komputasi untuk mendapatkan titik perpotongannya yaitu v ’, dan verteks _i

dicatat sebagai verteks berikutnya di poligon hasil pemotongan

  Cara pemotongan terhadap suatu garis batas (2) 

  Bila suatu sisi v v tidak berpotongan dengan batas window dan _{i i+1} berada di sebelah dalam batas window maka verteks v dicatat _i+1 sebagai verteks berikutnya di poligon hasil pemotongan.

  

  Bila suatu sisi v v tidak berpotongan dengan batas window dan _{i i+1} berada di sebelah luar batas window maka tidak ada yang dicatat.

Contoh

   Beikut ini adalah contoh pemotongan poligon terhadap sisi kiri window persegi empat

_{Pada pemeriksaan v Pada pemeriksaan v Pada pemeriksaan v Pada pemeriksaan v}

_{diperoleh v diperoleh v diperoleh v tidak ada verteks baru 1 ’, dan v 1 2} v v v v _{2 3 2 3 3 ’ 3 4 4 1}

  

Poligon yang dihasilkan adalah dengan verteks-verteks v ’v v v ’

_{1 2 3 3}