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 (X
0,Y
0) dan titik akhir (X
1,Y
1).
3.
Hitung Dx dan D
yD
x= X
1-X
0dan
D
y= Y
1– Y
04.
Bandingkan Abs(D
x) dan Abs(D
y)
Jika Abs(D
x) > Abs(D
y) maka
Steps = Abs(D
x) bila tidak Steps = Abs(D
y)
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 = X
1, Y = Y
1DDA (bahasa pascal)
Procedure DDA;
Begin
Write(‘Masukkan Nilai X0 : ‘);
Readln(X0);
Write(‘Masukkan Nilai Y0 : ‘);
Readln(Y0);
Write(‘Masukkan Nilai X1 : ‘);
Readln(X1);
Write(‘Masukkan Nilai Y1 : ‘);
Readln(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;
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)
D
x= (X
1-X
0)
(17-10) = 7
D
y= (Y
1-Y
0)
(16-10) = 6
Abs(D
x) = Abs(7) = 7
Abs(D
y) = Abs(6) = 6
Abs(D
x) > Abs(D
y) maka Step = Abs(D
x) = 7
Xincrement = Dx / Step
= 7 / 7 = 1
Yincrement = Dy / Step
= 6 / 7 = 0,86
K
X
Y
Xinc Yinc
-
-
-
10
10
0
11
10,86
11
11
1
12
11,71
12
12
2
13
12,57
13
13
3
14
13,43
14
14
4
15
14,28
15
14
5
16
15,14
16
15
6
17
16
17
16
Y
16 B(17,16)
10 A(10,10)
10 17
X
Gambar 3.1. Digambar pada sumbu cartesian
Digambar Pada Layar Monitor
x
y
Gambar 3.2. Coordinat monitor
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 (x
0,y
0) dan titik lainnya
sebgai titik akhir (x
1,y
1).
3.
Hitung d
x,d
y,2
dxdan 2
dy-2
dx.
4.
Hitung parameter P
0= 2
dy-d
x5.
Untuk setiap X
ksepanjang jalur garis, dimulai dengan k=0,
-
bila p
k<0, maka titik selanjutnya adalah (x
k+1, y
k), dan P
k+1= P
k+2
dy-
bila tidak, maka titik selanjutnya adalah (x
k+1,y
k+1), dan P
k+1= P
k+2
dy-2
dx6.
Ulangi langkah no 5 untuk menentukan posisi pixel selanjutnya,
sampai x = x
1dan y = y
1.
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
= 2 * dy - dx
= 2 * 6 – 7 = 5
twody
= 2 * dy
= 2 * 6 = 12
twodydx
= 2 * (dy – dx )
= 2 * ( 6 – 7 ) = -2
Periksa xa dan xb
xa = 10 < xb = 17
Maka
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
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 = x
1dan y = y
1Masukkan nilai kedalam tabel, seperti pada tabel 3.2.
Tabel 3.2.Hasil penelusuran dengan bressenham
K
P
k(X
k+1, Y
k+1)
-
-
10,10
0
3
11,11
1
1
12,12
2
-1
13,13
3
11
14,13
4
9
15,14
5
7
16,15
6
5
17,16
Y
Digambar pada sumbu cartesian
16 B(17,16)
10 A(10,10)
10 17
x
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
Setting Property
Objek
Properti
Setting
Form1
Nama
Caption
FrmDDA
AlgoritmaDDA
Frame1
Name
Caption
Frame1
Bidang Gambar
Frame2
Name
Caption
Frame2
Titik Awal
Frame3
Name
Caption
Frame3
Titik Akhir
PictureBox1
Name
ScaleMode
PicBidangGambar
Pixel
Label1
Name
Caption
Label1
X0
Label2
Name
Caption
Label2
Y0
TextBox1
Name
Text
TxtX0
TextBox2
Name
Text
TxtY0
Label3
Name
Caption
Label3
X1
Label4
Name
Caption
Label4
Y1
TextBox3
Name
Text
TxtX1
TextBox4
Name
Text
TxtY1
Label5
Name
Caption
Label5
X_Inc , Y_Inc
ListBox1
Name
ListData
CommandButton1 Name
Capton
cmdOk
&Ok
CommandButton2 Name
Caption
cmdCancel
&Cancel
Buat Modul
Buat sebuah modul dengan nama module1
Option ExplicitPublic 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
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
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
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
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
