BAB-3 ATRIBUT PRIMITIF 2D

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*6–7=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

Y

Digambar pada sumbu cartesian

16

10

B(17,16)

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

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