Grafika Komputer

BAB 4
OUTPUT
PRIMITIF

Sebuah gambar dapat dijelaskan dalam beberapa cara. Dengan

mengasumsikan gambar memiliki tampilan raster (bersadarkan
nilai bit piksel, gambar sepenuhnya ditentukan oleh serangkaian
intensitas untuk posisi piksel di layar. Pada kasus yang lain kita
dapat menggambarkan grafik sebagai satu set objek yang
kompleks, seperti gambar pohon dan bunga atau furnitur dan
dinding, diposisikan pada lokasi koordinat tertentu dalam
sebuah pemandangan. Bentuk dan warna benda dapat dijelaskan
secara internal dengan larik piksel atau dengan set struktur
geometris dasar, seperti segmen garis lurus dan area warna
poligon. Kemudian gambar ditampilkan baik dengan memuat
array piksel ke dalam buffer bingkai atau dengan memindai
mengubah spesifikasi struktur geometris dasar menjadi pola
piksel. Paket pemrograman grafis menyediakan fungsi untuk

34
 Grafika Komputer

menggambarkan pemandangan gambar dalam hal struktur

geometrik dasar ini. Proses ini disebut sebagai primitif keluaran,
untuk mengelompokkan set primitif keluaran menjadi struktur
yang lebih kompleks, Setiap output primitif ditentukan dengan
input data koordinat dan informasi lain tentang cara objek
ditampilkan. Titik dan segmen garis lurus adalah komponen
geometris gambar yang paling sederhana. Primitif output
tambahan yang dapat digunakan untuk membuat gambar
termasuk lingkaran dan bagian kerucut lainnya, permukaan
kuadrat, kurva dan permukaan spline, area warna poligon, dan
string karakter sehingga dengan kata lain output primitif adalah
hasil dari fungsi geometris sederhana yang digunakan untuk
menghasilkan berbagai gambar digital yang dibutuhkan oleh
Pengguna. komponen primitif Output paling dasar adalah titik-
posisi atau piksel dan garis lurus.
Dalam Bab ini akan dijelaskan mengenai komponen Ouput
primitif dan algoritma yang digunakan dalam menentukan
Output Primitif.

4.1. Titik Dan Garis

Komponen pembentuk geometri adalah titik. Kumpulan
beberapa titik akan membentuk garis dan lingkaran. Dalam
konsep grafis terdapat sebuah bidang pembentuk gambar. Untuk
bidang 2d konsep yang terkait adalah seputaran bidang dan
untuk elemen 3d adalah konsep ruang. Suatu konsep bidang
dan ruang tidak akan terpisahkan. Konsep tersebut dimulai dari

35
 Grafika Komputer

sebuah titik, lalu garis, bidang dan terakhir ruang.

Untuk menghasilkan grafik dalam sebuah gambar disebut
dengan primitif grafik dasar
untuk memudahkan proses
menggambar atau merender gambar.

Gambar 4.1. Element primitif grafik dasar

A. Titik
Dalam penjelasan matematis titik dapat diartikan sebagai
sesuatu yang tidak berbentuk, tidak mempunyai ukuran dan
bagian. Oleh dari itu dapat kita simpulkan bahwa sebuah titik
dalam geometri adalah sebagai berikut
1. Tidak mempunyai bentuk tertentuk
2. Tidak memiliki panjang, lebar, tinggi atau tebal.
3. Memiliki tempat (posisi)

Titik merupakan bentuk terkecil dalam geometri yang

menempati suatu posisi adalah yang merupakan suatu idea
berbentuk abstrak dan tidak dapat dijelaskan dengan bahasa
karena titik tidak mempunyai bentuk yang bisa di deskripsikan.
Adapun simbol untuk mewujudkan sebuah titik adalah bentuk
noktah (.) atau silang (x). Untuk membuat nama pada sebuah
titik harus menggunakan huruf kapital seperti titik “A” (.)

36
 Grafika Komputer

Gambar 4.2. Contoh penamaan titik

Pengukuran titik atau point size, adalah satuan pengukuran

vertikal yang digunakan dalam penulisan huruf. Ada total
sekitar 72.272 titik dalam satu inci atau 2,54 cm. Objek ruang 3-
dimensi yang paling dasar yang membentuk semua operasi
dalam grafik komputer adalah titik dan vektor. Dalam dunia
menulis titik menjadi sebuah tanda baca yang digunakan untuk
mengakhiri suatu kalimat.

B. Garis
Garis adalah kumpulan atau himpunan dai beberapa titik
yang
tak terhingga yang tidak dapat diukur panjang, lebar dan
tebalnya. Untuk ukuran sebuah garis memiliki panjang yang
tidak terbatas dan tidak berujung. Sebuah garis dapat
direpresentasikan seperti bentuk seutas tali yang lurus yang
panjangnya tak terhingga. Jika titik memiliki ukuran panjang,
lebar dan tebal maka sebuah garis hanya memiliki ukuran
panjang. Setiap titik diberi nama menggunakan satu buah huruf
kapital, penamaan pada sebuah garis menggunakan huruf kecil
seperti g, h, k,l dan seterusnya, atau dua buah huruf kapital
seperti AB, AC, BC, CD, dan seterusnya.
37
 Grafika Komputer

Gambar 4.3. Contoh penamaan garis

Persamaan garis atau disebut juga persamaan garis lurus

adalah perbandingan antara selisih koordinat y dan koordinat x
dari dua titik yang terletak pada garis tersebut yang dapat di
myatakan dalam bentuk:
y=
mx y =
-mx y
=a
x=
a
ax + by =
ab ax – by =
-ab

dimana m adalah Gradien sebuah garis yang merupakan

Perbandingan komponen y dan komponen x , atau disebut juga
dengan kecondongan atau kemiringan sebuah garis. Berikut
gambar yang menjelaskan tentang persamaan garis.

38
 Grafika Komputer

Gambar 4.4. Menentukan Garis Lurus

Gambar 4.5. Gradien Garis

Berdasarkan Persamaan garis lurus Cartesian adalah:

ym.xb
dimana:
m : Kemiringan garis
b : intercept y

jika kedua ujung garis diketahui berada pada posisi (x1, y1) dan (x2, y2)

seperti pada gambar 5.5 dibawah ini

39
 Grafika Komputer

y  dan b  y1  m .
m  x 2
2
y1 x1
x1

Gambar 4.6. Persamaan garis dua titik

Berdasarkan persamaan garis tersebut maka dapat ditentukan

hubungan antara x dan y, yaitu:

y y y y  m . x dan x  y
m  x2  x 1 , m , m
2 1 x

4.2. Algoritma Pembentuk garis

Terdapat beberapa Algoritma yang digunakan dalam
software grafis untuk membuat sebuah garis pada grafik. Pada
dasarnya software yang digunakan dalam membuat sebuah
grafis sudah memiliki tool yang siap digunakan, tetapi
bagaimana algoritma berkerja pada dasar penggambaran titik-
titik dalam raster graphics. Raster graphics adalah sebuah
gambar yang dibangun atas dasar titik-titik atau piksel pada
yang mengandung warna.

40
 Grafika Komputer

Pada sistem raster, garis diplot dengan menghitung nilai

piksel. Adapu ukuran langkah dalam arah horizontal dan
vertikal dibatasi oleh pemisahan piksel tersebut. Artinya, kita
harus mencoba garis pada posisi diskrit dan menentukan piksel
terdekat ke arah garis pada setiap posisi sampel. Proses scanc
onversion untuk garis lurus adalah di ilustrasikan dalam Gambar
5.6 , untuk garis dekat horisontal dengan posisi sampel
terpisah di sepanjang sumbu x.

Gambar 4.7. Garis lurus dengan lima posisi sampel

4.2.1. Algoritma Garis Digital Diferential Analyzer (DDA)

Algoritma Garis Digital Diferential Analyzer
(DDA) membentuk sebuah garis degan menghitung nilai y

atau x, Garis dibuat menggunakan dua titik, yaitu titik awal (x1, y1)

dan titik akhir (x2, y2). Setiap koordinat titik (xk, yk) yang membentuk

garis diperoleh dari perhitungan yang diubah dalam nilai

integer.
Algoritma ini menerima input berupa dua posisi piksel,
41
 Grafika Komputer

dimulai dari awal dan titik akhir Perbedaan horizontal dan

vertikal antara posisi titik akhir ditugaskan untuk parameter dx
dan dy. Perbedaan besar kecilnya nilai dari dx dan dy akan
mempengaruhi nilai parameter. Dimulai dengan posisi piksel
(x1 , y1) menjadi batas yang diperlukan pada setiap langkah
untuk menghasilkan posisi piksel berikutnya di sepanjang jalur
garis. Adapun langkah dari Algoritma ini adalah sebagai
berikut:
1. Tentukan dua bua titik yang akan menjadi batas dan
dihubungkan dalam pembentukan garis.

A = (x1, y1 )

B = (x2, y2)

2. Tentukan titik awal dan titik akhir

Titik Awal = A = (x1, y1 )

Titik Akhir = B = (x2, y2)

3. Hitung penambahan koordinat

pixel Hitung dx dan dy,;

dx = x2 - x1

dy = y2 - y1

untuk nilai
dx dan dy
bersifat
Absolut
4. Tentukan Parameter atau nilai step, yakni jarak maksimum
jumlah penambahan nilai x atau nilai y, dengan ketentuan:
- bila |dx| > |dy| maka nilai step = |dx|
42
- bila |dy| > |dx| maka nilai step = |dy|
5. dengan persamaan:
 Grafika Komputer

y_inc = dy
step

5.
Hitung koordinat Piksel selanjutnya (xk, yk )
x + x_inc
Xk =
y +
Yk =
y_inc
Untuk pehitungan awal maka x dimulai dari x awal (x1) dan y

dimulai dari y awal (y1).

6. Plot pixel pada layar dengan ketentuan nilai koordinat hasil

perhitungan sudah dibulatkan. uuee
7. Ulangi prosedur no 6 dan 7 untuk menentukan posisi pixel
berikutnya sampai batas

x = x2 atau y = y2.

8. Proses selesai.

Contoh Soal :
Diketahui dua buah titik A( 2,5) dan titik B (7,12) . Jika titik A
merupakan Titik awal dan Titik B adalah titik akhir, gambarlah
titik antara yang akan menghubungkan kedua titik tersebut.
selesaikan dengan menggunakan algoritma DDA.
Penyelesaian :
x1 = 2; x2 = 7
1. Sebagaimana diketahui dalam soal :
y1 = 5; y2 = 12
Titik Awal = A (2,5)
Titik Akhir = B (7,12)

43
 Grafika Komputer

2.Hitung Nilai dx dan dy

dx= x2-x1 dan dy = y2-y1
dx = 7 – 2 = 5
dy = 12 – 5 = 7
jika |dx| > |dy| maka nilai s = |dx|
jika |dy| > |dx| maka nilai s = |dy|
karena dy > dx dimana 7 > 5 maka
s = dy = 7

3. Hitung Nilai piksel

x_inc = dx
s
= 5
7
= 0,714

y_inc = dy
s
= 7
7
= 1

4. Hitung
koordinat Piksel

selanjutnya (xk,

yk )

Untuk nilai x dan

y pada iterasi
pertama di mulai
dari x1 dan y1

X1 = x + x_inc
44
= 2 + 0,714
= 2,714
 Grafika Komputer

Untuk nilai x dan y pada iterasi selanjutnya di mulai dari nilai x

dan y pada iterasi sebelumnya.

X2 = x + x_inc

= 2,714+ 0,714
= 3,428

Y2 = y + y_inc

= 6+1
= 7

X3 = x + x_inc

= 3,428 + 0,714
= 4,142

Y3 = y + y_inc

= 7+1
= 8

X4 = x + x_inc

= 4,142+ 0,714
= 4,856

Y4 = y + y_inc

= 8+1
= 9

X5 = x + x_inc

= 4,856 + 0,714
= 5,57

Y5 = y + y_inc
45
= 9+1
= 10
 Grafika Komputer

X6 = x + x_inc

= 5,57 + 0,714
= 6,284

Y6 = y + y_inc

= 10 + 1
= 11

X7 = x + x_inc

= 4,856 +
0,714
= 6,998

Y7 = y + y_inc

= 11 + 1
= 12

Pada Algoritma DDA Nilai (xk, yk ) yang mempunyai nilai desimal

harus dibulatkan menjadi bentuk integer, ini merupakan

kelemahan dari Algoritma DDA karena serta variabel x, y
maupun m memerlukan bilangan real karena kemiringan
Iterasi x x_inc
merupakan nilai pecahan.
- - 2
1 Tabel 4.1.
2,714 Pembulatan nilai
3 x
2 3,428 3
3 4,142 4
4 4,856 5
5 5,57 6
6 6,284 6
7 6,998 7

46
 Grafika Komputer

Karena nilai y sudah dalam bentuk bilangan bulat, maka tidak

perlu dilakukan pembulatan pada y_inc sehingga nilai y =
y_inc.

Tabel 4.2. koordinat x dan y setelah pembulatan

Iterasi X y x_inc y_inc
- - - 2 5
1 2,714 6 3 6
2 3,428 7 3 7
3 4,142 8 4 8
4 4,856 9 5 9
5 5,57 10 6 10
6 6,284 11 6 11
7 6,998 12 7 12

Gambar 4.8. Garis yang dihasilkan DDA

47
 Grafika Komputer

Algoritma DDA adalah metode yang dianggap yang lebih

cepat untuk menghitung posisi piksel. Algoritma Ini
menghilangkan perkalian dalam sekali perhitungan dengan
memanfaatkan karakteristik raster, sehingga kenaikan yang
sesuai diterapkan pada koordinat arah x atau y ke posisi piksel
di sepanjang jalur garis.
Algoritma ini bekerja dengan mengakumulasi kesalahan
pembulatan dalam penambahan berturut-turut dari kenaikan
floating-point dapat menyebabkan posisi piksel yang dihitung
menjauh dari jalur garis yang sebenarnya untuk segmen garis
panjang. Selain itu, operasi pembulatan dan aritmatika floating-
point dalam prosedur garis DDA masih memakan waktu. Kita
dapat meningkatkan kinerja algoritma DDA dengan
memisahkan kenaikan m dan l / m menjadi bagian integer dan
fraksional sehingga semua kalkulasi & dikurangi menjadi
operasi integer.

4.2.2 Algoritma Bruto Force

Algortima Bruto force juga dapat digunakan untuk
membangun sebuah garis dalam grafis. Adapun langkah –
langkah dalam
Algortima ini adalah sebagai berikut :
1.Tentukan dua buah titik ujung
Titik Ujung 1 =(x1,y1)
Titik Ujung 2=(x2,y2)
2. Bila x1 = x2 dalam bentuk
garis vertikal, maka :
48
(a) y = y + 1 dan x tetap
 Grafika Komputer

(b) gambarkan titik (x,y)

(c) Selesai
3. bila y1 = y2 dalam bentuk garis horisontal, maka :
(a) x = x + 1 dan y tetap
(b) gambarkan titik (x,y)
(c) Selesai
4. Buatlah satu permisalan dimana x2 > x1
Bila kondisi berbalik seperti x1 > x2 ,maka gantilah nilai x2
dengan x1
5. Hitung gradien atau kemiringan garis m = (y2 − y1)/( x2 − x1)
6. Tentukan Nilai N = x2 − x1 +1
7. x = x1
8. Ulang sebanyak N kali :
(a) y= m (x- x1) + y1
(b) lakukan pembulatan ya = Round(y),
(c) gambarkan titik (x,ya)
(d) x = x + 1
9. Proses selesai

Contoh Soal :
Diketahui 2 buah titik A (2,1) dan titik B(8,5) bila titik A
sebagai titik ujung 1 dan titik B sebagai titik ujung 2, maka
gambarlah garis antara yang menghubungkan kedua titik
tersebut dengan menggunakan algoritma Brute Force.

49
 Grafika Komputer

Penyelesaian
x1 = 2; x2 = 8
y1 = 1; y2 = 5
Titik Awal =
A (2,1) Titik Akhir = B
(8,5)
2.Karena nilai x1 tidak sama dengan x2, maka langkah kedua
tidak terpenuhi.
3.Karena nilai y1 tidak sama dengan y2, maka langkah ketiga
tidak terpenuhi.
4. m = (5 – 1)
(8 – 2)
= 0,67
5. N = 8 – 2 +
1=7

6. untuk x = 2
y =
0,67
(x –
2) + 1

7.Ulang sebanyak 7 kali

iterasi ke-1:
x=2
y = 0,67 * (2 – 2) + 1 =
1
pembulatan : y = 1
gambar titik (2,1)
x=2+1=3 50
 Grafika Komputer

y = 0,67 * (3 – 2) + 1 = 1,67
pembulatan : y = 2
gambar titik (3,2)
x=3+1=4

iterasi ke-3:
x=4
y = 0,67 * (4 – 2)
+ 1 = 2,34
pembulatan : y = 2
gambar titik (4,2)
x=4+1=5

iterasi ke-4:
x=5
y = 0,67 * (5 – 2)
+ 1 = 3,01
pembulatan : y = 3
gambar titik (5,3)
x=5+1=6

iterasi ke-5:
x=6
y = 0,67 * (3 – 2)
+ 1 = 3,68
pembulatan: y = 4
gambar titik (6,4)
x=6+1=7 51
 Grafika Komputer

iterasi ke-6:
x=7
y = 0,67 * (7 – 2) + 1 =4,35
pembulatan: y = 4
gambar titik (7,4)
x=7+1=8

iterasi ke-7:
x=8
y = 0,67 * (7 –
2) + 1 =5,02
pembulatan: y = 5
gambar titik (8,5)

Sehingga didapatkan titik antara yang menghubungkan Titik A

dan B adalah 2,1), (3,2), (4,2), (5,3), (6,4), (7,4), (8,5).
Sehingga dapat diperoleh seperti gambar berikut :

Gambar 4.9. Garis yang dihasilkan Bruto Force

52
 Grafika Komputer

Persmasalahan yang di dapatkan pada Algoritma ini adalah

gradien atau kemiringan garis. Untuk gradien garis m > 1, garis
menjadi tidak kontiniu yang mengakibatkan terjadinya gap antar
piksel,

Gambar 4.10. Garis yang tidak kontiniu

Berdasarkan gambar diatas maka diperlukan interpolasi

Gambar 4.11. Garis kontiniu setelah interpolasi

53
 Grafika Komputer

Selain menggunakan interpolasi, untuk kemiringan garis

m > 1 dapat dilakukan dengan menukarkan nilai x dengan y
maka gap tidak akan terjadi gap antara titik yang satu dengan
yang lain. Langkah- Langkah untuk m > 1 adalah sebagai
berikut :
1.Tentukan dua buah titik ujung
Titik Ujung 1 =(x1,y1)
Titik Ujung 2=(x2,y2)
2. Bila x1 = x2 dalam bentuk
garis vertikal, maka :
(a) y = y + 1 dan x tetap
(b) gambarkan titik (x,y)
(c) Selesai
3. bila y1 = y2 dalam bentuk
garis horisontal, maka :
(a) x = x + 1 dan y tetap
(b) gambarkan titik (x,y)
(c) Selesai
4. Buatlah satu permisalan
dimana y2 > y1
Bila kondisi berbalik y 1 > y2 ,
gantilah nilai y2 dengan y1
5. Hitung gradien atau
kemiringan garis m = ( x2 −
x1)/(y2 − y1)
6. Tentukan Nilai N = y2 − y1
+1
7. y = y1
8. Ulang sebanyak N kali :
54
(a) y= m (x- x1) + y1
(b) lakukan pembulatan
 Grafika Komputer

Contoh Soal :
Diketahui 2 buah titik A (4,3) dan titik B(7,8) bila titik A
sebagai titik ujung 1 dan titik B sebagai titik ujung 2, maka
gambarlah garis antara yang menghubungkan kedua titik
tersebut dengan menggunakan algoritma Brute Force.
Penyelesaian :
x1 = 4; x2 = 7
y1 = 3; y2 = 8
Titik Awal = A (4,3)
Titik Akhir = B (7,8)
2.Karena nilai x1 tidak sama dengan x2, maka langkah kedua
tidak terpenuhi.
3.Karena nilai y1 tidak sama dengan y2, maka langkah ketiga
tidak terpenuhi.
4. m = (7 – 4)
(8 – 3)
= 0,6
5. N = 8 – 3 +
1=6

6. untuk y =
3
x =
0,6 *
(y –
2) + 4

7.Ulang sebanyak 6 kali

pembulatan: x = 4
iterasi ke-1:
y= 3 55

x = 0,6 * (3 – 3) + 4 =4
 Grafika Komputer

gambar titik (4,3)

y=3+1=4

iterasi ke-2:
y= 4
x = 0,6 * (4 – 3) + 4 =4,6
pembulatan: x = 5
gambar titik (5,4)
y=4+1=5

iterasi ke-3:
y= 5
x = 0,6 * (5 – 3) +
4 =5,2
pembulatan: x = 5
gambar titik (5,5)
y=5+1=6

iterasi ke-4:
y= 6
x = 0,6 * (6 – 3) +
4 =5,8
pembulatan: x = 6
gambar titik (6,6)
y=6+1=7

y= 7
iterasi ke-5:
56
 Grafika Komputer

x = 0,6 * (7 – 3) + 4 =6,4
pembulatan: x = 6
gambar titik (6,7)
y=7+1=8

iterasi ke-6:
y= 8
x = 0,6. (8 – 3) + 4 =7
pembulatan: x = 7
gambar titik (7,8)
y=8+1=9
Sehingga titik antara yang menghubungkan
didapatkan
Titik A dan B adalah (4,3), (5,4), (5,5), (6,6), (6,7), (7,8).
Kelemahan dari Algoritma Bruto Force ini terlalu lambat
dan membutuhkan waktu yang lama, hal ini dikarenakan pada
setiap iterasi terdapat beberapa proses berulang seperti perkalian
bilangan pecahan (floating point) kemudian dilanjutkan
penjumlahan bilangan pecahandan diakhiri proses pembulatan
angka pecahan menjadi bulat (integer).

4.2.3 Algoritma Bressenham

Algoritma ini biasa digunakan untuk 2 klasifikasi, yakni
penggambaran garis dan lingkaran. Untuk menggambar garis,
algoritma ini disebut juga Midpoint line Algorithm dan untuk
menggambar lingkaran disebut Midpoint Circle
Algorithm.
Menggunakan pendekatan dari Midpoint Circle Algorithm,

57
 Grafika Komputer

dapat dibentuk suatu model Ellips. Bressenham

mengembangkan algoritma dengan menggunakan perhitungan
matematik dengan bantuan bilangan integer, tanpa ada proses
pembulatan seperti pada algoritma DDA dan Bruto Force.

A. Midpoint line Algorithm

Adapun langkah – langkah dalam Algortima ini adalah sebagai
berikut :
1. Tentukan dua bua titik yang akan menjadi batas dan
dihubungkan dalam pembentukan garis.

A = (x1, y1 )

B = (x2, y2)

2. Tentukan titik awal dan titik akhir

Titik Awal = A = (x1, y1 )

Titik Akhir = B = (x2, y2)

3. Hitung

dx = x2 - x1

dy = y2 - y1

2|dy|
2|dy| – 2|
dx|
untuk nilai
5. Untuk setiap xk sepanjang jalur garis, dimulai dengan k = 0
dx dan dy
bersifat
-bila pk < 0 maka titik selanjutnya adalah:
Absolut dan
(x k+1, yk) pk+1 = pk-1 + 2dy
4. Tentukan Parameter:
58
P = 2dy - dx
 Grafika Komputer

> 0, titik selanjutnya adalah:

- bila pk
(xk+1, yk+1) dan pk+1 = pk-1 + 2dy – 2dx
6. Ulangi nomor 5 untuk menentukan posisi pixel berikutnya,

sampai x = x2 atau y = y2.

Contoh soal
Diketahui 2 buah titik A (2,1) dan titik B(8,5) bila titik A
sebagai titik ujung 1 dan titik B sebagai titik ujung 2, maka
gambarlah garis antara yang menghubungkan kedua titik
tersebut dengan menggunakan algoritma Bressenham
Penyelesaian
x1 = 2; x2 = 8
y1 = 1; y2 = 5
Titik Awal = A (2,1)
Titik Akhir = B (8,5)

2. Hitung Nilai dx ,dy , 2|dy| dan 2|dy| – 2|dx|

dx= x2-x1 dan dy = y2-y1
dx = 8 – 2 = 6
dy = 5 – 1 = 4
2dy = 2 * 4 = 8
2dx = 2 * 6 = 12
2|dy| – 2|dx| = 8 –12 = –4

3.Tentukan Parameter:

P0 = 2dy – dx = 8 – 6 = 2
59
 Grafika Komputer

Iterasi ke-1 ( k = 0):

Titik awal = (2,1)

P0 = 2 > 0, maka titik selanjutnya adalah

x = 2 + 1 = 3 dan y = 1 + 1 = 2
koordinat selanjutnya : (3,2)

p1 = p0 + 2|dy| – 2|dx| = 2 − 4 = −2

Iterasi ke-2 ( k = 1):

Titik awal = (3,2)

P1 = −2 < 0, maka titik selanjutnya adalah

x = 3 + 1 = 4 dan y = 2
koordinat selanjutnya : (4,2)

p2 = p1 + 2|dy| = −2 + 8 = 6

Iterasi ke-3 ( k = 2):

Titik awal = (4,2)

P2 = 6 > 0, maka titik

selanjutnya adalah

x = 4 + 1 = 5 dan y = 2 + 1
=3
koordinat selanjutnya : (5,3)

p3 = p2 + 2|dy| – 2|dx| = 6 − 4 =

60
Iterasi ke-4 ( k = 3):
Titik awal = (5,3)
 Grafika Komputer

koordinat selanjutnya : (6,4)

p4 = p3 + 2|dy| – 2|dx| = 2 − 4 = −2

Iterasi ke-5 ( k = 4):

Titik awal = (6,4)

P4 = −2 < 0, maka titik selanjutnya adalah

x = 6 + 1 = 7 dan y = 4
koordinat selanjutnya : (7,4)

p5 = p4 + 2|dy| = −2 + 8 = 6

Iterasi ke-6 ( k = 5):

Titik awal = (7,4)

P5 = 6 > 0, maka titik

selanjutnya adalah

x = 7 + 1 = 8 dan y = 4 + 1
=5
koordinat selanjutnya : (8,5)
K Pk xk+1, yk+1
p6 = p5 + 2|dy| = 6 + 8 = 14
0 2 2,1
Karena x = x2 =1 8, maka -2 3,2
iterasi dihentikan.
2 6 4,2
3 Tabel 4.3.2 5,3
4 nilai -2 6,4
5 bressenha6 7,4
6 m 14 8,5

61
 Grafika Komputer

Gambar 4.12.Titik yang dihasilkan Bressenham

A. Midpoint Circle Algorithm

1. Lingkaran
Proses penggambaran Lingkaran atau pembuatan kurva pada
grafis dapat dilakukan dengan menentukan titik awal pada
koordinat (x,y) yang terletak pada lingkaran sehingga
membentuk maka tujuh titik yang lain yang terletak pada
lingkaran juga. Dengan demikian, hanya perlu melakukan
perhitungan pada segmen 450 sehingga membentuk simetris
delapan titik lingkaran sempurna sebagai berikut:
(x, y), (−x,y), (x, −y), (−x, −y), (y,x), (−y,x), (y, −x), (−y, −x)

Gambar 4.13 Delapan titik simetris pada lingkaran

62
 Grafika Komputer

Adapun langkah – langkah dalam Algortima Lingkaran ini

adalah sebagai berikut :
1.
Tentukan jari-jari r dan pusat lingkaran (xp, yp), kemudian setting

sedemikian rupa sehingga titik awal berada pada (x0, y0)

Titik Awal = (0 , r)

2. Hitung nilai parameter :

P0 = 5/4 – r Apabila nilai jari-jari r pecahan

P0 = 1 – r Apabila nilai jari-jari rbilangan bulat

3.
Untuk setiap posisi xk, dimulai dengan k = 0

- bila pk < 0 maka titik selanjutnya adalah (xk+1, yk)

Parameter selanjutnya

pk+1 = pk + 2 xk+1 + 1

- bila pk > 0 maka titik selanjutnya adalah (xk+1, yk – 1)

Parameter selanjutnya

pk+1 = pk + 2 xk+1 + 1 – 2 yk+1

4. Tentukan titik simetris pada ketujuh oktan yang lain

(x, y), (−x,y), (x, −y), (−x, −y)
(y,x), (−y,x), (y, −x), (−y, −x)
x = x +setiap
5. Gerakkan xp dan y =(x,
posisi piksel y +y)yppada garis lingkaran

6. Ulangi langkah
dengan titik pusat 3(xsampai
p, yp) dandengan
plot nilai5 koordinat
hingga posisi nilai
x≥y
7. Proses Selesai

63
 Grafika Komputer

Contoh Soal :
Diketahui sebuah pusat lingkaran (4,6) dengan jari – jari 8,
Gambarlah sebuah lingkaran. Gambarlah sebuah lingkatan yang
dapat dibentuk dari titik tersebut. Penyelesaian :

Penyelesaian:
perhitungan berdasarkan dari oktan kuadran pertama dimana
x = 0 sampai x = y.
Diketahui :
Titik awal dimulai dari (x,r) =
(0,8). r = 8; Karena jari-jari r bulat,
maka=1–r
P0
=1 – 8 = - 7
Iterasi ke-1:

K = 0; X0 = 0; Y0 = r = 8; P0 = –7

Karena P0 < 0, maka :

X1 = X0 + 1 = 0 + 1 = 1 dan Y1 = Y0 = 8,

jadi Titik selanjutnya : (1,8)

P1 = p0 + 2 * (x1) + 1
= –7 + 2*(1) + 1 = – 4
Simetris delapan titik :
(1,8) (–1,8), (1, –8), (–1, –
8), (8,1), (–8,1), (8, –1), (–
8, –1)
Gerakkan setiap posisi piksel (x, y) pada garis lingkaran
dengan titik pusat (4,6) dengan menjumlahkan setiap nilai
koordinat 64

dari x = x + 4 dan y = y + 6. Seperti pada tabel berikut:

 Grafika Komputer

Tabel 4.4. posisi piksel iterasi 1 pada titik pusat (4,6)

Simetris Delapan Titik (x + 4, y + 6)
(1,8) (5, 14)
(–1,8) (3, 14)
(1, –8) (5, –2)
(–1, –8) (3, –2)
(8,1) (12, 7)
(–8,1) (–4, 7)
(8, –1) (12, 5)
(–8, –1) (–4, 5)

Iterasi ke-2:

K = 1; X0 = 1; Y0 = r = 8; P0 = –4

Karena P0 < 0, maka :

X1 = X1 + 1 = 1 + 1 = 2

Y2 = Y1 = 8,

jadi Titik selanjutnya : (2,8)

P2 = p1 + 2 * (x2) + 1
= –4 + 2*(2) + 1 = 1
Tabel 4.5. posisi piksel dari iterasi 2 pada titik pusat (4,6)
Simetris Delapan Titik (x + 4, y + 6)
(2,8) (6, 14)
(–2,8) (2, 14)
(2, –8) (6, –2)
(–2, –8) (2, –2)
(8,2) (12, 8)
(–8,2) (–4, 8)
(8, –2) (12, 4)
(–8, –2) (–4, 4)

65
 Grafika Komputer

Iterasi ke-3:

K = 2; X2 = 2; Y2 = 8; P2 = 1

Karena P0 > 0, maka :

X3 = X2 + 1 = 2 + 1 = 3

Y3 = Y2 –1 = 8 – 1 = 7

jadi Titik selanjutnya : (3,7)

P3 = p1 + 2 * (x2) + 1– 2 * (y3)
= –4 + 2*(2) + 1 – 2 * (7) =
–6
Simetris Delapan Titik (x + 4, y + 6)
(3,7)piksel
Tabel 4.6. posisi (7, 13)
dari iterasi 3(–3,7)
pada titik (1, 13)
pusat (4,6) (3, –7) (7, –1)
(–3, –7) (1, –1)
(7,3) (11, 9)
(–7,3) (–3, 9)
(7,–3) (11, 3)
(–7, –3) (–3, 3)

Iterasi ke-4:

K = 3; X3 = 3; Y3 = 7; P3 = - 6

Karena P0 < 0, maka : X4

= X3 + 1 = 3 + 1 = 4 Y4 =

Y3 = 7

jadi Titik selanjutnya :

(4,7)
66
P4 = p3 + 2 * (x4) + 1

= 1 + 2*(4) + 1 = 3
 Grafika Komputer

Tabel 4.7. posisi piksel dari iterasi 4 pada titik pusat (4,6)
Simetris Delapan Titik (x + 4, y + 6)
(4,7) (8, 13)
(–4,7) (0, 13)
(4, –7) (8, –1)
(–4, –7) (0, –1)
(7,4) (11, 10)
(–7,4) (–3, 10)
(7,–4) (11, 2)
(–7, –4) (–3, 2)

Iterasi ke-5:

K = 4; X4 = 4; Y4 = 7; P4 = 3

Karena P0 > 0, maka :

X5 = X4 + 1 = 4 + 1 = 5

Y5 = Y4 –1 = 7 – 1 = 6

jadi Titik selanjutnya : (5,6)

P5 = p4 + 2 * (x5) + 1– 2 * (y5)
= –4 + 2*(5) + 1 – 2 * (6) =
2
Simetris Delapan Titik (x + 4, y + 6)
(5,6)piksel
Tabel 4.8. posisi (9, 12)
dari iterasi 5(–5,6)
pada titik (-1, 12)
pusat (4,6) (5 ,–6) (9, 0)
(–5, –6) (-1, 0)
(6,5) (10, 11)
(–6,5) (–2, 11)
(6,–5) (10, 1)
(–6, –5) (–2, 1)

67
 Grafika Komputer

Iterasi ke-6:

K = 5; X5 = 5; Y5 = 6; P5 = 2

Karena P0 > 0, maka :

X6 = X5 + 1 = 5 + 1 = 6

Y6 = Y5 –1 = 6 – 1 = 5

jadi Titik selanjutnya : (5,6)

karena kondisi x > y maka iterasi dihentikan dan hasil untuk
oktan ke-1 ditunjukkan oleh gambar berikut :

Gambar 4.14. Posisi piksel pada pembentukan lingkaran

2. Elips
Elips merupakan himpunan titik yang yang apabila jaraknya di
jumlahkan dari 2 posisi yang tetap memiliki nilai sama pada
setiap titik. Persamaan Ellips dengan pusat 0,0 dan jari-jari Rx
dan Ry adalah sebagai berikut :
= ( x- xc )2 + ( y- yc )2
Rx Ry

68
 Grafika Komputer

Elipps memiliki empat simetris objek atau disebut juga dengan

empat kuadran, oleh karena itu dapat disusun suatu algoritma
yang mampu memplot pixel di kuadran pertama dan
menentukan titik di tiga kuadran lainnya.
Elips adalah bentuk modifikasi dari lingkaran dengan
memasukkan mayor dan minor axis pada prosedur lingkaran.
Elips ditentukan oleh satu set titik dengan memperhitungkan
jumlah jarak dari kedua posisi. Bila jarak kedua titik dari
sembarang titik A(X,Y) pada elips diberi label d1 dan d2, maka
berikut bentuk dari ellips.

Gambar 4.15. Bagian Ellips

Untuk algoritma pembentukan elips dillakukan pendekatan

seperti menampilkan lingkaran menggunakan parameter pada
posisi standar, yaitu rx, ry, dan(xc,yc). Adapun langkah –
langkah dalam Algortima Ellips ini adalah sebagai berikut :
1. Tentukan nilai Rx, Ry dan pusat elips (xc,yc) sehingga
Titik awal = (x0,y0) = (0,ry)

69
 Grafika Komputer

2. Hitung nilai parameter

2 2
2
P1k = ry rx ry +
1/4 rx

3. Tentukan nilai awal k=0, sebagai berikut :

-
Bilasetiap
untuk P1k <posisi
0 makaxk titik selanjutnya adalah
2
(xk+1, yk) dan 2
berlaku Pk+1= P1k+2ry xk+1+ry
-
Bila P1k > 0, maka titik selanjutnya adalah
2
(xk+1,yk1) dan Pk+1=P1k+2ry x2k+12rxyk+1+ry
4. 2ry x k+1 = 2ry 2xk +2r 2 dan 2rx yk+1 =2r 2y
2
+2r 2

y
Teruskan sampai x k

5. Tentukan nilai parameter pada bagian

x kedua menggunakan
2 2
2ry x >= 2rx y
titik terakhir (x0,y0) yang telah dihitung pada bagian pertama, sebagai

berikut:
2 2 2 2 2
2
P2k+1 = 2ry (xo+1/2) +2rx (yo1) rx ry

6. Setiap posisi yk pada bagian kedua, dimulai dengan k=0

2
(xk, yk1) 2
- Bila p2k > 0 maka p2
titik
k+1selanjutnya
=p2k+2rx yadalah
k+1+rx

- Bila p2k < 0 maka titik selanjutnya adalah

2
2
(xk+1,yk1) dan p2k+1=pk+2ry xk+12rxyk+1+ry

7. Tentukan titik simetris pada ketiga kuadran lainnya

8.Gerakkan setiap posisi (x,y) pada garis melingkar dari elisp
dengan titik pusat (xc,yc) dan tentukan nilai koordinat
x=x+xc y=y+yc
9. Ulangi langkah untuk bagian pertama di atas, sehingga
2 2
2ry x >= 2rx y

70
 Grafika Komputer

Contoh soal
1. Gambarkan sebuah elips dengan titik dengan titik pusat(0,0)
dan mayor axis rx=6, serta minor axis ry = 8,menggunakan
algoritma midpoint elips.
Penyelesaian :
Berdasarkan kuadran pertama, nilai parameter dapat ditentukan
2r 2x=0
2r 2 2
x=2rx ry
y
p1o= r 2 + r 2ry 1/4 r 2
y x x

=215
Koordinat titik awal (x,r) =(0,8)

Tabel 4.9. Koordinat titik yang dibentuk pada elips

k Pk (Xk+1,Yk+1) oktan -1
- - (0,8)
0 -215 (1,8)
1 -23 (2,8)
2 297 (3,7)
3 241 (4,6)
4 -108 (5,5)
5 236 (5,4)
6 -16 (6,3)
7 600 (6,2)
8 492 (6,1)
9 456 (6,0)

71
 Grafika Komputer

Soal- soal Latihan

1. Diketahui dua buah titik A( 10,10) dan titik B (17,16) . Jika
titik A merupakan Titik awal dan Titik B adalah titik akhir,
gambarlah titik antara yang akan menghubungkan kedua
titik tersebut. Selesaikan dengan menggunakan algoritma
DDA, Bruto Force dan Bressenham.

72