Grafika Komputer Pertemuan Ke-3

BAB-3
ATRIBUT PRIMITIF 2D
Yang termasuk dalam atribut primitive adalah titik dan garis.
Pembetuk garis yang dikenal adalah algoritma DDA, dan Bresenham.
Oleh : I Gusti Ngurah Suryantara,S.Kom., M.Kom

3.1. PENDAHULUAN
Yang merupakan atribut primitif adalah: titik dan garis. Ada beberapa metode pembentuk
garis yang umum digunakan yaitu:

Algoritma DDA (Digital Defferential Analyzer)

Algoritma Bressenham

3.1.1. DDA (Digital Defferential Analyzer)

Garis merupakan kumpulan dari titik-titik, untuk membentuk garis lurus adalah dengan
mengetahui titik awal dan titik akhir. Dengan mengetahui titik awal dan titik akhir maka kita
dapat membentuk garis. Untuk menggambarkan proses pembuatan garis dari titik awal ke titik
akhir ada berbagai algoritma. Algoritma yang umum adalah DDA dan Bresenham.

Berikur ini adalah algoritma DDA

1. Tentukan 2 buah titik.
2. Tentukan yang menjadi titik awal (X0,Y0) dan titik akhir (X1,Y1).
3. Hitung Dx dan Dy
Dx = X1-X0 dan Dy = Y1 Y0
4. Bandingkan Abs(Dx) dan Abs(Dy)
Jika Abs(Dx) > Abs(Dy) maka
Steps = Abs(Dx) bila tidak Steps = Abs(Dy)
5. Hitung penambahan koordinat pixel, yaitu:
X_increment = dx/steps, dan
Y_increment = dy/steps.
6. Koordint selanjutnya, yaitu
X+X_increment
Y+Y_increment
7. Posisi pixel ditentukan dengan pembulatan nilai koordinat tersebut.
8. Ulangi langkah 6 dan 7 untuk posisi selanjutnya sampai X = X1, Y = Y1

48

Grafika Komputer Pertemuan Ke-3

DDA (bahasa pascal)

Procedure DDA;
Begin
Write(Masukkan Nilai X0 : );
Write(Masukkan Nilai Y0 : );
Write(Masukkan Nilai X1 : );
Write(Masukkan Nilai Y1 : );
Dx:= X1-X0;
Dy:= Y1-Y0;
If Abs(Dx) > Abs(Dy) Then
Steps:= Abs(Dx)
Else
Steps:= Abs(Dy);
Endif
Xincrement = dx / Steps
Yincrement = dy / Steps
PutPixel(x,y,Hitam);
For x = 1 to Steps Do
X := X + Xincrement;
Y := Y + Yincrement;
PutPixel(x,y,Hitam);
End;
End;

Readln(X0);
Readln(Y0);
Readln(X1);
Readln(Y1);

Contoh
Diketahui 2 buah titik A(10,10) dan titik B(17,16), bila titik A sebagai titik awal dan titik B
sebagai titik akhir maka buatlah garis yang menghubungkan titik tersebut dengan
menggunakan algoritma DDA.

Jawab
Titik Awal = A(10,10)
Titik Akhir = B(17,16)
Dx = (X1-X0)
(17-10) = 7
Dy = (Y1-Y0)
(16-10) = 6
Abs(Dx) = Abs(7) = 7
Abs(Dy) = Abs(6) = 6
Abs(Dx) > Abs(Dy) maka Step = Abs(Dx) = 7
Xincrement = Dx / Step
=7/7=1
Yincrement = Dy / Step
= 6 / 7 = 0,86

Tabel 3.1. Nilai perhitungan

49

Grafika Komputer Pertemuan Ke-3

K
0
1
2
3
4
5
6

X
11
12
13
14
15
16
17

Y
10,86
11,71
12,57
13,43
14,28
15,14
16

Y
16

10

Xinc
10
11
12
13
14
15
16
17

Yinc
10
11
12
13
14
14
15
16

B(17,16)

A(10,10)
10

17

X
Gambar 3.1. Digambar pada sumbu cartesian

Digambar Pada Layar Monitor

x

y
Gambar 3.2. Coordinat monitor

Berikut hasil tampilan program dengan menggnakan algoritma DDA.

50

Grafika Komputer Pertemuan Ke-3

Gambar 3.3. Tampilan DDA dengan VB

4.1.2.BRESSENHAM
ALGORITMA BRESSENHAM
Tujuan dari algoritma Bressenham ini adalah untuk menghindari pembulatan nilai seperti
pada algoritma DDA.
1. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis.
2. Tentukan salah satu titik di sebelah kiri sebagai titi awal, yaitu (x0,y0) dan titik lainnya
sebgai titik akhir (x1,y1).
3. Hitung dx,dy,2dx dan 2dy-2dx.
4. Hitung parameter P0 = 2dy-dx
5. Untuk setiap Xk sepanjang jalur garis, dimulai dengan k=0,
- bila pk <0, maka titik selanjutnya adalah (xk+1, yk), dan Pk+1 = Pk+2dy
- bila tidak, maka titik selanjutnya adalah (xk+1,yk+1), dan Pk+1 = Pk+2dy-2dx
6. Ulangi langkah no 5 untuk menentukan posisi pixel selanjutnya,
sampai x = x1 dan y = y1.

51

Grafika Komputer Pertemuan Ke-3

Sub Rutim Berssenham dalam C

Void line (int xa, ya, xb, yb, xEnd; flot x,y)
{
Int dx = abs(xb-xa), dy=abs(yb-ya);
Int p = 2*dy-dx;
Int twoDy = 2*dy, twodyDx = 2*(dy-dx);
If (xa>xb) {
X = xb;
Y = yb;
Xend = xa;
}
Else{
X = xa;
Y = ya;
xEnd = xb;
}
SetPixel(x,y);
While (x<xEnd) {
X=X+1;
If (p<0)
P = P + twody;
Else{
Y = Y + 1;
P = P + twoDyDx;
}
SetPixel(x,y);
}
};

Contoh
Berdasarkan contoh pada algoritma DDA buatlah dengan metode bresenham.

JAWAB
dx = abs(xb xa)
= abs(17 10 ) = 7
dy = abs(yb ya)
= abs(16 10) = 6
p

twody
twodydx

= 2 * dy - dx
=2*67=5
= 2 * dy
= 2 * 6 = 12
= 2 * (dy dx )
= 2 * ( 6 7 ) = -2

Periksa xa dan xb
xa = 10 < xb = 17
Maka

52

Grafika Komputer Pertemuan Ke-3

x

= xa
= 10
y
= ya
= 10
Xend = xa
= 17
Ulangi selama x < xend
K0: x = x + 1
= 10 + 1 = 11
Periksa nilai p , dimana p = 5
y =y+1
= 10 + 1 = 11
p = p + twodydx
= 5 + (-2) = 3
K1: x = x + 1
= 11 + 1 = 12
Periksa nilai p, dimana p = 3
y = y +1
= 11 + 1 = 12
p = p + twodydx
= 3 + (-2) = 1
K2: x = x + 1
= 12 + 1 = 13
Periksa nilai p, dimana p = 1
y = y +1
= 12 + 1 = 13
p = p + twodydx
= 1 + (-2) = -1
K3: x = x + 1
= 13 + 1 = 14
Periksa nilai p, dimana p = -1
Nilai y tetap yaitu y=13
p = p + twody
= (-1) + 12 = 11
K4: x = x + 1
= 14 + 1 = 15
Periksa nilai p, dimana p = 11

53

Grafika Komputer Pertemuan Ke-3

y = y +1
= 13 + 1 = 14
p = p + twodydx
= 11 + (-2) = 9
K5: x = x + 1
= 15 + 1 = 16
Periksa nilai p, dimana p = 9
y = y +1
= 14 + 1 = 15
p = p + twodydx
= 9 + (-2) = 7
K6: x = x + 1
= 16 + 1 = 17
Periksa nilai p, dimana p = 7
y = y +1
= 15 + 1 = 16
p = p + twodydx
= 7 + (-2) = 5
Proses berhenti karena x = x1 dan y = y1
Masukkan nilai kedalam tabel, seperti pada tabel 3.2.
Tabel 3.2.Hasil penelusuran dengan bressenham

K
0
1
2
3
4
5
6

Pk
3
1
-1
11
9
7
5

(Xk+1 , Yk+1)
10,10
11,11
12,12
13,13
14,13
15,14
16,15
17,16

54

Grafika Komputer Pertemuan Ke-3

Digambar pada sumbu cartesian

16

10

B(17,16)

A(10,10)
10

17

Gambar 3.4. Hasil perhitungan dengan bressenham

Latihan
Diketahui 2 buah titik yaitu, A(25,27) dan B(20,17), buatlah garis dengan menggunakan
algoritma DDA dan Bressenham.
PRAKTIKUM
Latihan Praktikum 1
Pada latihan kali ini kita akan membuat program pembentuk garis dengan menggunakan
algoritma DDA. Desain sebuah form seperti pada Gambar 3.5.

Contoh program garis DDA dengan VB

Gambar 3.5. Hasil program DDA dengan VB

55

Grafika Komputer Pertemuan Ke-3

Setting Property
Objek
Form1

Properti
Nama
Caption
Frame1
Name
Caption
Frame2
Name
Caption
Frame3
Name
Caption
PictureBox1
Name
ScaleMode
Label1
Name
Caption
Label2
Name
Caption
TextBox1
Name
Text
TextBox2
Name
Text
Label3
Name
Caption
Label4
Name
Caption
TextBox3
Name
Text
TextBox4
Name
Text
Label5
Name
Caption
ListBox1
Name
CommandButton1 Name
Capton
CommandButton2 Name
Caption

Setting
FrmDDA
AlgoritmaDDA
Frame1
Bidang Gambar
Frame2
Titik Awal
Frame3
Titik Akhir
PicBidangGambar
Pixel
Label1
X0
Label2
Y0
TxtX0
TxtY0
Label3
X1
Label4
Y1
TxtX1
TxtY1
Label5
X_Inc , Y_Inc
ListData
cmdOk
&Ok
cmdCancel
&Cancel

Buat Modul
Buat sebuah modul dengan nama module1
Option Explicit
Public SzeX As Long, SzeY As Long
Public PSzeX As Long, PSzeY As Long
Public PixSze As Long
Public ShowGrid As Boolean
Public PenWidth As Long
Type POINTAPI
X As Long
Y As Long
End Type

56

Grafika Komputer Pertemuan Ke-3

Declare Function CreatePen Lib "gdi32" (ByVal nPenStyle As Long, ByVal nWidth As Long, ByVal crColor As
Long) As Long
Declare Function CreateSolidBrush Lib "gdi32" (ByVal crColor As Long) As Long
Declare Function SelectObject Lib "gdi32" (ByVal hdc As Long, ByVal hObject As Long) As Long
Declare Function DeleteObject Lib "gdi32" (ByVal hObject As Long) As Long
Declare Function Rectangle Lib "gdi32" (ByVal hdc As Long, ByVal X1 As Long, ByVal Y1 As Long, ByVal
X2 As Long, ByVal Y2 As Long) As Long
Declare Function LineTo Lib "gdi32" (ByVal hdc As Long, ByVal X As Long, ByVal Y As Long) As Long
Declare Function MoveToEx Lib "gdi32" (ByVal hdc As Long, ByVal X As Long, ByVal Y As Long, lpPoint
As POINTAPI) As Long
Public Sub APIline(hdc As Long, PenType As Long, BorderW As Long, BorderKl As Long, _
iX1 As Long, iY1 As Long, iX2 As Long, iY2 As Long)
Dim Pt As POINTAPI
Dim hPn As Long, hPnOld As Long
hPn = CreatePen(PenType, BorderW, BorderKl Xor &H1000000)
hPnOld = SelectObject(hdc, hPn)
MoveToEx hdc, iX1, iY1, Pt
LineTo hdc, iX2, iY2
SelectObject hdc, hPnOld
DeleteObject hPn
End Sub
Public Sub APIrect(hdc As Long, BorderW As Long, BorderKl As Long, FillKl As Long, _
iX1 As Long, iY1 As Long, iX2 As Long, iY2 As Long)
Dim hPn As Long, hPnOld As Long
Dim hBr As Long, hBrOld As Long
hPn = CreatePen(0, BorderW, BorderKl Xor &H1000000)
hPnOld = SelectObject(hdc, hPn)
hBr = CreateSolidBrush(FillKl Xor &H1000000)
hBrOld = SelectObject(hdc, hBr)
Rectangle hdc, iX1, iY1, iX2, iY2
SelectObject hdc, hBrOld
DeleteObject hBr
SelectObject hdc, hPnOld
DeleteObject hPn
End Sub
Program garis DDA
Option Explicit
Dim Loading As Boolean
Dim CurCol As Long
' current color = pallet ID
Dim prSzeX As Long
Dim prSzeY As Long
Private Sub GambarPixel(X As Long, Y As Long, Color As Long)
Dim eX1 As Long, eY1 As Long
Dim eX2 As Long, eY2 As Long
If PenWidth = 1 Then
eX1 = X * PixSze
eY1 = Y * PixSze
eX2 = (X + 1) * PixSze

57

Grafika Komputer Pertemuan Ke-3

eY2 = (Y + 1) * PixSze
APIrect BidangGambar.hdc, 0, 8, Color, eX1, eY1, eX2, eY2
Else
eX1 = (X - PenWidth \ 2) * PixSze
eY1 = (Y - PenWidth \ 2) * PixSze
If PenWidth = 3 Or PenWidth = 5 Then
eX2 = (X + PenWidth \ 2 + 1) * PixSze
eY2 = (Y + PenWidth \ 2 + 1) * PixSze
Else
eX2 = (X + PenWidth \ 2) * PixSze
eY2 = (Y + PenWidth \ 2) * PixSze
End If
APIrect BidangGambar.hdc, 0, Color, Color, eX1, eY1, eX2, eY2
End If
BidangGambar.Refresh
End Sub
'membuat grid lines
Private Sub GambarGrid()
Dim I As Long
Dim J As Long
For I = 0 To SzeY - 1
APIline BidangGambar.hdc, 0, 0, 8, 0, I * PixSze, SzeX * PixSze, I * PixSze
Next I
For I = 0 To SzeX - 1
For J = 5 To SzeX Step 5
BidangGambar.ForeColor = vbRed
APIline BidangGambar.hdc, 0, 0, vbBlue, J * PixSze, 0, J * PixSze, SzeY * PixSze
Next J
APIline BidangGambar.hdc, 0, 0, 8, I * PixSze, 0, I * PixSze, SzeY * PixSze
Next I
For J = 5 To SzeY Step 5
BidangGambar.ForeColor = vbRed
APIline BidangGambar.hdc, 0, 1, vbGreen, 0, J * PixSze, SzeX * PixSze, J * PixSze
Next J
End Sub
'menampilkan grid lines pada bidang gamar
Private Sub PixelKecilKeBesar()
If ShowGrid Then GambarGrid
BidangGambar.Refresh
End Sub
Private Sub cmdGambar_Click()
Dim dX, dY, k As Integer
Dim XIncrement, YIncrement, X, Y As Variant
Dim Steps As Single
'Bersihkan bidang gambar
BidangGambar.Cls
PixelKecilKeBesar
ListView1.ListItems.Clear
Loading = False
PenWidth = Val(scrollTebalGaris.Value) 'atur ketebalan garis
'Hitung Dx dan Dy

58

Grafika Komputer Pertemuan Ke-3

dX = Val(txtX1.Text) - Val(txtX0.Text)
dY = Val(txtY1.Text) - Val(txtY0.Text)
'Cari nilai steps
If Abs(dX) > Abs(dY) Then
Steps = Abs(dX)
Else
Steps = Abs(dY)
End If
'Hitung XIncrement dan YIncrement
XIncrement = dX / Steps
YIncrement = dY / Steps
X = Val(txtX0.Text)
Y = Val(txtX0.Text)
'Hidupkan pixel pada posisi x,y
GambarPixel Round(X), Round(Y), CurCol
ListView1.ListItems.Add , , "-"
ListView1.ListItems(ListView1.ListItems.Count).SubItems(1) = "-"
ListView1.ListItems(ListView1.ListItems.Count).SubItems(2) = "-"
ListView1.ListItems(ListView1.ListItems.Count).SubItems(3) = Round(X)
ListView1.ListItems(ListView1.ListItems.Count).SubItems(4) = Round(Y)
For k = 1 To Steps
X = X + XIncrement
Y = Y + YIncrement
'Hidupkan pixel pada posisi x + xIncremen,y + yIncrement
GambarPixel Round(X), Round(Y), CurCol
ListView1.ListItems.Add , , k
ListView1.ListItems(ListView1.ListItems.Count).SubItems(1) = X
ListView1.ListItems(ListView1.ListItems.Count).SubItems(2) = Y
ListView1.ListItems(ListView1.ListItems.Count).SubItems(3) = Round(X)
ListView1.ListItems(ListView1.ListItems.Count).SubItems(4) = Round(Y)
Next k
End Sub
Private Sub cmdKeluar_Click()
Unload Me
End Sub
Private Sub Form_Activate()
If Loading = True Then
PixelKecilKeBesar
Loading = False
End If
End Sub
Private Sub Form_Load()
'Menampilkan data di list view
Call ListView1.ColumnHeaders.Add(, , "k", 300)
Call ListView1.ColumnHeaders.Add(, , "X", 700)
Call ListView1.ColumnHeaders.Add(, , "Y", 700)
Call ListView1.ColumnHeaders.Add(, , "Xk+1", 600)
Call ListView1.ColumnHeaders.Add(, , "Yk+1", 600)
ListView1.ListItems.Clear
Loading = True

59

Grafika Komputer Pertemuan Ke-3

PixSze = 8
SzeX = 128: SzeY = 64: prSzeX = 127: prSzeY = 63
PSzeX = 8: PSzeY = 8
ShowGrid = True
PenWidth = 1 'atur ketebalan garis
End Sub
'Untuk mendapatkan nilai posisi kursor di koordinat x,y
Private Sub BidangGambar_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
lblX.Caption = (X \ PixSze)
lblY.Caption = (Y \ PixSze)
End Sub
Private Sub scrollTebalGaris_Change()
TebalGaris.BorderWidth = scrollTebalGaris.Value
End Sub
End Sub

Tugas Buatlah Program pembentuk garis menggunakan algoritma

Bresenham.

60