LAPORAN PROYEK AKHIR

APLIKASI GRAFIKA KOMPUTER

MENGGUNAKAN PASCAL

Disusun Oleh :

FARAH AISYAH 123200009 (Ketua)

DANICA KIRANA 123200055 (Anggota)
FATIN LUTHFI SALMAN 123200071 (Anggota)

PRODI INFORMATIKA
JURUSAN INFORMATIKA
FAKULTAS TEKNIK INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” YOGYAKARTA
2023

1
 Daftar Isi

COVER ................................................................................................................................ 1
Daftar Isi .............................................................................................................................. 2
Kata Pengantar ................................................................................................................... 3
BAB I TEORI DASAR ....................................................................................................... 4
I.1 Pendahuluan ...................................................................................................... 4
1.1.1 Pengertian ........................................................................................... 4
I.2 Sistem Grafika ................................................................................................... 5
1.2.1 Teknologi Display ............................................................................... 5
1.2.2 Raster -Scan Dsiplay ........................................................................... 8
1.2.3 Random-Scan System ......................................................................... 9
1.2.4 Peralatan Input Interaktif................................................................... 9
I.3 Output Primitif .................................................................................................. 9
1.3.1 Titik dan Garis ................................................................................... 9
1.3.2 Algoritma Pembentukan Garis ...................................................... 10
1.3.3 Algoritma Pembentukan Lingkaran dan elips ............................. 11
1.3.4 Fill Area Primitif ............................................................................. 13
I.4 Atribut Output Primitif ..................................................................................15
1.4.1 Atribut Titik .....................................................................................15
1.4.2 Atribut Kurva dan Garis .................................................................15
1.4.3 Warna dan Grayscale ......................................................................16
I.5 Transformasi Dua Dimensi .............................................................................17
1.5.1 Rotasi .................................................................................................17
1.5.2 Skala ..................................................................................................18
1.5.3 Matriks Transformasi ......................................................................19
BAB II PERANCANGAN APLIKASI ............................................................................20
2.1 Perancangan Menu .........................................................................................20
2.2 Perancangan Antar Muka Pengguna ............................................................20
BAB III IMPLEMENTASI PROGRAM ........................................................................21
3.1 Perangkat Keras yang Digunakan .................................................................21
3.2 Perangkat Lunak yang Digunakan ................................................................21
3.3 Tampilan dan Modul Program ......................................................................22
BAB IV KESIMPULAN DAN SARAN ...........................................................................35
4.1 Kesimpulan ......................................................................................................35
4.2 Saran .................................................................................................................35
DAFTAR PUSTAKA ........................................................................................................35

2
 Kata Pengantar

Dengan nama Allah Yang Maha Pengasih lagi Maha Penyayang, segala puji hanya
bagi-Nya. Shalawat dan salam semoga selalu tercurah kepada Nabi Muhammad SAW,
keluarga, dan para sahabatnya yang setia. Puji syukur kami panjatkan kehadirat Allah SWT
atas segala rahmat, hidayah, dan karunia-Nya yang melimpah sehingga kami dapat
menyelesaikan laporan proyek akhir dengan judul "Aplikasi Grafika Komputer
Menggunakan Pascal".
Kami ingin mengucapkan terima kasih kepada semua pihak yang telah memberikan
dukungan, bantuan, dan dorongan selama penelitian ini dilaksanakan. Terima kasih kepada
dosen pembimbing kami yang telah memberikan arahan, saran, dan masukan berharga dalam
proses penelitian ini.
Kami menyadari bahwa laporan proyek akhir ini tidak luput dari kekurangan dan
keterbatasan. Oleh karena itu, kami mengharapkan kritik, saran, dan masukan yang
membangun untuk perbaikan di masa depan.
Akhir kata, semoga laporan proyek akhir ini dapat memberikan manfaat dan
sumbangan ilmiah yang berarti dalam pengembangan aplikasi grafika komputer
menggunakan Pascal. Kami berharap penelitian ini dapat menjadi pijakan bagi penelitian-
penelitian selanjutnya dalam bidang yang sama.

Yogyakarta, 9 Juni 2023

Penulis

3
 BAB I
TEORI DASAR
I.1 Pendahuluan
Grafika Komputer (Computer Graphic) adalah seperangkat alat yang terdiri dari
hardware dan software untuk memproduksi suatu gambar, grafik atau citra realistic untuk
seni, game computer, foto dan film animasi. Grafika Komputer merupakan bagian yang
paling paling sulit di bidang computer, karena selain harus mengerti bahasa dan logika
pemrograman juga dibutuhkan kemampuan analisis serta pemahaman matematik. Bagian
dari grafika komputer meliputi :
1. Geometri : mempelajari cara menggambarkan permukaan bidang
2. Animasi : mempelajari cara menggambarkan dan memanipulasi gerakan
3. Rendering : mempelajari algoritma untuk menampilkan efek cahaya
4. Citra (Imaging) : mempelajari cara pengambilan dan penyuntingan gambar
Grafika komputer merupakan salah satu cabang dalam ilmu komputer yang memiliki
dua cabang ahli, yaitu pemrosesan citra (image processing) dan pengenalan pola (pattern
recognition). Adapun manfaat grafika komputer dalam kehidupan sehari-hari yaitu :
1. Bidang Pendidikan
Grafik komputer pada pendidikan digunakan untuk mempresentasikan objek-objek pada
siswa secara nyata,dapat melalui power point ataupun software lainnya.Dengan
penggunakan bentuk objek ini diharapkan siswa lebih nyata dalam menerima semua materi
yang telah diajarkan,tidak hanya teori saja tetapi sudah melihat bentuk dan simulasinya.
Bentuk ini dapat berupa penggambaran bidang, ruang, grafik, gambar kerangka manusia,
susunan tubuh manusia, dan sebagainya.
2. Di Bidang Hiburan
Tidak memungkiri pada sekarang ini semua acara hiburan di televisi banyak
menggunakan grafik komputer.Mulai dari film kartun,iklan di TV dan sampai acara sinetron
sekalipun sudah di selipi oleh grafik komputer.Grafik komputer disini berupa efek animasi
yang dapat membuat film semakin menarik.
3. Di Bidang Perancangan
Pada bidang ini grafik komputer digunakan untuk membuat berbagai desain dan model
objek yang akan dibuat.Misalnya digunakan untuk mendesain suatu arsitektur
bangunan,desain kendaraan dan lainnya.Menggunakan software desain grafis seperti auto
cad semuanya akan berlangsung secara mudah dan lebih spesifik dalam perancangan yang

4
akan dibuat.Memperkecil tinggkat kesalahan sehingga akan menhasilkan suatu model yang
sama seperti aslinya.
4. Visualisasi
Digunakan oleh para insinyur, ahli kedokteran, ekonom, ilmuwan untuk
memvisualisasikan hasil analisa data dalam jumlah besar. Hasil visualisasi tersebut akan
bermanfaat untuk mempresentasikan sesuatu sehingga nampak nyata dan mudah diterima
secara akal.
I.2 Sistem Grafika
Sistem grafika komputer dibagi menjadi dua, yaitu sistem pasif dan sistem interaktif
(interactive computer graphics). Sistem pasif adalah sistem dimana operator tidak bisa
berinteraksi langsung dengan gambar yang ada di layar komputer. Sedangkan sistem
interaktif memungkinkan operator bisa mengendalikan segala aspek pada gambar yang
terlihat dinamis.
Aspek-aspek tersebut antara lain isi, format, bentuk, ukuran, dan warna gambar.
Pengendalian secara dinamis tersebut bisa dilaksanakan menggunakan perangkat keras
seperti keyboard, mouse, joystick, light pen, dan lain-lain.
Berikut beberapa macam perangkat keras dan paket aplikasi grafika komputer yang
dapat digunakan dalam sistem interaktif.
1.2.1 Teknologi Display
Alat utama untuk menampilkan output pada sistem grafika adalah video
monitor. Video monitor menggunakan sistem perancangan Cathode-Ray Tube (CRT).
Adapun cara kerja dari CRT adalah elektron gun memancarkan elektron, melalui
focusing system (sistem yang digunakan untuk menentukan fokus) dan deflection
system (sistem untuk mengatur pembelokan ) sehingga pancaran elektron mencapai
posisi tertentu dari lapisan fosfor pada layar. Fosfor memancarkan sinar kecil pada
setiap posisi yang berhubungan pancaran sinar elektron. Refreshing yaitu
menembakkan elektron berulang kali pada posisi yang sama. Focusing system pada
CRT diperlukan untuk mengarahkan pancaran elektron pada suatu titik tertentu dari
lapisan fosfor. Pengaturan fokus dapat dilakukan pada electric dan magnetic field.
Komponen utama dari electron gun adalah cathode metal dan control grid. Intensitas
pancaran elektron diatur oleh setting dengan tingkat tegangan pada control grid.
Macam-macam fosfor yang berbeda dapat digunakan pada CRT. Kecuali warna, hal
yang membedakan suatu fosfor dengan fosfor lainnya adalah persistance. Persistance

5
didefinisíkan sebagai waktu yang diperlukan fosfor dapat tahan menyala, yaitu
sepersepuluh dari intensitas asli. Jumlah maksimum titik yang dapat ditampilkan pada
monitor tanpa tumpang tindih disebut resolusi (resolution). Definisi yang lebih tepat,
adalah jumlah titik per sentimeter yang dapat ditempatkan menurut arah horisontal dan
vertikal.
Penggunaan alat utama untuk menampilkan output pada sistem grafika adalah
video monitor. Pada umumnya menggunakan perancangan CRT. Cara kerja dari
operasi CRT adalah sebuah electron gun memancarkan melalui sistem focusing dan
deflection sistem (sistem untuk mengatur pembelokan). Sehingga pancaran elektron
mencapai posisi tertentu dari lapisan tertentu pada layer. Fosfor memancarkan sinar
kecil pada setiap posisi yang berhubungan dengan pancaran elektron. Sinar yang
dipancarkan fosfor cepat hilang, maka diperlukan suatu pengaturan agar fosfor tetap
menyala, caranya adalah dengan refreshing yakni menembakkan elektron berulang
kali pada posisi yang sama.
Resolusi CRT tergantung pada tipe fosfor, intensitas yang ditampilkan,
focusing gun deflection sistem. Aspek rasio merupakan property dari video monitor.
Misalkan aspeck ratio ¾, artinya perbandingan jumlah titik vertikal dan horisontal
yang dapat ditampilkan adalah ¾.
1. Raster-scan display
Cara kerja raster-scan display yaitu pancaran elektron bergerak baris per baris dari
atas ke bawah. Definisi gambar disimpan dalam memori yang disebut refresh buffer
atau frame buffer. Setiap titik pada layar disebut pixel/pel yaitu picture element.
Refreshing rate memiliki nilai 60 s.d 80 frame per detik. Horizontal retrace adalah
kembalinya scan ke bagian kiri layar setelah refreshing tiap scan line. Vertical retrace
adalah kembalinya scan ke atas setelah selesai satu frame (1/80 s.d 1/60 detik).

Gambar 1.1 Raster-Scan Display

6
2. Random-Scan Display
Pancaran elektron hanya ke bagian layar dimana gambar dibuat. Random scan
display hanya membuat gambar dengan satu garis pada suatu saat disebut vector
display/stroke writing calligraphic display. Refreshing rate tergantung jumlah garis.
Definisi gambar disimpan dalam satu blok perintah line drawing disebut refresh
display file/display list/display program/refresh buffer. Random-scan display
menghasilkan gambar yang lebih halus dibandingkan dengan raster-scan, karena
pancaran elektron langsung mengikuti jalur pada garis.

Gambar 1.2 Random Scan Display

3. Monitor Color CRT
Menampilkan gambar dengan kombinasi fosfor yang memancarkan sinar warna
yang berbeda. Dengan menggabungkan sinar dari fosfor yang berbeda, tingkat dari
warna dapat ditampilkan. Terdapat dua teknik untuk mendapatkan warna, yaitu beam
penetration yang digunakan untuk menampilkan gambar berwarna dengan random-
scan display dan shadow mask digunakan pada raster-scan. Metode shadow mask
menghasilkan tingkat warna yang banyak jika dibandingkan dengan metode beam
penetration.

Gambar 1.3. Monitor color CRT

7
4. Flat Panel Display
Tampilan ini dibagi menjadi dua yaitu emissive display yang mengkonversi
energi listrik menjadi sinar, contohnya yaitu plasma panel. Plasma panel dibuat
dengan mengisi ruangan antara pelat kaca dengan gas (biasanya gas neon). Non-
emissive display menggunakan efek optik untuk mengkonversi sinar matahari atau
sinar dari sumber lain ke dalam pola grafik, contohnya adalah Liquid Chrystal Display
(LCD). LCD menghasilkan gambar dengan meneruskan sinar dari sekitarnya atau dari
sinar di dalam yang menembus material liquid-crystal yang terdiri dari susunan
molekul yang dapat bergerak seperti cairan.
1.2.2 Raster-Scan System
Pada umumnya terdiri dari beberapa unit pemroses. Kecuali CPU, digunakan
processor khusus video controler atau display controler yang berfungsi untuk
mengontrol operasi dari peralatan display.
1. Video controller
Operasi dasar pada video controler, dua register digunakan untuk menyimpan
koordinat pixel pada layar. Nilai dari posisi pixel yang disimpan pada frame buffer
diambil dan digunakan untuk mengatur intensitas dari pancaran elektron. Video
controler dapat mengambil intensitas pixel dari area memori yang berbeda pada siklus
refreshing yang berbeda.
Pada sistem dengan kualitas tinggi, sering digunakan dua frame buffer, sehingga
satu buffer digunakan untuk refreshing, sedangkan yang lain diisi dengan nilai
intensitas. Kedua buffer dapat saling tukar untuk melakukan fungsi tersebut, sehingga
dapat memenuhi kebutuhan mekanisme yang cepat, seperti animasi real-time.
2. Raster scan display processor
Raster system terdiri dari display processor tersendiri, biasanya disebut dengan
graphic controller atau display processor. Kebutuhan display processor ini untuk
membebaskan CPU dari pekerjaan grafik.
Fungsi utama display processor adalah membuat digitasi gambar yang
dimasukkan dari program aplikasi ke dalam frame buffer. Proses digitasi tersebut
dikenal dengan nama scan conversion. Perintah grafik pada pembuatan garis lurus dan
objek geometri lainnya dikonversi menjadi intensitas titik yang diskrit. Metode yang
sama digunakan untuk mengkonversi kurva dan outline suatu poligon.
1.2.3 Random-Scan System

8
 Cara kerja dari sistem ini adalah program aplikasi dimasukkan dan disimpan
dalam sistem memori dari suatu perangkat lunak aplikasi grafika. Perintah grafik pada
program aplikasi diterjemahkan ke dalam display file yang disimpan dalam sistem
memori. Kemudian display file diakses oleh display processor untuk ditampilkan pada
layar monitor. Display processor mengulang kembali setiap perintah dari program
pada saat dilakukan refreshing. Pola grafik digambar pada sistem ini dilakukan dengan
menembakkan elektron langsung sesuai komponen garis pada layar monitor. Garis
ditentukan oleh nilai dari dua koordinat titik awal dan titik akhir.
1.2.4 Peralatan Input Interaktif
Macam input interaktif dapat dibagi dalam lima macam peralatan logika dasar,
yaitu :
1. Keyboard, untuk memasukkan karakter atau string.
2. Locator, untuk mengenali posisi atau orientasi (mouse, trackball dan spaceball,
joystick, Glove, digitizer, touch panel, light pen).
3. Pick, untuk menyeleksi entity suatu tampilan.
4. Valuator, untuk memasukkan bilangan real.
5. Choice, untuk menyeleksi dari suatu action atau pilihan yang tersedia.
I.3 Output Primitif
1.3.1 Titik dan Garis
Titik dan garis adalah bentuk geometri paling sederhana dari komponen
gambar. Pemebentukan titik dilakukan dengan mengkonversi sebuah koordinat
tunggal yang diberikan oleh sebuah program aplikasi dalam suatu operasi tertentu
dengan menggunakan peralatan output, sebagai contoh monitor. Garis adalah
himpunan titik-titik yang anggotanya terdiri dari lebih dari satu buah titik.
1.3.2 Algoritma Pembentukan Garis
1. Algoritma DDA
Algoritma Digital Differential Analyzer (DDA) adalah algoritma pembentukan
garis berdasarkan perhitungan Δx dan Δy. Garis dibuat dengan menentukan dua
endpoint yaitu titik awal dan titik akhir. Setiap koordinat titik yang membentuk garis
diperoleh dari perhitungan, kemudian dikonversikan menjadi nilai integer. Langkah-
langkah pembentukan menurut algoritma DDA, yaitu :
a. Tentukan dua titik yang akan dihubungkan.
b. Tentukan salah satu titik sebagai titik awal (x0, y0) dan titik akhir (x1, y1).

9
c. Hitung Δx = x1 - x0 dan Δy = y1 - y0
d. Tentukan step, yaitu jarak maksimum jumlah penambahan nilai x maupun nilai y
dengan cara : step = max(|Δx| , |Δy|)
e. Hitung penambahan koordinat pixel yaitu xInc = Δx / step dan yInc = Δy / step.
f. Koordinat selanjutnya (x+ xInc, y+ yInc).
g. Posisi pixel pada layer ditentukan dengan pembulatan nilai koordinasi tersebut.
h. Ulangi langkah 6 dan 7 untuk menentukan posisi pixel selanjutnya, sampai x =
x1 dan y = y1.
2. Algoritma Bressenham
Algoritma garis Bressenhem adalah algoritma konversi penambahan nilai integer.
Algoritma Bresssenham berdasarkan selisih antara garis yang diinginkan terhadap
setengah ukuran dari pixel yang sedang digunakan. Langkah-langkah untuk
membentuk garis menurut algoritma ini adalah :
a. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis.
b. Tetukan titik disebelah kiri sebagai titik awal (x1,y1) dan titik lainnya sebagai titik
akhir (x2, y2 ).
c. Hitung Dx, Dy, dan 2Dy – 2Dx.
d. Hitung parameter pk = 2Dy – Dx.
e. Bandingkan if pk < 0 (xk+1, yk) else (xk +1, yk +1).
f. A < 0 = 2*Dy
g. B > 0 = 2*(Dy – Dx)
h. Pk (+) = Pk + B
i. Pk (-) = Pk + A.
j. Ulangi langkah nomor 5 untuk menentukan posisi pixel selanjutnya, sampai x =
x2 dan y = y2.
1.3.3 Algoritma Pembentukan Lingkaran dan Elipse
Untuk membentuk suatu lingkaran, ada beberapa algoritma yang bisa
digunakan yaitu:
1. Algoritma lingkaran simestris 8 titik
Pembuatan lingkaran dapat dilakukan dengan menentukan satu titik awal.
Anggaplah satu titik awal tersebut (x,y), maka akan terdapat tiga posisi lain pada ketiga
kuadran lain sehingga diperoleh delapan titik. Dengan demikian, sebenarnya hanya
perlu menghitung segmen 450 dalam menentukan keseluruhan lingkaran.

10
 Gambar 1.4. Algoritma lingkaran simetris 8 titik
2. Algoritma lingkaran titik tengah (Mid-Point)
Disebut juga sebagai algoritma lingkaran Bressenham. Algoritma ini diturunkan
dari algoritma midpoint pembentukan garis. Algoritma ini digunakan membentuk
semua titik menurut titik pusat dengan penambahan jalur sekeliling lingkaran. Disini
hanya diperhatikan bagian 450 dari suatu lingkaran yaitu oktan kedua dari x=0 ke
x=R/√2 dan menggunakan circle point untuk menampilkan titik dari seluruh lingkaran.

Gambar 1.5. Algoritma lingkaran titik tengah

Langkah-langkahnya adalah :
a. Tentukan radius r dan titik pusat lingkaran (x0,y0) kemudian diperoleh
(x0,y0)=(0,r)
5
b. Hitung nilai dari parameter P0 = − 𝑟
4
c. Tentukan nilai awal k=0, untuk setiap posisi xk berlaku sebagai berikut :
Bila Pk<0 maka titik selanjutnya adalah (xk+1,yk) dan Pk+1=Pk+2xk+1+1
Jika tidak maka titik berikutnya adalah (xk+1,yk-1) dan Pk+1=Pk+2xk+1+1-2yk+1

11
 d. Tentukan titik simetris pada ketujuh oktan lain
e. Gerakkan setiap posisi pixel (x,y) pada garis melingkar dari lingkaran dengan titik
pusat (xc,yc) dan tentukan nilai koordinat
Ulangi langkah ke-3 sampai 4 hingga x≥y
Sedangkan untuk pembuatan elipse dapat menggunakan cara sebagai berikut.
1. Algoritma elipse titik tengah (Mid-Point)

Gambar 1.6. Algoritma elipse titik tengah

Dalam membuat elipse midpoint pendekatan yang dilakukan sama dengan
menampilkan lingkaran. Dengan parameter untuk elipse pada posisi standar, yaitu rx,
ry, dan (xc,yc). Metode midpoint untuk elipse dijalankan pada kuadran pertama dalam
dua bagian. Pembentukan elipse menurut algoritma Circle midpoint sebagai berikut:
a. Tentukan rx,ry dan pusat elipse (xc,yc) kemudian diperoleh (xo,yo)=(0,ry)
1
b. Hitung nilai parameter p1,0=ry2rx2 ry+4rx2

c. Tentukan nilai awal k=0, untuk setiap posisi xk berlaku sebagai berikut :
Bila p1,k< 0 maka titik selanjutnya adalah (xk+1, yk)
d. p1,k+1=p1,k+2ry2xk+1+ry2
Bila tidak, maka titik selanjutnya adalah (xk+1,yk-1) dan
e. p1,k+1=p1,k+2ry2xk+1+2rx2yk+1+ry2
f. Teruskan sampai 2ry2x ≥ 2rx2y
g. Tentukan nilai parameter pada bagian kedua menggunakan titik terakhir sebagai
(x0,y0) yang telah dihitung pada bagian pertama, sebagai berikut
1
h. p2,0= 2ry2(x0+2)2+rx2(y0-1)-rx2ry2

i. Setiap posisi yk pada bagian kedua, dimulai dengan k=0

Bila p2,k> 0 maka titik selanjutnya adalah (xk, yk-1)
j. p2,k+1=p2,k+2rx2yk+1+rx2

12
 Bila tidak, maka titik selanjutnya adalah (xk+1,yk-1) dan
k. p2,k+1=p2,k+2ry2xk+1-2rx2yk+1+rx2
l. Ulangi langkah f hingga didapatkan titik x(0,0)
m. Tentukan titik simetris pada ketiga kuadran lainnya
1.3.4 Fill Area Primitif
Fill area (pengisian area) output primitif standar umumnya adalah warna solid
atau pola raster. Bentuk poligon paling mudah untuk diproses karena memiliki garis
batas (boundary) yang jelas. Ada dua macam dasar pendekatan fill area pada sistem
raster yaitu:
a. Dengan menentukan overlap interval untuk scan line yang melintasi area
(digunakan untuk bentuk-bentuk dasar seperti poligon, lingkaran, elipse dan kurva
sederhana lainnya).
b. Dengan memulai dari titik tertentu pada posisi di dalam poligon dan menggambar
secara menyebar kepinggir sampai batas poligon (digunkan pada bentuk-bentuk
kurva yang kompleks).
Algoritma yang digunakan untuk fill area primitif :
a. Algoritma scan line
Titik potong diurutkan dari kiri ke kanan. Posisi yang berhubungan pada frame-
buffer antara sepasang titik potong kemudian diberi warna tertentu.
b. Agoritma inisde outside test
Aturan odd-even yang juga disebut dengan aturan odd parity atau even-odd, secara
konseptual membuat gambar dengan garis dari posisi P ke titik dengan jarak
tertentu di luar koordinat objek dan menghitung jumlah edge poligon yang
berpotongan dengan garis.
i. Jika jumlah edge poligon yang berpotongan dengan garis jumlahnya ganjil
maka P berada di bagian dalam (interior).
ii. Jika jumlah edge poligon yang berpotongan dengan garis jumlahnya genap
maka P berada di bagian luar (exterior).
c. Algoritma boundary fill
Prosedur boundary fill menerima tiga macam parameter masing-masing koordinat
titik (x,y), warna isi dan warna garis batas. Proses pengisian dimulai dari titik (x,y)
kemudian prosedur akan memeriksa posisi titik tetangga apakah ttitik tersebut
memiliki warna batas:

13
 1. Jika tidak, warnai titik tersebut dengan warna isi.
2. Selanjutnya periksa lagi posisi dan warna titik tetangganya.
Proses diulangi terus hingga seluruh titik pada area pengisian telah diuji.
Ada dua metode untuk mengecek pixel tetangga dari suatu titik, yaitu:
a) Metode 4-connected, dimana posisi pixel tetangga yang dicek berada di kiri,
kanan, atas dan bawah dari titik yang diketahui.

Gambar 1.7. Metode 4-connected

b) Metode 8-connected, dimana posisi pixel tetangga yang dicek berada di kiri,
kanan, atas, bawah dan keempat posisi diagonal dari titik yang diketahui.

Gambar 1.8. Metode 8-connected

d. Algoritma flood fill
Metode ini dilakukan dari suatu titik (x,y) dan mengganti seluruh warna pixel pada
bidang tersebut dengan warna isi yang diinginkan. Pada metode ini warna pixel
yang diganti dengan warna isi yang baru adalah warna lama (old color) yang telah
ditentukan, tanpa melihat warna batas (boundary color).
I.4 Atribut Output Primitif
1.4.1 Atribut Titik
Atribut (semua parameter yang mempengaruhi bagaimana primitive grafis
ditampilkan) dasar untuk titik adalah ukuran dan warna.
1.4.2 Atribut Kurva dan Garis
Atribut dasar untuk garis lurus adalah type (tipe), width (tebal), dan color (warna).
Pada algoritma penggambaran garis, atribut tebal (width) dapat ditentukan seperti juga
panjang dan spasi antar titik. Dalam berapa paket aplikasi grafik, garis dapat
ditampilkan dengan menggunakan pilihan pen atau brush yang dapat ditampilkan
dengan cara mengubah ukuran dari mask.
Atribut tipe atau style pada garis dibagi menjadi 3 (tiga) yaitu :
1. Solid line

14
 Algoritma pembentukan garis dilengkapi dengan pengaturan panjang dan jarak
yang menampilkan bagian solid sepanjang garis.
2. Dashed line (garis putus)
Garis putus dibuat dengan memberikan jarak dengan bagian solid yang sama.
3. Dotted line (garis titik-titik)
Garis titik-titik dapat ditampilkan dengan memberikan jarak yang lebih besar dari
bagian.
Implementasi dari tebal garis tergantung dari kemampuan alat output yang
digunakan. Garis tebal pada video monitor dapat ditampilkan sebagai garis adjacent
parallel, sedangkan pada plotter mungkin menggunakan ukuran pen yang berbeda.
Pada implementasi raster, tebal garis standar diperoleh dengan menempatkan satu
pixel pada tiap posisi, seperti algoritma Bressenham yaitu dengan perkalian integer
positif dari garis standar, dan menempatkan tambahan pixel pada posisi sejajar.
Routine polyline membuat garis pada warna tertentu dengan mengatur nilai warna
pada frame buffer untuk setiap posisi pixel, menggunakan prosedur set pixel. Jumlah
warna tergantung pada jumlah bit yang akan digunakan untuk menyimpan informasi
warna.
1.4.3 Warna dan Grayscale
Ketika suatu sistem menyediakan opsi warna, suatu parameter akan
memberikan indeks warna awal yang dimasukkan ke dalam daftar nilai atribut sistem.
Suatu prosedur polyline kemudian akan menampilkan garis dengan warna tersebut
dengan cara mengatur warna tersebut di frame buffer pada lokasi piksel sepanjang
garis tersebut dengan menggunakan prosedur setPixel.
1. Warna
Pada sistem raster pilihan nomor warna bergantung pada jumlah bit yang tersedia
per pixel di frame buffer. Informasi warna yang dapat disimpan di frame buffer dengan
dua cara yaitu kode warna disimpan secara langsung di frame buffer dan kode warna
disimpan di table warna yang terpisah dan gunakan nilai pixel sebagai indeks ke tabel
tersebut.
Ada beberapa keuntungan menyimpan kode warna di tabel lookup. Penggunaan
tabel warna dapat menyediakan jumlah yang warna simultan tanpa membutuhkan
frame buffer yang besar. Untuk banyak aplikasi, 256 atau 512 warna yang berbeda

15
 sudah cukup untuk sebuah gambar tunggal. Tiap segmen 8 bit mengendalikan tingkat
intensitas satu dari tiga electron gun di monitor RGB.
Jumlah minimum warna yang disediakan dengan 3 bit penyimpanan per pixel
dapat dilihat sebagai berikut :
Tabel 1.1. Kode 8 warna
Stored Color Values in Frame Buffer
Color Code Displayed Color
Red Green Blue
0 0 0 0 Hitam
1 0 0 1 Biru
2 0 1 0 Hijau
3 0 1 1 Cyan
4 1 0 0 Merah
5 1 0 1 Magenta
6 1 1 0 Kuning
7 1 1 1 Putih

2. Gray scale
Untuk monitor yang tidak memiliki kapabilitas warna, dapat digunakan pada
program aplikasi dengan cara menentukan tingkat keabuan (gray scale) untuk
menampilkan primitif. Nilai numeric antara 0 dan 1 dapat digunakan untuk
menspesifikasikan tingkat grayscale dan kemudian dikonversi menjadi nilai biner
untuk penyimpanan di sistem raster.
Dengan 3 bit per pixel dapat mengakomodasi 8 level keabuan. Jika sistem
memiliki ukuran 8 bit per pixel maka akan dapat ditampilkan 256 level keabuan.
I.5 Transformasi Dua Dimensi
Translasi adalah suatu pergerakan/perpindahan semua titik dari objek pada suatu jalur
lurus sehingga menempati posisi baru. Translasi adalah transformasi dengan bentuk yang
tetap, memindahkan objek apa adanya. Setiap titik dari objek akan ditranslasikan dengan
besaran yang sama. Dalam operasi translasi, setiap titik pada suatu entitas yang ditranslasi
bergerak dalam jarak yang sama.
Perubahan ini berlaku dalam arah yang sejajar dengan sumbu X dan sumbu Y.
Translasi dilakukan dengan penambahan atau pengurangan pada suatu titik koordinat dengan
translation vector, yaitu (tx,ty), dimana tx adalah translasi menurut sumbu x dan ty adalah
translasi menurut sumbu y. Koordinat baru titik yang ditranslasi dapat diperoleh dengan
menggunakan rumus :

16
x’ = x + tx
y’ = y + ty
(x,y) : titik asal sebelum translasi
(x’,y’) : titik baru hasil translasi

Gambar 1.9. Translasi

1.5.1 Rotasi
Rotasi adalah suatu operasi yang menyebabkan objek bergerak berputar pada
titik pusat atau pada sumbu putar yang dipilih berdasarkan sudut putaran tertentu.
Untuk melakukan rotasi diperlukan sudut rotasi θ dan pivot point (xp,yp) dimana objek
akan dirotasi.
Putaran biasa dilakukan pada satu titik terhadap sesuatu sumbu tertentu
misalnya sumbu x, sumbu y atau garis tertentu yang sejajar dengan sembarang sumbu
tersebut. Titik acuan putaran dapat sembarang baik di titik pusat atau pada titik yang
lain.
Aturan dalam geometri, jika putaran dilakukan searah jarum jam, maka nilai
sudutnya adalah negatif. Sebaliknya, jika dilakukan berlawanan arah dengan arah
jarum jam nilai sudutnya adalah positif. Rotasi suatu titik terhadap pivot point adalah:

Gambar 1.10. Rotasi

Dapat pula menggunakan rumus berikut :
x‟=x cos 0 - y sin 0
y‟=x sin 0 + y cos 0

17
 Gambar 1.11. Rotasi
1.5.2 Skala
Penskalaan adalah suatu operasi yang membuat suatu objek berubah ukurannya
baik menjadi mengecil ataupun membesar secara seragam atau tidak seragam.
Keseragaman penskalaan berarti skalar yang digunakan sama untuk semua komponen
objek. Ketidakseragaman penskalaan berarti skalar yang digunakan pada objek adalah
tidak sama.
Koordinat baru diperoleh dengan melakukan perkalian koordinat dengan
scaling factor, yaitu (sx,sy). Dimana sx adalah scaling factor untuk sumbu x dan sy
adalah scaling factor untuk sumbu y.
Nilai lebih dari 1 menandakan bahwa sebuah objek diperbesar, sedangkan nilai
kurang dari 1 menunjukkan bahwa objek diperkecil.
x’ = x.sx
y’= y.sy

Gambar 1.12. Skala seragam

Gambar 1.13. Skala tidak seragam

18
1.5.3 Matriks Transformasi
Matriks transformasi adalah matriks yang membuat sebuah objek mengalami
perubahan baik berupa perubahan posisi maupun perubahan ukuran. Matriks
transformasi 2D dinyatakan dalam ordo 3x3 dimana kolom ke-3 digunakan untuk
proses translasi. Persamaan umum transformasi titik A(x,y) menjadi A’(x’,y’) dapat
ditulis sebagai :

Gambar 1.14. Persamaan matriks transformasi

Gambar 1.15. Matriks translasi

Gambar 1.16. Matriks Skala

Gambar 1.17. Matriks Rotasi

19
 BAB II
PERANCANGAN APLIKASI
2.1. Perancangan Menu

Gambar 2.1 perancangan menu

2.2. Perancangan Antar Muka Pengguna

Gambar 2.2 perancangan antar muka pengguna

20
 BAB III
IMPLEMENTASI PROGRAM
2.3. Perangkat Keras yang Digunakan
Perangkat keras yang digunakan dalam pengerjaan proyek ini yaitu:
1. Laptop
2. Mouse
2.4. Perangkat Lunak yang Digunakan
Perangkat lunak yang digunakan dalam pengerjaan proyek ini yaitu:
1. Laptop menggunakan system operasi Windows
2. Menggunakan aplikasi Lazarus
2.5. Tampilan dan Modul Program
3.3.1 Tampilan

Gambar 3.1 Tampilan Aplikasi

21
3.3.2 Modul Program
unit Unit1;
{$mode objfpc}{$H+}
Interface
uses
Classes, SysUtils, Forms, Controls, Graphics, Dialogs, ExtCtrls,
Buttons, StdCtrls, ComCtrls, ColorBox, Spin;

type
{ TForm1 }
TForm1 = class(TForm)
BitBtn1: TBitBtn;
BitBtn10: TBitBtn;
BitBtn11: TBitBtn;
BitBtn12: TBitBtn;
BitBtn13: TBitBtn;
BitBtn14: TBitBtn;
BitBtn15: TBitBtn;
BitBtn16: TBitBtn;
BitBtn17: TBitBtn;
BitBtn18: TBitBtn;
BitBtn19: TBitBtn;
BitBtn2: TBitBtn;
BitBtn20: TBitBtn;
BitBtn21: TBitBtn;
BitBtn22: TBitBtn;
BitBtn23: TBitBtn;
BitBtn24: TBitBtn;
BitBtn25: TBitBtn;
BitBtn26: TBitBtn;
BitBtn27: TBitBtn;
BitBtn28: TBitBtn;
BitBtn29: TBitBtn;
BitBtn3: TBitBtn;
BitBtn30: TBitBtn;
BitBtn4: TBitBtn;
BitBtn5: TBitBtn;
BitBtn6: TBitBtn;
BitBtn7: TBitBtn;
BitBtn8: TBitBtn;
BitBtn9: TBitBtn;
ColorButton1: TColorButton;
ComboBox1: TComboBox;
GroupBox1: TGroupBox;
GroupBox2: TGroupBox;
GroupBox3: TGroupBox;
GroupBox4: TGroupBox;
GroupBox5: TGroupBox;
GroupBox6: TGroupBox;
GroupBox7: TGroupBox;
Image1: TImage;
Label1: TLabel;
Label2: TLabel;
OpenDialog1: TOpenDialog;
RadioGroup1: TRadioGroup;
SaveDialog1: TSaveDialog;
SpinEdit1: TSpinEdit;
SpinEdit2: TSpinEdit;

22
procedure BitBtn10Click(Sender: TObject);
procedure BitBtn11Click(Sender: TObject);
procedure BitBtn12Click(Sender: TObject);
procedure BitBtn13Click(Sender: TObject);
procedure BitBtn14Click(Sender: TObject);
procedure BitBtn15Click(Sender: TObject);
procedure BitBtn16Click(Sender: TObject);
procedure BitBtn17Click(Sender: TObject);
procedure BitBtn18Click(Sender: TObject);
procedure BitBtn19Click(Sender: TObject);
procedure BitBtn1Click(Sender: TObject);
procedure BitBtn20Click(Sender: TObject);
procedure BitBtn21Click(Sender: TObject);
procedure BitBtn22Click(Sender: TObject);
procedure BitBtn23Click(Sender: TObject);
procedure BitBtn24Click(Sender: TObject);
procedure BitBtn25Click(Sender: TObject);
procedure BitBtn26Click(Sender: TObject);
procedure BitBtn27Click(Sender: TObject);
procedure BitBtn28Click(Sender: TObject);
procedure BitBtn29Click(Sender: TObject);
procedure BitBtn2Click(Sender: TObject);
procedure BitBtn30Click(Sender: TObject);
procedure BitBtn3Click(Sender: TObject);
procedure BitBtn4Click(Sender: TObject);
procedure BitBtn5Click(Sender: TObject);
procedure BitBtn6Click(Sender: TObject);
procedure BitBtn7Click(Sender: TObject);
procedure BitBtn8Click(Sender: TObject);
procedure BitBtn9Click(Sender: TObject);
procedure ComboBox1Change(Sender: TObject);
procedure FormActivate(Sender: TObject);
procedure FormCreate(Sender: TObject);
procedure Image1Click(Sender: TObject);
procedure Image1MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
procedure Image1MouseMove(Sender: TObject; Shift: TShiftState; X,
Y: Integer);
procedure Image1MouseUp(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
procedure gambar();
procedure hapus();
procedure edit();
procedure tengah();
private
public
end;
type
Elemen=record
x,y: Integer;
end;
var
Form1: TForm1;
style,tool: String;
x1,y1,banyak,i,j,a,b,c,d,o,p: Integer;
objek: array[1..10] of elemen;
klik: Boolean;
warna: TColor;
TempObjek: array[1..6] of elemen;

23
Implementation
{$R *.lfm}
{ TForm1 }

procedure TForm1.FormActivate(Sender: TObject);

begin
warna:=clWhite;
Image1.Canvas.Brush.Color:=clWhite;
Image1.Canvas.FillRect(0,0,Image1.Width,Image1.Height);
end;
Modul Program 3.1 Procedure Form Show
Procedure TForm1.Image1MouseDown(Sender: TObject; Button:
TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
x1:=X;
y1:=Y;
if (tool='pensil') OR (tool='penghapus') then
begin
Image1.Canvas.MoveTo(X,Y);
klik:=true;
end;
if tool='lingkaran' then
begin
a:=X;
b:=Y;
end;
if tool='warna' then
begin
Image1.Canvas.Brush.Color:=ColorButton1.ButtonColor;
Image1.Canvas.FloodFill(X,Y,Image1.Canvas.Pixels[X,Y],fsSurface);
warna:=ColorButton1.ButtonColor;
end;
end;
Modul Program 3.2 Procedure Mouse Down
procedure TForm1.Image1MouseMove(Sender: TObject; Shift:
TShiftState; X,Y: Integer);
begin
if klik then
begin
if tool='pensil' then
begin
edit();
Image1.Canvas.LineTo(X,Y);
end;
if tool='penghapus' then
begin
Image1.Canvas.Pen.Color:=clWhite;
Image1.Canvas.Pen.Width:=SpinEdit2.Value;
Image1.Canvas.LineTo(X,Y);
end;
end;
end;
Modul Program 3.3 Procedure Mouse Move
procedure TForm1.Image1MouseUp(Sender: TObject; Button:
TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
klik:=False;

24
if tool='colorpick' then
begin
ColorButton1.ButtonColor := Image1.Canvas.Pixels[X, Y];
end;
if tool='garis' then
begin
objek[1].x := x1; Objek[1].y := y1;
objek[2].x := X; Objek[2].y := Y;
banyak:=2;
edit();
gambar();
end;
if tool='persegi' then
begin
objek[1].x:=x1; objek[1].y:=y1;
objek[2].x:=X; objek[2].y:=y1;
objek[3].x:=X; objek[3].y:=Y;
objek[4].x:=x1; objek[4].y:=Y;
banyak:=4;
edit();
gambar();
end;
if tool='lingkaran' then
begin
objek[1].x := X; Objek[1].y := b;
objek[2].x := a; Objek[2].y := Y;
banyak:=2;
edit();
gambar();
end;
if tool='segitiga' then
begin
objek[1].x:=x1; objek[1].y:=Y;
objek[2].x:=(X+x1)div 2; objek[2].y:=y1;
objek[3].x:=X; objek[3].y:=Y;
banyak:=3;
edit();
gambar();
end;
if tool='segienam' then
begin
objek[1].x:=x1+((X-x1) div 4); objek[1].y:=y1;
objek[2].x:=X-((X-x1) div 4); objek[2].y:=y1;
objek[3].x:=X; objek[3].y:=y1+((Y-y1) div 2);
objek[4].x:=X-((X-x1) div 4); objek[4].y:=Y;
objek[5].x:=x1+((X-x1) div 4); objek[5].y:=Y;
objek[6].x:=x1; objek[6].y:=y1+((Y-y1) div 2);
banyak:=6;
edit();
gambar();
end;
if tool='trapesium' then
begin
Objek[1].x := x1+((X-x1) div 4); Objek[1].y := y1;
Objek[2].x := X-((X-x1) div 4); Objek[2].y := y1;
Objek[3].x := X; Objek[3].y := Y;
Objek[4].x := x1; Objek[4].y := Y;
banyak:=4;
edit();
gambar();

25
end;
if tool='jajargenjang' then
begin
Objek[1].x := x1+((X-x1) div 4); Objek[1].y := y1;
Objek[2].x := X+((X-x1) div 4); Objek[2].y := y1;
Objek[3].x := X; Objek[3].y := Y;
Objek[4].x := x1; Objek[4].y := Y;
banyak:=4;
edit();
gambar();
end;
end;
Modul Program 3.4 Procedure Mouse Up
procedure TForm1.BitBtn1Click(Sender: TObject); //new file
begin
FormActivate(Sender);
end;
Modul Program 3.5 Menu New File
procedure TForm1.BitBtn2Click(Sender: TObject); //menu save
begin
If SaveDialog1.Execute then
Image1.Picture.SaveToFile(SaveDialog1.FileName);
end;
Modul Program 3.6 Menu Save
procedure TForm1.BitBtn3Click(Sender: TObject); //open dialog
begin
If OpenDialog1.Execute then
Image1.Picture.LoadFromFile(OpenDialog1.FileName);
end;
Modul Program 3.7 Menu Open
procedure TForm1.BitBtn4Click(Sender: TObject);
begin
tool:='pensil';//pen
end;

procedure TForm1.BitBtn5Click(Sender: TObject);

begin
tool:='penghapus'; //eraser
end;

procedure TForm1.BitBtn6Click(Sender: TObject);

begin
tool:='warna'; //fill with color
end;

procedure TForm1.BitBtn7Click(Sender: TObject);

begin
tool:='colorpick'; //color picker
end;
Modul Program 3.8 Procedure Membuat Tools
procedure TForm1.BitBtn9Click(Sender: TObject); //square
begin
tool:='persegi';
end;

procedure TForm1.BitBtn8Click(Sender: TObject); //circle

26
begin
tool:='lingkaran'
end;

procedure TForm1.BitBtn10Click(Sender: TObject); //triangle

begin
tool:='segitiga';
end;

procedure TForm1.BitBtn26Click(Sender: TObject); //line

begin
tool:='garis';
end;

procedure TForm1.BitBtn11Click(Sender: TObject); //polygon

begin
tool:='segienam';
end;

procedure TForm1.BitBtn12Click(Sender: TObject); //parallelogram

begin
tool:='jajargenjang';
end;

procedure TForm1.BitBtn13Click(Sender: TObject); //trapezoid

begin
tool:='trapesium';
end;
procedure TForm1.Button1Click(Sender: TObject);
begin
tool :='kubus' ;
objek[1].x:=200; objek[1].y:=200;
objek[2].x:=300; objek[2].y:=200;
objek[3].x:=300; objek[3].y:=300;
objek[4].x:=200; objek[4].y:=300;
objek[5].x:=250; objek[5].y:=250;
objek[6].x:=350; objek[6].y:=250;
objek[7].x:=250; objek[7].y:=150;
objek[8].x:=350; objek[8].y:=150;
objek[9].x:=250; objek[9].y:=250;
objek[10].x:=350; objek[10].y:=250;
objek[11].x:=350; objek[11].y:=150;
objek[12].x:=250; objek[12].y:=150;
banyak:=12;
edit();
gambar();

end;
Modul Program 3.9 Procedure Objek (Shapes)
procedure TForm1.BitBtn14Click(Sender: TObject);//zoomin
begin
for i := 1 to banyak do
begin
objek[i].x := objek[i].x * 2;
objek[i].y := objek[i].y * 2;
end;
FormActivate(Sender);
gambar();
end;

27
procedure TForm1.BitBtn15Click(Sender: TObject);//zoomout
begin
for i := 1 to banyak do
begin
objek[i].x := objek[i].x div 2;
objek[i].y := objek[i].y div 2;
end;
FormActivate(Sender);
gambar();

end;
Modul Program 3.10 Procedure Zoom

procedure TForm1.BitBtn16Click(Sender: TObject); //right rotation

var
TempObjek: array[1..27] of elemen;
n,m : integer;
Sdt : real;
begin
if tool <> 'lingkaran' then
begin
n := (objek[1].x+objek[3].x)div 2;
m := (objek[1].y+objek[3].y)div 2;
for i := 1 to 18 do
begin
objek[i].x := objek[i].x-n;
objek[i].y := objek[i].y-m;
Sdt:=45*pi/180;
TempObjek[i].x:= round(objek[i].x*cos(Sdt)-
objek[i].y*sin(Sdt));//rotasi dibalik jika x diganti y dan y diganti
x
TempObjek[i].y:=
round(objek[i].x*sin(Sdt)+objek[i].y*cos(Sdt));
objek[i]:= TempObjek[i];
objek[i].x := objek[i].x+n;
objek[i].y := objek[i].y+m;
end;
end;

FormActivate(Sender);
gambar();
end;
procedure TForm1.BitBtn17Click(Sender: TObject); //left rotation
var
TempObjek: array[1..27] of elemen;
n,m : integer;
Sdt : real;
begin
if tool <> 'lingkaran' then
begin

n := (objek[1].x+objek[3].x)div 2;
m := (objek[1].y+objek[3].y)div 2;
for i := 1 to 18 do
begin
objek[i].x := objek[i].x-n;
objek[i].y := objek[i].y-m;
Sdt:=45*pi/180;

28
 TempObjek[i].y:= round(objek[i].y*cos(Sdt)-
objek[i].x*sin(Sdt));//rotasi dibalik jika x diganti y dan y diganti
x
TempObjek[i].x:=
round(objek[i].y*sin(Sdt)+objek[i].x*cos(Sdt));
objek[i]:= TempObjek[i];
objek[i].x := objek[i].x+n;
objek[i].y := objek[i].y+m;
end;
end;
FormActivate(Sender);
gambar();
end;
Modul Program 3.11 Procedure Rotasi (Rotation)
procedure TForm1.BitBtn18Click(Sender: TObject); //upper left
begin
for i:=1 to banyak do
begin
Objek[i].x := Objek[i].x-SpinEdit1.Value;
Objek[i].y := Objek[i].y-SpinEdit1.Value;
end;
hapus();
gambar();
end;

procedure TForm1.BitBtn19Click(Sender: TObject); //up

begin
for i:=1 to banyak do
begin
Objek[i].y := Objek[i].y-SpinEdit1.Value;
end;
hapus();
gambar();
end;

procedure TForm1.BitBtn20Click(Sender: TObject); //up right

begin
for i:=1 to banyak do
begin
Objek[i].x := Objek[i].x+SpinEdit1.Value;
Objek[i].y := Objek[i].y-SpinEdit1.Value;
end;
hapus();
gambar();
end;

procedure TForm1.BitBtn25Click(Sender: TObject); //left

begin
for i:=1 to banyak do
begin
Objek[i].x := Objek[i].x-SpinEdit1.Value;
end;
hapus();
gambar();
end;

procedure TForm1.BitBtn21Click(Sender: TObject); //right

begin
for i:=1 to banyak do

29
 begin
Objek[i].x := Objek[i].x+SpinEdit1.Value;
end;
hapus();
gambar();
end;

procedure TForm1.BitBtn24Click(Sender: TObject); //down left

begin
for i:=1 to banyak do
begin
Objek[i].x := Objek[i].x-SpinEdit1.Value;
Objek[i].y := Objek[i].y+SpinEdit1.Value;
end;
hapus();
gambar();
end;

procedure TForm1.BitBtn23Click(Sender: TObject); //down

begin
for i:=1 to banyak do
begin
Objek[i].y := Objek[i].y+SpinEdit1.Value;
end;
hapus();
gambar();
end;

procedure TForm1.BitBtn22Click(Sender: TObject); //down right

begin
for i:=1 to banyak do
begin
Objek[i].x := Objek[i].x+SpinEdit1.Value;
Objek[i].y := Objek[i].y+SpinEdit1.Value;
end;
hapus();
gambar();
end;
Modul Program 3.12 Procedure Translasi (Translation)
procedure TForm1.BitBtn27Click(Sender: TObject); //skew horizontal
begin
if banyak=4 then
begin
Objek[1].x := Objek[1].x+10;
Objek[2].x := Objek[2].x+10;
Objek[3].x := Objek[3].x-10;
Objek[4].x := Objek[4].x-10;
FormActivate(Sender);
gambar();
end;
if banyak=12 then
begin
objek[1].x:= objek[1].x+10;
objek[2].x:= objek[2].x+10;
objek[3].x:= objek[3].x-10;
objek[4].x:= objek[4].x-10;
objek[5].x:= objek[5].x-10;
objek[6].x:= objek[6].x-10;
objek[7].x:= objek[7].x+10;

30
 objek[8].x:= objek[8].x+10;
objek[9].x:= objek[9].x-10;
objek[10].x:= objek[10].x-10;
objek[11].x:= objek[11].x+10;
objek[12].x:= objek[12].x+10;
FormActivate(Sender);
gambar();
end;
if banyak=3 then
begin
Objek[1].x := Objek[1].x-10;
Objek[2].x := Objek[2].x+10;
Objek[3].x := Objek[3].x-10;
FormActivate(Sender);
gambar();
end;
if banyak=6 then
begin
Objek[1].x +=10; Objek[1].y +=0;
Objek[2].x +=10; Objek[2].y +=0;
Objek[3].x -=0; Objek[3].y +=0;
Objek[4].x -=10; Objek[4].y -=0;
Objek[5].x -=10; Objek[5].y -=0;
Objek[6].x +=0; Objek[6].y -=0;
FormActivate(Sender);
gambar();
end;
end;

procedure TForm1.BitBtn28Click(Sender: TObject); skew vertical

begin
if banyak=4 then
begin
Objek[1].y := Objek[1].y-10;
Objek[2].y := Objek[2].y+10;
Objek[3].y := Objek[3].y+10;
Objek[4].y := Objek[4].y-10;
FormActivate(Sender);
gambar();
end;
if banyak=12 then
begin
objek[1].y:= objek[1].y-10;
objek[2].y:= objek[2].y+10;
objek[3].y:= objek[3].y+10;
objek[4].y:= objek[4].y-10;
objek[5].y:= objek[5].y-10;
objek[6].y:= objek[6].y+10;
objek[7].y:= objek[7].y-10;
objek[8].y:= objek[8].y+10;
objek[9].y:= objek[9].y-10;
objek[10].y:= objek[10].y+10;
objek[11].y:= objek[11].y+10;
objek[12].y:= objek[12].y-10;
FormActivate(Sender);
gambar();
end;
if banyak=3 then
begin
Objek[1].y := Objek[1].y-10;

31
 Objek[3].y := Objek[3].y+10;
FormActivate(Sender);
gambar();
end;
if banyak=6 then
begin
Objek[1].x +=0; Objek[1].y +=10;
Objek[2].x +=0; Objek[2].y -=10;
Objek[3].x -=0; Objek[3].y -=10;
Objek[4].x -=0; Objek[4].y -=10;
Objek[5].x -=0; Objek[5].y +=10;
Objek[6].x +=0; Objek[6].y +=10;
FormActivate(Sender);
gambar();
end; end;
Modul Program 3.13 Procedure Skew
procedure TForm1.BitBtn29Click(Sender: TObject); //vertical mirror
begin
Image1.Canvas.Moveto(550,0);
Image1.Canvas.Lineto(550,430);
o:=Image1.Width div 2;
p:=Image1.Height;
for i:=1 to banyak do
begin
objek[i].x:=(objek[i].x-(2*(objek[i].x-o)));
objek[i].y:=objek[i].y;
end;
edit();
gambar();
end;

procedure TForm1.BitBtn30Click(Sender: TObject); //horizontal mirror

begin
Image1.Canvas.Moveto(0,200);
Image1.Canvas.Lineto(1250,200);
o:=Image1.Width ;
p:=Image1.Height div 2;
for i:=1 to banyak do
begin
objek[i].y:=(objek[i].y-(2*(objek[i].y-p)));
objek[i].x:=objek[i].x;
end;
edit();
gambar();
end;
Modul Program 3.14 Procedure Mirror (Pencerminan)
procedure TForm1.ComboBox1Change(Sender: TObject);
begin
case ComboBox1.ItemIndex of
0: style:='dash';
1: style:='dashdot';
2: style:='dashdotdot';
3: style:='dot';
4: style:='solid';
end;
end;
Modul Program 3.15 Procedure Pilihan Style (Tipe Garis)
procedure TForm1.edit();
32
begin
Image1.Canvas.Pen.Color:=ColorButton1.ButtonColor;
case style of
'dot':
Image1.Canvas.Pen.Style:=psDot;
'dash':
Image1.Canvas.Pen.Style:=psDash;
'dashdot':
Image1.Canvas.Pen.Style:=psDashDot;
'dashdotdot':
Image1.Canvas.Pen.Style:=psDashDotDot;
'solid':
Image1.Canvas.Pen.Style:=psSolid;
end;

Image1.Canvas.Pen.Width:=SpinEdit2.Value;
end;
Modul Program 3.16 Procedure Edit() untuk Style
procedure TForm1.hapus();
begin
Image1.Canvas.Brush.Color:=clWhite;
Image1.Canvas.FillRect(0,0,Image1.Width,Image1.Height);
Image1.Canvas.Brush.Color:=warna;
end;
Modul Program 3.17 Procedure Hapus() untuk Perintah Button Eraser
procedure TForm1.tengah();
begin
c := 0;
d := 0;
for j:=1 to banyak do
begin
c := c+objek[j].x;
d := d+objek[j].y;
end;
c := c div banyak;
d := d div banyak;
end;
Modul Program 3.18 Procedure Tengah()
procedure TForm1.gambar();
var
i: Integer;
begin
if tool='lingkaran' then
begin

Image1.Canvas.Ellipse(objek[1].x,objek[1].y,objek[2].x,objek[2].y);
end
else if tool='kubus' then
begin
Image1.Canvas.MoveTo(objek[4].x,objek[4].y);
for i:=1 to 4 do
Image1.Canvas.LineTo(objek[i].x,objek[i].y);
Image1.Canvas.MoveTo(objek[4].x,objek[4].y);
Image1.Canvas.LineTo(objek[5].x,objek[5].y);
Image1.Canvas.MoveTo(objek[3].x,objek[3].y);
Image1.Canvas.LineTo(objek[6].x,objek[6].y);
Image1.Canvas.MoveTo(objek[1].x,objek[1].y);
Image1.Canvas.LineTo(objek[7].x,objek[7].y);

33
 Image1.Canvas.MoveTo(objek[2].x,objek[2].y);
Image1.Canvas.LineTo(objek[8].x,objek[8].y);
Image1.Canvas.MoveTo(objek[12].x,objek[12].y);
for i:=9 to 12 do
Image1.Canvas.LineTo(objek[i].x,objek[i].y);
end
else
begin
Image1.Canvas.MoveTo(objek[banyak].x,objek[banyak].y);
for i:=1 to banyak do
begin
Image1.Canvas.LineTo(objek[i].x,objek[i].y);
end;
end;
end;
Modul Program 3.19 Procedure Gambar()

34
 BAB IV
KESIMPULAN DAN SARAN
2.6. Kesimpulan
Grafika komputer merupakan salah satu cabang dalam ilmu komputer yang memiliki
dua cabang ahli, yaitu pemrosesan citra (image processing) dan pengenalan pola (pattern
recognition). Grafika komputer (computer graphics) mempelajari tentang suatu objek
gambar. Grafika komputer memiliki banyak manfaat dalam kehidupan sehari-hari seperti
dalam bidang pendidikan, perancangan maupun hiburan.
Lazarus adalah sebuah visual IDE (Integrated Development Environment) yang cross
platform dan menyerupai Delphi untuk para developer Pascal dan Object Pascal dan dapat
digunakan untuk pembuatan grafik komputer.
Bentuk dari grafika komputer dapat berupa 2 dimensi dan 3 dimensi. Objek 2 dimensi
menggunakan perspektif 2 titik contohnya persegi, lingkaran, segitiga, garis, polygon,
trapesium, dan jajargenjang. Dalam pembuatan garis dapat menggunakan algoritma DDA
(Digital Differential Analyzer) dan algoritma Bressenham, sedangkan pembuatan lingkaran
digunakan algoritma simetris 8 titik ataupun algoritma titik tengah (mid-point). Untuk elipse
menggunakan algoritma titik tengah. Atribut (semua parameter yang mempengaruhi
bagaimana primitive grafis ditampilkan) dasar untuk titik adalah ukuran dan warna.
Sedangkan garis adalah type (tipe), width (tebal), dan color (warna).
Tujuan dari transformasi objek adalah memindahkan objek tanpa merusak bentuk.
Contoh transformasi dua dimensi adalah translasi, rotasi, skala, dan matriks transformasi.
Fill Area atau pengisian area output primitif antara lain dengan algoritma boundary fill
dan flood fill.
2.7. Saran
Program ini sudah cukup baik, walaupun masih banyak terdapat kekurangan, misalnya
pada canvas terdapat suatu objek yang diberi fill with color, di saat objek tersebut di perbesar
atau di perkecil maka warna yang telah diberikan menghilang. Kemudian file yang tersimpan
hanya dapat dibuka di aplikasi Lazarus.

35