BAB I

DASAR TEORI

I. Titik(Pixel)
Titik merupakan satuan gambar/grafis yang terkecil. Dengan menggambar
titik maka kita dapat menggambar obyek apapun. Termasuk bentuk geometri
dibawah merupakan bentuk –bentuk yang pada dasarnya berasal dari titik-
titik. Operasi titik ini sering digunakan pada pengolahan citra (
Image processing). Setiap titik pada monitor memiliki parameter :koordinat
dan warna.
Kode untuk menggambar titik :
Canvas-> Pixels[x][y] = warna
Dengan
x : koordinat mendatar
y : koordinat vertikal
Warna : warna pixel
Contoh : Picture0.Line (x1, y1)-Step(x2, y2), vbBlue

Pembuatan Garis / Line Algoritma DDA

1. Menghitung panjang X dan Y
2. Menentukan X1,Y1 sebagai awal Garis (X2,Y2 dianggap sebagai akhir
garis)
3. Periksa apakah Dy + Dy <> 0 (jika ya maka tidak bisa dibuat kotak)
4. Menghitung apakah Dx lebih besar dari Dy (menentukan Dx atau Dy yang
akan dibagi)
a. Jika Dx > Dy
Koordinat X ditambah 1
Koordinat Y=Dy / Dx
Jumlah pemanggilan pixel sebanyak Dx kali

Muhammad Furqan. Q. Ts. – TI0801029

1|Page
 b. Jika Dx tidak lebih besar dari Dy
Koordinat Y ditambah 1
Koordinat X =Dx / Dy
Jumlah pemanggilan pixel sebanyak Dy kali
c. Cek apakah X bernilai negatif, jika ya arah penambahan X harus negatif
(garis dari kiri kekanan)
d. Cek apakah Y bernilai negatif, jika ya arah penambahan Y harus negatif
(garis dari kiri kekanan)
e. Letakkan Titik Pertama kali
f. Meletakkan Titik sebanyak Loop
Algoritma Bresenham
1. Tentukan 2 buah titik yang akan dihubungkan dengan garis
2. Tentukan salah satu titik disebelah kiri sebagai titik awal = (X1,Y1) dan
titik lainnya (X2,Y2) sebagai titik akhir
3. Hitung Dx, Dy, 2Dx dan 2Dy –2Dx
4. Hitung parameter
Po= 2Dy – Dx
5. Jika X1 > X2 Maka tentukan
• X=X2
• Y=Y2
• Xahir = X1
6. Jika tidak tentukan
• X=X1
• Y=Y1
• Xahir = X2
7. Tentukan titik pertama pada posisi X,Y
8. Selama X < Xahir
• X=X+1
• Jika Po < 0 maka tentukan Po=TwoDy
• Jika tidak tentukan
• Y=Y+1
• Po=TwoDyDx

Muhammad Furqan. Q. Ts. – TI0801029

2|Page
 • Letakkan titk pada posisi X,Y
Pembuatan Lingkaran
Titik diletakkan dengan rumus parametrik lingkaran
X = R*Cos(Teta) Y = R*Sin(Teta)
(Teta = Sudut 0o ... 359o )
Teta di Looping sebanyak 0 s/d 1440
(bukan berarti 0 s/d 1440 derajat)
Perhatikan penggunaan pada Cos dan Sin adalah
Teta * Pi / 720
⇒ 1440 * Pi / 720
⇒ 2 * Pi
⇒ 360
Kenapa tidak 0 s/d 360, karena jika lingkaran besar akan mengakibatkan titik
lingkaran jarang-jarang / tidak rapat.
II. Transformasi 2D

Grafika computer merupakan bidang yang menarik minat banyak orang. Salah
satu sub bagian dari grafika adalah pemodelan objek. Dalam pemodelan objek
2D, berbagai objek dimodifikasi dengan melakukan berbagai operasi fungsi
atau operasi transformasi geometri. Transformasi ini dapat berupa
transformasi dasar ataupun gabungan dari berbagai transformasi geometri.
Transformasi ini dikenal dengan Transformasi affine. Pada dasarnya,
transformasi merupakan suatu operasi modifikasi bentuk objek tanpa
merusak bentuk dasar dari objek. Salah satu contoh transformasi adalah
transformasi dari window ke viewport.

Pada Viewport, Objek yang akan digambar pada layar biasanya mempunyai
ukuran yang jauh lebih besar dibanding dengan ukuran layar, sehingga perlu
dilakukan pemetaan transformasi yang memungkinkan objek tersebut bisa
seluruhnya digambar dilayar, tetapi pada layar dengan koordinat yang
terbatas, dan biasanya dibatasi oleh sebuah kotak yang disebut windows,
sedangkan layarnya tersebut disebut Viewport.

Langkah-Langkah Transformasi Viewing 2 Dimensi

Muhammad Furqan. Q. Ts. – TI0801029
3|Page
• Pembentukan scene pada WC menggunakan output primitif atribut.
• Untuk mendapatkan orientasi tertentu dari window, maka ditentukan
sistem VC 2 dimensi pada WC. Frame digunakan untuk melengkapi
penentuan orientasi dari windows persegi empat . Setelah frame dibentuk
dapat ditransformasikan ke dalam WC untuk menampilkan koordinat.
• Kemudian viewport ditentukan dalam normalized NVC (pada batasan
antara 0 dan 1) dan memetakan deskripsi VC dari scene pada Normalized
Coordinate.
• Akhirnya dilakukan clipping (pemotongan) pada semua gambar yang ada
diluar viewport.

Macam-macam transformasi:

• Transformasi Objek, yang ditransformasikan titik-titik yang menyusun

objek tersebut.
• Transformasi Koordinat, yang diubah system koordinatnya sehingga objek
mengalami transformasi dikarenakan perubahan system koordinat tersebut.

Tujuan Transformasi :

• Merubah atau menyesuaikan komposisi pandangan.

• Memudahkan membuat objek yang simetris
• Melihat objek dari sudut pandang berbeda
• Memindahkan satu atau beberapa objek dari satu tempat ke tempat
lain, biasanya digunakan pada animasi computer.

Transformasi dasar pada objek dua dimensi terdiri dari :

TRANSLASI

Translasi merupakan suatu proses yang menyebabkan perpindahan

objek dari satu titik ke titik lain. Translasi dilakukan dengan
penambahan translasi pada suatu titik koordinat dengan translasi vector
yaitu (trx,try), dimana trx adalah translation vector menurut sumbu x
sedangkan try adalah translasi vector terhadap sumbu y.

Muhammad Furqan. Q. Ts. – TI0801029

4|Page
Koordinat baru titik yang ditranslasi dapat diperoleh dengan
menggunakan rumus:

x ’ = x + trx

y ‘ = y + try

Dimana (x,y) adalah koordinat asal suatu objek dan (x’,y’) adalah
koordinat baru objek tersebut setelah ditranslasi.Translasi adalah
transformasi dengan bentuk yang tetap memindahkan objek apa
adanya. Dengan demikian setiap titik dari objek akan ditranslasi
dengan besaran yang sama.

Transformasi Dasar

• Translasi
Translasi dilakukan dengan penambahan translasi pada suatu titik
koordinat dengan translation vector atau shift vector, yaitu(tx, ty).
Koordinat baru titik yang ditranslasi dapat diperoleh dengan
menggunakan rumus
x’ = x +tx
y’ = y+ty
translasi adalah transfomasi dengan bentuk yang tetap
memindahkan objek apa adanya.
Titik yang akan ditranslasi akan dipindahkan ke lokasi lain menurut
garis lurus.
• Penskalaan
Transformasi skala adalah perubahan ukuran suatu objek.
Koordinat baru diperoleh dengan melakukan perkalian koordinat
dengan ascling factor, yaitu(sx,sy) dimana sx adalah scaling facor
untuk sumbu x dam sy adalah scaling factor untuk sumbu y.
koordinat baru titik yang diskala dapat diperoleh dengan
x’ = x.sx
y’= y.sy
scaling factor sx dan sy dapat diberikan sembarang nilai positif.

Muhammad Furqan. Q. Ts. – TI0801029

5|Page
 Nilai lebih dari 1 menandakan bahwa sebuah objek diperbesar
sedang nilai nilai kurang dari 1
menunjukkan bahwa objek diperkecil.

BAB II
PEMBAHASAN PROGRAM PEMBUAT APLIKASI

Muhammad Furqan. Q. Ts. – TI0801029

6|Page
Salah satu cara untuk mengaktifkan IDE Visual Basic adalah menjalankannya dari
Menu Start, pilih menu Command, dan pilih Microsoft Visual Basic 6.0 dan
akhirnya Microsoft Visual Basic 6.0.

Sesaat anda aktif di IDE Visual Basic, maka anda akan dihadapkan kepada suatu
pilihan terhadap jenis Project yang ingin anda buat sebagaimana yang ditunjukan
oleh Gambar 1-2.
Sebagai langkah awal dari proses belajar adalah memilih project Standard EXE.

IDE Visual Basic 6 menggunakan model MDI (Multiple Document Interface).

Berikut ini adalah gambar yang menunjukan bagian-bagian dan nama-nama
jendela yang dapat tampil pada IDE Visual Basic. Mungkin pada IDE anda hanya
ditampilkan sebagian jendela dibandingkan dengan Gambar 1-3 anda tidak perlu
terkejut, karena penampilan dari jendela-jendela tersebut dapat diatur dengan
perintah pada menu View.
Muhammad Furqan. Q. Ts. – TI0801029
7|Page
Sebagai langkah awal dari proses belajar, tidak semua jendela akan kita gunakan,
tetapi hanya beberapa yang penting, sedangkan yang lainnya bersifat khusus.

Sebagaimana dengan proses belajar ini, kita akan fokus pada beberapa jendela
yang penting terlebih dahulu sehingga konsentrasi tidak menjadi pecah, dan
peserta belajar menjadi bingung. Adapun jendela-jendela yang perlu anda
perhatikan adalah sebagai berikut :
• Menu Bar, digunakan untuk memilih tugas-tugas tertentu seperti
menyimpan project, membuka project, dll
• Main Toolbar, digunakan untuk melakukan tugas-tugas tertentu dengan
cepat.

Muhammad Furqan. Q. Ts. – TI0801029

8|Page
 • Jendela Project, jendela ini berisi gambaran dari semua modul yang
terdapat dalam aplikasi anda. Anda dapat menggunakan icon Toggle
Folders untuk menampilkan modul-modul dalam jendela tersebut secara di
group atau berurut berdasarkan nama. Anda dapat menggunakan Ctrl+R
untuk menampilkan jendela project, ataupun menggunakan icon Project
Explorer.
• Jendela Form Designer, jendela ini merupakan tempat anda untuk
merancang user interface dari aplikasi anda. Jadi jendela ini menyerupai
kanvas bagi seorang pelukis.
• Jendela Toolbox, jendela ini berisi komponen-komponen yang dapat anda
gunakan untuk mengembangkan user interface.
• Jendela Code, merupakan tempat bagi anda untuk menulis koding. Anda
dapat menampilkan jendela ini dengan menggunakan kombinasi Shift-F7.
• Jendela Properties, merupakan daftar properti-properti object yang sedang
terpilih. Sebagai contohnya anda dapat mengubah warna tulisan
(foreground) dan warna latarbelakang (background). Anda dapat
menggunakan F4 untuk menampilkan jendela properti.
• Jendela Color Palette, adalah fasilitas cepat untuk mengubah warna suatu
object.
• Jendela Form Layout, akan menunjukan bagaimana form bersangkutan
ditampilkan ketika runtime.

BAB III
PEMBUATAN APLIKASI PENGOLAHAN CITRA DAN HASIL
OUTPUT

Muhammad Furqan. Q. Ts. – TI0801029

9|Page
 Menu Utama

Option Explicit
Dim x1, x2, y1, y2, y3, x3, z1, z2, r, X, Y, L, dx, dy As Integer

Private Sub Form_Load()

Tombol_arsir_Click
End Sub

Private Sub Form_Unload(Cancel As Integer)

End
End Sub

Sub reset_kotak()
txt_x1.Text = ""
Muhammad Furqan. Q. Ts. – TI0801029
10 | P a g e
txt_x2.Text = ""
txt_y1.Text = ""
txt_y2.Text = ""
End Sub

Sub reset_lingkaran()
txt_r.Text = ""
txt_x.Text = ""
txt_y.Text = ""
End Sub

Sub reset_garis()
txt_x11.Text = ""
txt_x22.Text = ""
txt_y11.Text = ""
txt_y22.Text = ""
End Sub

Sub reset_segitiga()
txt_x111.Text = ""
txt_y111.Text = ""
txt_x222.Text = ""
txt_y222.Text = ""
txt_x333.Text = ""
txt_y333.Text = ""
End Sub

Private Sub Tombol_Reset_Click()

Form2.areas.Cls
reset_lingkaran
reset_kotak
reset_segitiga

Muhammad Furqan. Q. Ts. – TI0801029

11 | P a g e
reset_garis
Form2.areas.Width = Form2.Width
Form2.areas.Height = Form2.Height
End Sub

Sub Arsir()
Form2.areas.Cls
If Form2.areas.FillColor <> Form2.areas.ForeColor Then
Form2.areas.FillColor = Form2.areas.ForeColor
End If
If txt_x1.Text <> "" Or txt_x2.Text <> "" Or txt_y1.Text <> "" Or txt_y2.Text <>
"" Then
reset_lingkaran
reset_garis
reset_segitiga
Call Tombol_Kotak_Click
Else
If txt_r.Text <> "" Or txt_x.Text <> "" Or txt_y.Text <> "" Then
reset_kotak
reset_garis
reset_segitiga
Call Tombol_Lingkaran_Click
Else
If txt_x11.Text <> "" Or txt_x22.Text <> "" Or txt_y11.Text <> "" Or
txt_y22.Text <> "" Then
reset_lingkaran
reset_kotak
reset_segitiga
Call Tombol_Garis_Click
Else
If txt_x111.Text <> "" Or txt_y111.Text <> "" Or txt_x222.Text <> "" Or
txt_y222.Text <> "" Or txt_x333.Text <> "" Or txt_y333.Text <> "" Then

Muhammad Furqan. Q. Ts. – TI0801029

12 | P a g e
reset_lingkaran
reset_kotak
reset_garis
Call Tombol_Segitiga_Click
Else
Exit Sub
End If
End If
End If
End If
End Sub

Menu Utama + Layar Gambar

Muhammad Furqan. Q. Ts. – TI0801029

13 | P a g e
Warna Garis Diganti + Area Gambar Diarsir

Buat Lingkaran

Muhammad Furqan. Q. Ts. – TI0801029

14 | P a g e
Gambar Lingkaran Dipindah Ke Kordinat Baru Lewat Mouse Click Di Area Gambar

Gambar Garis

Muhammad Furqan. Q. Ts. – TI0801029

15 | P a g e
 Gambar SegiTiga

Gambar SegiTiga Dipindah Ke Kordinat Baru Lewat Mouse Click Di Area Gambar

Muhammad Furqan. Q. Ts. – TI0801029

16 | P a g e
Private Sub Tombol_Kotak_Click()
Form2.areas.Cls
If txt_x1.Text = "" Or txt_x2.Text = "" Or txt_y1.Text = "" Or txt_y2.Text = ""
Then
Exit Sub
Else
Form2.Show
x1 = txt_x1.Text
y1 = txt_y1.Text
x2 = txt_x2.Text
y2 = txt_y2.Text
Form2.areas.Line (x1, y1)-Step(x2, y2), , B
End If
End Sub

Private Sub Tombol_Lingkaran_Click()

Form2.areas.Cls
If txt_r.Text = "" Or txt_x.Text = "" Or txt_y.Text = "" Then
Exit Sub
Else
Form2.Show
r = txt_r.Text
X = txt_x.Text
Y = txt_y.Text
Form2.areas.Circle (X, Y), r
End If
End Sub

Private Sub Tombol_Garis_Click()

Form2.areas.Cls
If txt_x11.Text = "" Or txt_x22.Text = "" Or txt_y11.Text = "" Or txt_y22.Text =
"" Then

Muhammad Furqan. Q. Ts. – TI0801029

17 | P a g e
Exit Sub
Else
Form2.Show
x1 = txt_x11.Text
y1 = txt_y11.Text
x2 = txt_x22.Text
y2 = txt_y22.Text
Form2.areas.Line (x1, y1)-Step(x2, y2)
End If
End Sub

Private Sub Tombol_Segitiga_Click()

Form2.areas.Cls
If txt_x111.Text = "" Or txt_y111.Text = "" Or txt_x222.Text = "" Or
txt_y222.Text = "" Or txt_x333.Text = "" Or txt_y333.Text = "" Then
Exit Sub
Else
Form2.Show
x1 = txt_x111.Text
y1 = txt_y111.Text
x2 = txt_x222.Text
y2 = txt_y222.Text
x3 = txt_x333.Text
y3 = txt_y333.Text
Form2.areas.PSet (x1, y1)
Form2.areas.Line -(x2, y2)
Form2.areas.Line -(x3, y3)
Form2.areas.Line -(x1, y1)
End If
End Sub

Sub Tombol_arsir_Click()

Muhammad Furqan. Q. Ts. – TI0801029

18 | P a g e
Picture21.FillStyle = 0
Picture21.Line (0, 0)-Step(500, 210), , B
Picture22.FillStyle = 1
Picture22.Line (0, 0)-Step(500, 210), , B
Picture23.FillStyle = 2
Picture23.Line (0, 0)-Step(500, 210), , B
Picture24.FillStyle = 3
Picture24.Line (0, 0)-Step(500, 210), , B
Picture25.FillStyle = 4
Picture25.Line (0, 0)-Step(500, 210), , B
Picture26.FillStyle = 5
Picture26.Line (0, 0)-Step(500, 210), , B
Picture27.FillStyle = 6
Picture27.Line (0, 0)-Step(500, 210), , B
Picture28.FillStyle = 7
Picture28.Line (0, 0)-Step(500, 210), , B
End Sub

Private Sub Picture1_click()

Form2.areas.ForeColor = &HFF0000
Form2.areas.FontBold = True
Form2.areas.FontSize = 200
Arsir
End Sub

Private Sub Picture2_click()

Form2.areas.ForeColor = &H80000012
Form2.areas.FontBold = True
Form2.areas.FontSize = 200
Arsir
End Sub

Muhammad Furqan. Q. Ts. – TI0801029

19 | P a g e
Private Sub Picture3_click()
Form2.areas.ForeColor = &H80FF&
Form2.areas.FontBold = True
Form2.areas.FontSize = 200
Arsir
End Sub

Private Sub Picture4_click()

Form2.areas.ForeColor = &H8000000E
Form2.areas.FontBold = True
Form2.areas.FontSize = 200
Arsir
End Sub

Private Sub Picture5_click()

Form2.areas.ForeColor = &H40C0&
Form2.areas.FontBold = True
Form2.areas.FontSize = 200
Arsir
End Sub

Private Sub Picture6_click()

Form2.areas.ForeColor = &H80C0FF
Form2.areas.FontBold = True
Form2.areas.FontSize = 200
Arsir
End Sub

Private Sub Picture7_click()

Form2.areas.ForeColor = &HFF00FF
Form2.areas.FontBold = True
Form2.areas.FontSize = 200

Muhammad Furqan. Q. Ts. – TI0801029

20 | P a g e
Arsir
End Sub

Private Sub Picture8_click()

Form2.areas.ForeColor = &HFFFF&
Form2.areas.FontBold = True
Form2.areas.FontSize = 200
Arsir
End Sub

Private Sub Picture9_click()

Form2.areas.ForeColor = &HC0C0&
Form2.areas.FontBold = True
Form2.areas.FontSize = 200
Arsir
End Sub

Private Sub Picture10_click()

Form2.areas.ForeColor = &HFF00&
Form2.areas.FontBold = True
Form2.areas.FontSize = 200
Arsir
End Sub

Private Sub Picture11_click()

Form2.areas.ForeColor = &HFF8080
Form2.areas.FontBold = True
Form2.areas.FontSize = 200
Arsir
End Sub

Private Sub Picture12_click()

Muhammad Furqan. Q. Ts. – TI0801029

21 | P a g e
Form2.areas.ForeColor = &HC0FFFF
Form2.areas.FontBold = True
Form2.areas.FontSize = 200
Arsir
End Sub

Private Sub Picture21_click()

Form2.areas.FillColor = Form2.areas.ForeColor
Form2.areas.FillStyle = 0
Arsir
End Sub

Private Sub Picture22_click()

Form2.areas.FillColor = Form2.areas.ForeColor
Form2.areas.FillStyle = 1
Arsir
End Sub

Private Sub Picture23_click()

Form2.areas.FillColor = Form2.areas.ForeColor
Form2.areas.FillStyle = 2
Arsir
End Sub

Private Sub Picture24_click()

Form2.areas.FillColor = Form2.areas.ForeColor
Form2.areas.FillStyle = 3
Arsir
End Sub

Private Sub Picture25_click()

Form2.areas.FillColor = Form2.areas.ForeColor

Muhammad Furqan. Q. Ts. – TI0801029

22 | P a g e
Form2.areas.FillStyle = 4
Arsir
End Sub

Private Sub Picture26_click()

Form2.areas.FillColor = Form2.areas.ForeColor
Form2.areas.FillStyle = 5
Arsir
End Sub

Private Sub Picture27_click()

Form2.areas.FillColor = Form2.areas.ForeColor
Form2.areas.FillStyle = 6
Arsir
End Sub

Private Sub Picture28_click()

Form2.areas.FillColor = Form2.areas.ForeColor
Form2.areas.FillStyle = 7
Arsir
End Sub

========================================================
Form 2
========================================================

Option Explicit
Dim x1, x2, y1, y2, y3, x3, z1, z2, r, X, Y, L, dx, dy As Integer

Private Sub areas_MouseDown(Button As Integer, Shift As Integer, X As Single,

Y As Single)
dx = X

Muhammad Furqan. Q. Ts. – TI0801029

23 | P a g e
dy = Y
kordinat.Caption = "Titik kordinat mouse " & (dx) & ", " & (dx)

areas.Cls
If Form1.txt_x1.Text <> "" Or Form1.txt_x2.Text <> "" Or Form1.txt_y1.Text <>
"" Or Form1.txt_y2.Text <> "" Then
x1 = dx
y1 = dy
x2 = Form1.txt_x2.Text
y2 = Form1.txt_y2.Text
areas.Line (x1, y1)-Step(x2, y2), , B
Else

If Form1.txt_r.Text <> "" Or Form1.txt_x.Text <> "" Or Form1.txt_y.Text <> ""

Then
r = Form1.txt_r.Text
X = dx
Y = dy
areas.Circle (X, Y), r
Else

If Form1.txt_x11.Text <> "" Or Form1.txt_x22.Text <> "" Or

Form1.txt_y11.Text <> "" Or Form1.txt_y22.Text <> "" Then
x1 = dx
y1 = dy
x2 = Form1.txt_x22.Text
y2 = Form1.txt_y22.Text
areas.Line (x1, y1)-Step(x2, y2)
Else

If Form1.txt_x111.Text <> "" Or Form1.txt_y111.Text <> "" Or

Form1.txt_x222.Text <> "" Or Form1.txt_y222.Text <> "" Or

Muhammad Furqan. Q. Ts. – TI0801029

24 | P a g e
Form1.txt_x333.Text <> "" Or Form1.txt_y333.Text <> "" Then
Form2.Show
x1 = dx
y1 = dy
x2 = Val(Form1.txt_x222.Text) + dx
y2 = Val(Form1.txt_y222.Text) + dy
x3 = Val(Form1.txt_x333.Text) + dx
y3 = Val(Form1.txt_y333.Text) + dy
areas.PSet (x1, y1)
areas.Line -(x2, y2)
areas.Line -(x3, y3)
areas.Line -(x1, y1)
Else
Exit Sub
End If
End If
End If
End If
End Sub

Private Sub areas_MouseMove(Button As Integer, Shift As Integer, X As Single,

Y As Single)
dx = X
dy = Y
kordinat.Caption = "Titik kordinat mouse " & (dx) & ", " & (dx)
End Sub

Private Sub Form_Load()

areas.Width = Form2.Width
areas.Height = Form2.Height
End Sub

Muhammad Furqan. Q. Ts. – TI0801029

25 | P a g e
Private Sub Form_Resize()
Form1.Show
areas.Width = Form2.Width
areas.Height = Form2.Height
End Sub

Private Sub Form_Unload(Cancel As Integer)

Form1.Show
End Sub

Muhammad Furqan. Q. Ts. – TI0801029

26 | P a g e