Makalah Grafika UTS

8/9/2019 Makalah Grafika UTS

http://slidepdf.com/reader/full/makalah-grafika-uts 1/26

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 vertikalWarna : 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 | P a g e



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 = X27. 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


2 | P a g e



• 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 DimensiMuhammad Furqan. Q. Ts. – TI0801029

3 | P a g e



• 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.


4 | P a g e



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.


5 | P a g e



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


6 | P a g e



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 | P a g e



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.


8 | P a g e



• 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


9 | P a g e



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

http://www.facebook.com/photo.php?pid=157417&op=1&view=all&subj=397176404804&aid=-1&auser=0&oid=397176404804&id=100000619712636



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


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 <> "" Thenreset_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


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


13 | P a g e




Warna Garis Diganti + Area Gambar Diarsir

Buat Lingkaran


14 | P a g e





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

Gambar Garis


15 | P a g e





Gambar SegiTiga

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


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


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()


18 | P a g e



Picture21.FillStyle = 0

Picture21.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


Form2.areas.ForeColor = &H80000012



Arsir

End Sub


19 | P a g e




Form2.areas.ForeColor = &H80FF&



Arsir

End Sub


Form2.areas.ForeColor = &H8000000E



Arsir

End Sub


Form2.areas.ForeColor = &H40C0&



Arsir

End Sub


Form2.areas.ForeColor = &H80C0FF


Form2.areas.FontSize = 200Arsir

End Sub


Form2.areas.ForeColor = &HFF00FF




20 | P a g e



Arsir

End Sub


Form2.areas.ForeColor = &HFFFF&



Arsir

End Sub


Form2.areas.ForeColor = &HC0C0&



Arsir

End Sub


Form2.areas.ForeColor = &HFF00&



Arsir

End Sub

Private Sub Picture11_click()Form2.areas.ForeColor = &HFF8080



Arsir

End Sub



21 | P a g e



Form2.areas.ForeColor = &HC0FFFF



Arsir

End Sub



Form2.areas.FillStyle = 0

Arsir

End Sub




Arsir

End Sub




Arsir

End Sub

Private Sub Picture24_click()Form2.areas.FillColor = Form2.areas.ForeColor


Arsir

End Sub




22 | P a g e




Arsir

End Sub




Arsir

End Sub




Arsir

End Sub




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


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 = dyx2 = 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


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)



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


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


26 | P a g e

Makalah Grafika UTS

Documents

Transcript of Makalah Grafika UTS