LAPORAN TUTORIAL

GRAFIKA KOMPUTER

Untuk memenuhi salah satu tugas Mata Kuliah Grafika Komputer

Oleh :
Nama : Faizal Rialnansyah
NPM : 147006029

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK UNIVERSITAS SILIWANGI
KOTA TASIKMALAYA
2017

1. TITIK PIXEL
Percobaan 1 :

Analisis :
Gambar diatas merupakan sebuah form untuk membuat titik pixel. Pada form
diatas ada beberapa komponen yang digunakan yaitu : paintbox, label, edit dan
button. Komponen-komponen ini terdapat pada component pallete. Component
Pallete merupakan kumpulan icon yang digunakan untuk merancang suatu
aplikasi, dimana mereka akan membentuk suatu interface sebuah aplikasi.
Dalam setiap component pallete semua icon dikelompokkan dalam berbagai
komponen sesuai dengan fungsi dan kegunaannya. Pada component pallete kita
akan menemukan beberapa page control, seperti standard, addition, win32,
system, data access, dll. Komponen paintbox terdapat pada page control win32
sedangkan komponen label, edit dan button terdapat pada page control standard.
Komponen yang pertama yaitu Paintbox. Pada form terdapat garis putus-putus,
garis ini merupakan paintbox.
Komponen yang kedua yaitu label. Label hanya berfungsi untuk menampilkan
teks. Koordinat X, Koordinat Y dan Warna merupakan komponen label. Untuk
mengubah nama pada label yaitu dengan menggunakan object inspector. Object
inspector digunakan untuk mengubah properti atau karakteristik dari sebuah
komponen. Pada object inspector terdapat dua buah tab yaitu properties dan
event. Tab properties digunakan untuk mengubah properti komponen.
Sedangkan tab event yaitu bagian yang dapat diisi dengan kode program
tertentu yang berfungsi untuk menangani kejadian-kejadian yang dapat direspon
oleh sebuah component. Untuk mengubah nama / keterangan pada label, klik
label kemudian pada tab properties (object inspector) pilih caption kemudian
masukkan text yang akan ditampilkan dalam label. Begitu juga untuk label
Koordinat Y dan Warna.
Komponen yang ketiga yaitu edit. Edit digunakan untuk menampilkan dan
input data (1 baris). Ada 3 buah edit yang digunakan masing-masing untuk
label Koordinat X, Koordinat Y dan Warna.
Komponen yang keempat yaitu button. Button digunakan untuk melakukan
eksekusi terhadap suatu proses.

Implementasi procedure Button1Click

Analisis :
Gambar diatas merupakan bagian code editor pada delphi yang berisi source
code pada button. terdapat beberapa area dalam source code delphi. Pada source
code diatas terdapat area procedure, var, begin dan end.
Procedure merupakan sub rutin atau kumpulan perintah untuk suatu tujuan
dalam cakupan kecil. Procedure mempunyai area tersendiri yaitu var, begin dan
end. Var merupakan area deklarasi variable lokal procedure.
Deklarasi :
- Pada bagian procedure, TForm1.Button1Click merupakan nama procedure.
Sender merupakan parameter dan TObject merupakan tipe data.
- Pada bagian var, variable yang dimasukkan yaitu x,y,i,j bertipe data integer
dan color dengan tipe data TColor. Begin merupakan tanda awal proses
yang terjadi pada procedure.
- Pada bagian begin, menggunakan pemilihan kondisi if-then dan
pengulangan for to do.
- Perintah TImage.Canvas.Pixels[i,j]:=color; digunakan
untuk mengubah warna pixel pada lokasi i, j.
Untuk mengakhiri proses, perintah yang digunakan yaitu end; (titik koma).

Hasil Percobaan 1

Analisis :
Gambar diatas adalah hasil dari program membuat titik pixel. Untuk
menjalankan program tekan tombol F9. Nilai untuk koordinat x, koordinat y
dan warna diinput secara manual ketika program dijalankan. Nilai untuk
koordinat x yaitu 40, koordinat y yaitu 50 dan warna yaitu 123456. Sehingga
 warna yang keluar dari nilai yang diinputkan yaitu warna hijau.

Percobaan 2 :

Analisis :
Pada gambar diatas terdapat tambahan komponen dari tampilan sebelumnya
yaitu ambil warna dengan menambahkan komponen label dan edit.

Implementasi procedure TImageMouseDown

Analisis :
Pada source code diatas, procedure TForm1.TImageMouseDown memiliki
beberapa parameter dengan tipe data yang berbeda. Parameter sender bertipe
data TObject, parameter Button bertipe data TMouseButton, parameter Shift
bertipe data TShiftState dan parameter X, Y bertipe data Integer. Variabel yang
digunakan yaitu warna dengan tipe data TColor. Pada begin di deklarasikan
 perintah warna:=TImage.Canvas.Pixels[x,y]; yang digunakan
untuk mengambil warna pixel pada lokasi (x,y).

Hasil Percobaan 2

Analisis :
Gambar diatas merupakan hasil percobaan ke 2 dengan menambahkan
komponen Ambil Warna. Nilai yang diinputkan untuk Koordinat X yaitu 50,
Koordinat Y yaitu 50, Warna yaitu 12345 dan Ambil Warna yaitu 3039.
Sehingga warna yang ditampilkan yaitu warna coklat.

1. GARIS
Percobaan 3 :
Analisis :
Pada percobaan ke tiga ini akan membuat program untuk
mengimplementasikan algoritam garis DDA maupun algoritma garis
Bresenham. Pada form diatas terdapat beberapa komponen yang digunakan
yaitu Panel, RadioGroup, Edit, Button, dan Checkbox. Pada RadioGroup yang
pertama yaitu Metode, terdapat 2 buah Radiobutton yaitu DDA dan Bresenham.
Pada RadioGroup yang kedua yaitu Garis, terdapat 4 buah label, 4 buah edit
dan 1 button.

Deklarasi prosedur pada bagian private

Analisis :
Source diatas merupakan deklarasi prosedur pada bagian private. Private
merupakan tanda dimulainya untuk menuliskan nama-nama variable
prosedur/function yang hanya dikenal oleh objeknya sendiri. Terdapat dua buah
variable dan 8 procedure yang dimasukkan pada bagian private. Untuk variable
yaitu variable Area dengan tipe data TRect (Rectangle) dan variable Garis
dengan tipe data TList. Sedangkan untuk procedure yaitu :
- Pada procedure DDA terdapat dua buah parameter yaitu x1,y1,x2,y2 bertipe
data Integer dan parameter Grid bertipe data Boolean.
- Pada procedure Bresenham juga terdapat dua buah parameter yaitu
x1,y1,x2,y2 bertipe data Integer dan parameter Grid bertipe data Boolean.
- Pada procedure PutPixel terdapat dua buah parameter yaitu x,y dan color
masing-masing bertipe data integer dan TColor.
- Pada procedure Swap terdapat parameter t1,t2 dengan tipe data integer.
- Pada procedure PutPixelGrid terdapat parameter x,y dengan tipe data
integer.
- Pada procedure Line terdapat parameter x1,y1,x2,y2 dengan tipe data
integer dan parameter color dengan tipe data TColor.
- Pada procedure DrawGrid terdapat parameter step_x,step_y bertipe data
integer dan parameter color bertipe data TColor.
- Dan pada procedure EraseGrid terdapat parameter step_x dan step_y dengan
tipe data integer.

Implementasi prosedur DDA

Analisis :
Pada prosedur DDA terdapat parameter x1,y1,x2,y2 dengan tipe data integer
dan parameter grid dengan tipe data Boolean. Variable yang digunakan yaitu
step, m, x, y bertipe data real. Pada begin di deklarasikan m = (y2-y1) / (x2-x1).
Jika m > 0 dan m < 1 maka y=y1, step=m dan x=x1. Ketika x <= x2, jika grid
maka eksekusi perintah PutPixelGrid jika tidak maka eksekusi perintah
PutPixel dengan y = y + step dan x = x + 1 kemudian proses berakhir. Jika m >
1 maka x=x1, step=1/m dan y=y1. Ketika y <= y2, jika grid maka eksekusi
perintah PutPixelGrid, jika tidak maka eksekusi perintah PutPixel dengan
x=x+step dan y=y+1 kemudian proses berakhir. Jika m = 1 maka x=x, y=y1.
Ketika x <= x2, jika kondisi (grid) benar maka eksekusi perintah PutPixelGrid,
jika tidak maka eksekusi perintah PutPixel dengan x=x+1 dan y=y+1 kemudian
proses berakhir.
Implementasi prosedur Bresenham
Analisis :
Pada procedure Bresenham, parameter yang digunakan yaitu x1,y1,x2,y2
bertipe data integer dan grid bertipe data Boolean. Variable yang dimasukkan
yaitu p,d1,d2,I,x,y,dx,dy,stop,signx,signy,e bertipe data integer. Kemudian
variable s,signx_s,signy_s bertipe data string dan finish bertipe data Boolean.
Pada begin dideklarasikan perintah sebagai berikut :
- Signx dan signy mempunyai nilai awal 1.
- Variable s bernilai Kuadran 1. Jika x1 > x2 dan y1 < y2 maka variable s
berada di kuadran 2 dengan nilai signx yaitu -1 dan signy yaitu 1. Kondisi
ini untuk mengetest apakah garis ini berada di kuadran 2.
- Kondisi lain yaitu jika x1 > x2 dan y1 > y2 maka variable s berada di
kuadran 3 dengan menukar x1 dengan x2 dan y1 dengan y2. Kondisi ini
untuk mengetest apakah garis ini berada di kuadran 3.
- Kondisi lainnya yaitu jika x1 < x2 dan y1 > y2 maka ubah menjadi kuadran
2 dengan menukar (swap) x1 dengan x2 dan y1 dengan y2, dimana nilai
 signx yaitu -1 dan signy yaitu 1 dan nilai untuk variable s yaitu kuadran 4.
Kondisi ini untuk mengetest apakah garis ini berada di kuadran 4.
- Jika kondisi signx = 1 benar maka signx_s bernilai penjumlahan tetapi jika
kondisi salah maka signx_s bernilai pengurangan.
- Jika kondisi signy = 1 benar maka signy_s bernilai penjumlahan tetapi jika
kondisi salah maka signy_s bernilai pengurangan. Kemudian variable x
bernilai x1, variable y bernilai y1. Rumus untuk mencari dx = abs (x2 – x1)
dan dy = abs (y2 – y1). Jika dx > dy maka jalankan perintah untuk mencari
d1, d2 dan e dan berhenti di x. tetapi jika sebaliknya maka jalankan
perintah untuk mencari e dan berhenti di y.
- Variable i bernilai 1 dimana finish bernilai false. Ketika finish bernilai false
jalankan dua kondisi ini. Jika kondisi benar maka jalankan perintah
PutPixelGrid tetapi jika kondisi salah maka jalankan perintah PutPixel.
- Kondisi ini untuk garis cenderung mendatar. Jika kondisi benar (dx > dy)
maka jalankan perintah untuk mencari nilai e dimana e < 0. Jika kondisi
salah maka jalankan perintah untuk mencari nilai y dan e. Variable x = x +
(signx * 1). Jika x >= x2 maka finish bernilai True. Tetapi jika kondisi salah
maka ada dua kondisi yang akan dijalankan, kondisi yang pertama yaitu jika
e < 0 maka jalankan aksi yang pertama yaitu mencari nilai e tetapi jika
kondisi salah maka jalankan aksi yang kedua yaitu mencari nilai x dan e.
Variable y = y + (signx * 1). Jika y >= y2 maka finish bernilai True.

Implementasi dari prosedur PutPixel

Analisis :
Pada prosedur PutPixelGrid parameter yang digunakan yaitu x dan y dengan
tipe data yaitu integer. Variable yang dimasukkan yaitu x1,y1 bertipe data
integer dan OldBrush bertipe data TBrush. Pada begin di deklarasikan rumus
perhitungan untuk x1 dan y1. Variable OldBrush mempunyai nilai canvas.brush
dimana canvas.brush.color bernilai clBlack, cavas.brush.style bernilai bsSolid
dan canvas.rectangle bernilai x1,y1,x1+10,y+10.

Implementasi dari prosedur Line

Analisis :
Pada prosedur Line parameter yang digunakan yaitu x1,y1,x2,y2 dengan tipe
data integer dan parameter color dengan tipe data TColor. Variable yang
dimasukkan yaitu OldPen dengan tipe data TPen. Pada begin di deklarasikan
variable OldPen mempunyai nilai awal Canvas.Pen dimana Canvas.Pen terdiri
dari Canvas.Pen.Color yang mempunyai nilai color, Canvas.MoveTo (x1,y1),
Canvas.LineTo(x2,y2) dan nilai dari Canvas.Pen sendiri yaitu OldPen.

Implementasi dari prosedur DrawGrid

Analisis :
Pada procedure DrawGrid, parameter yang digunakan yaitu step_x,step_y
dengan tipe data integer dan parameter color dengan tipe data TColor. Variable
yang dimasukkan yaitu y1,y2,x1,x2 bertipe data integer dan OldPen bertipe
data TPen. Pendeklarasian pada begin yaitu sebagai berikut :
- Variabel OldPen mempunyai nilai awal Canvas.Pen dimana Canvas.Pen
terdiri dari Canvas.Pen.Color yang mempunyai nilai color.
- Untuk vertical grid, variable x1 mempunyai nilai Panel1.Width. Ketika x1
<= Width maka perintah yang akan di eksekusi yaitu
Canvas.MoveTo(x1,y1), Canvas.LineTo(x1,y2) dan inc(x1,step_x) dengan
nilai untuk variable y1 = 0 dan variable y2 = Panel1.Height.
- Untuk horizontal grid, variable y1 mempunyai nilai 0. Ketika y1 <=
Panel1.Height maka perintah yang akan di eksekusi yaitu
 Canvas.MoveTo(x1,y1), Canvas.LineTo(x2,y1) dan inc(y1,step_y) dengan
nilai untuk variable x1 = Panel1.Width dan nilai untuk variable x2 = Width.

Implementasi dari prosedur EraseGrid

Analisis :
Pada prosedur EraseGrid parameter yang digunakan yaitu step_x dan step_y
dengan tipe data integer. Pada begin di deklarasikan prosedur DrawGrid untuk
step_x, step_y dan color.

Implementasi dari prosedur FormResize

Analisis :
Pada prosedur FormResize parameter yang digunakan yaitu Sender dengan tipe
data TObject. Pada begin di deklarasikan area mempunyai nilai rectangle yaitu
Panel1.Width+1, 0, Width, dan Height.

Implementasi dari prosedur ShowGridClick

Analisis :
Pada prosedur ShowGridClick parameter yang digunakan yaitu Sender dengan
tipe data TObject. Pada begin di deklarasikan, jika kondisi
(ShowGrid.Checked) benar maka eksekusi perintah
DrawGrid(grid_x,grid_y,clGray), jika kondisi salah maka eksekusi perintah
canvas.brush.color=color, canvas.rectangle(area) dan erasegrid(grid_x,grid_y).

Implementasi dari prosedur FormCreate

Analisis :
Pada prosedur FormCreate, parameter yang digunakan yaitu Sender dengan tipe
data nya yaitu TObject. Pada begin di deklarasikan nilai untuk Garis yaitu
TList.Create dan nilai untuk area yaitu Rect(Panel1.Width,0,Width,0).

Implementasi dari prosedur GambarBtnClick

Analisis :
Pada procedure GambarBtnClick, parameter yang digunakan yaitu Sender
dengan tipe data nya yaitu TObject. Variable yang dimasukkan yaitu
x1,y1,x2,y2 dengan tipe data integer. Pendeklarasian pada begin yaitu nilai
untuk variable x1 yaitu StrToInt(EX1.Text), nilai untuk variable y1 yaitu
StrToInt(EY1.Text), nilai untuk variable x2 yaitu StrToInt(EX2.Text), dan nilai
untuk variable y2 yaitu StrToInt(EY1.Text). Pada procedure ini digunakan
metode percabangan case-of. Case of merupakan metode lain dari sebuah
percabangan, berfungsi sama seperti fungsi if yaitu melakukan seleksi atas
beberapa pilihan dengan kondisi sebagai syarat yang harus terpenuhi. Ada
beberapa pilihan yang dimasukkan. Pilihan yang pertama yaitu 0 dengan hasil
yang akan ditampilkan yaitu jika kondisi benar maka hasil yang akan
ditampilkan yaitu dengan metode DDA, jika kondisi salah maka akan masuk ke
pilihan kedua yaitu 1 dengan hasil yang akan ditampilkan yaitu dengan metode
Bresenham. Apabila kondisi masih salah maka akan masuk ke pilihan ketiga
 yaitu 2 dengan menggunakan prosedur Line.

Hasil dari Percobaan 3

Analisis :
Hasil dari percobaan 3 yaitu error karena procedure Swap tidak di
implementasikan.

3. LINGKARAN
 Analisis :

Source Code :
Implementasi Procedure GambarTitik
Analisis :

Implementasi Procedure GambarLingkaran

Analisis :

Implementasi Procedure GambarBtnClick

Analisis :

Implementasi Procedure FormMouseDown

Analisis :

Implementasi Procedure FormMouseMove

Analisis :

Implementasi Procedure FormMouseUp

Analisis :

Hasil

Analisis :