Dasar teori dan algoritma grafika komputer

(1)

(2)

Your Logo

Here comes your footer  Page 2

Sub Pokok Bahasan

 Geometri Dasar

 Geometri Lanjut

(3)

(4)

Your Logo

Geometri Dasar

 _{Sistem koordinat}

 _{Kuadran garis}

 _Gradien

 _{Algoritma garis DDA}

 _{Algoritma garis Bresenham}

 _{Algoritma lingkaran Bresenham}

(5)

SISTEM KOORDINAT

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

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

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

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

(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

(13)

(14)

Your Logo

Koordinat tampilan/layar

Grafika Komputer  Page 14

 _{Untuk memetakan sebuah titik di window ke titik di}

(15)

KUADRAN GARIS

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

(17)

Kuadran Garis

 _{Berdasarkan arah garis maka sebuah garis dapat di salah satu area}

(kuadran).

(18)

Your Logo

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}

(19)

(20)

Your Logo

GRADIEN

(21)

Gradien



Nilai kecenderungan sebuah garis,

(22)

Your Logo

ALGORITMA GARIS DDA

(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

(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

(25)

Kelemahan algoritma DDA :

 _{Hanya dapat digunakan untuk nilai x1 < x2 dan y1 < y2}

(26)

Your Logo

ALGORITMA GARIS

BRESENHAM

(27)

Algoritma Garis Bresenham



Dikembangkan oleh Bresenham



Berdasarkan selisih antara garis yang

(28)

Your Logo

Algoritma Bresenham untuk dx > dy

(29)

(30)

Your Logo

Contoh



Hitung lokasi 5 titik pertama yang dilewati

oleh garis (10,30) – (256,147)

menggunakan algoritma bresenham!



Gambarkan hasil perhitungannya!

(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

(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

(33)

ALGORITMA LINGKARAN

BRESENHAM

(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

(35)

(36)

Your Logo

Lingkaran

(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

(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

(40)

Ihr Logo

(41)

Geometri Lanjut

 _Polygon

(42)

Your Logo

POLYGON

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

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

(45)

(46)

Your Logo

ALGORITMA FLOOD FILL

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

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

(49)

(50)

Ihr Logo

(51)

Geometri Dua Dimensi

 _{Transformasi Affine 2D}  _Translasi

 _Skala  _Rotasi

 _{Transformasi homogeneous}  _{Clipping dua dimensi:}

_{Ketampakan garis}

(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)}

(53)

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

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

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

(57)

Contoh

 _{Gambar berikut menunjukkan suatu objek setelah}

(58)

Your Logo

Rotasi

 _{Pemutaran objek dilakukan dengan menggeser semua}

(59)

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)



Objek berikut diputar

(60)

Your Logo

Contoh

(61)

(62)

Your Logo

Contoh

(63)

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 :

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

(65)

(66)

Your Logo

Contoh

(67)

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}

(68)

Your Logo

Transformasi Homogeneous

Transformasi dilakukan

dengan menggunakan rumus:

(69)

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}

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

(71)

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}

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

(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)}

(75)

Contoh

(76)

Your Logo

Contoh

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

Ujung Garis Q (-1,5)

(77)

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 :

(78)

Your Logo

Persamaan

(79)

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.

(80)

Your Logo

Contoh

(81)

(82)

Your Logo

Contoh

(83)



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

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

(85)

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

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

(87)

Contoh

 _{Gambar berikut ini dimana suatu poligon dipotong terhadap suatu}

window berbentuk persegi panjang

 _{Pemotongan pertama dilakukan terhadap sisi kiri, kemudian kanan,}

(88)

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,….. v n-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

(89)

Cara pemotongan terhadap suatu garis batas (2)

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

(90)

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 v₁v₂

diperoleh v₁’, dan v₂

Pada pemeriksaan v₂v₃

diperoleh v₃

Pada pemeriksaan v₃v₄

diperoleh v₃’

Pada pemeriksaan v₄v₁