BAB 3 ANALISIS DAN PERANCANGAN 3.1 Analisis Fungsi utama perancangan program aplikasi tugas akhir ini adalah melakukan konversi terhadap citra dengan format raster atau bitmap ke format vektor dengan tipe file yaitu.svg (Scalable Vector Graphics), di mana citra format raster sebagai input dan citra vektor sebagai output-nya, dengan menggunakan metode Canny sebagai metode pendeteksian tepi-nya. Pada aplikasi ini Pengguna dapat mengolah citra raster dengan mengatur banyaknya filter threshold pada citra raster untuk menghasilkan objek citra vektor yang diinginkan. 3.1.1 Analisis Masalah Analisis masalah perancangan program aplikasi ini adalah sebagai berikut: 1. Bagaimana cara membuat objek citra format vektor yang disimpan dalam tipe file.svg (Scalable Vector Graphics) dari input objek citra format raster. 2. Bagaimana cara memakai metode Canny sebagai metode pendeteksian tepi pada citra format raster sehingga dapat menghasilkan objek citra format vektor.
36 3.1.2 Analisis Kebutuhan Analisis kebutuhan perancangan program aplikasi ini adalah sebagai berikut: 1. Mampu menampilkan file citra raster kedalam tatap muka program aplikasi. 2. Mampu melakukan filter threshold pada citra raster, yang dapat diatur sendiri besar parameter threshold-nya oleh pengguna. 3. Mampu menggunakan metode Canny dalam proses pendeteksian tepi citra raster agar dapat menghasilkan citra vektor. 4. Mampu membuat file citra vektor dengan tipe file.svg (Scalable Vector Graphics) dari citra raster yang didapat. 3.1.3 Analisis Pengguna (User) Spesifikasi kemampuan umum yang dimiliki oleh pengguna program aplikasi ini adalah sebagai berikut: 1. Kemampuan menggunakan komputer secara umum. 2. Terbiasa menggunakan aplikasi yang berhubungan dengan pengolahan citra. 3.1.4 Tujuan Pengembangan Program aplikasi ini dirancang dengan tujuan agar memudahkan Pengguna, khususnya Pengguna yang sering bergerak dalam sektor Desain Grafis, Percetakan, dan sebagainya dalam membuat objek citra vektor dari objek citra raster yang diinginkan agar ukuran pada objek vektor yang di hasilkan dapat
disesuaikan dengan media cetak yang diinginkan tanpa terjadi pengurangan kualitas pada citra. 37 3.1.5 Use Case Pada perancangan program aplikasi ini terdapat sebelas proses yaitu, membuka file citra raster, konversi citra raster ke format vektor, mengatur filter threshold, menampilkan citra raster atau objek citra vektor, menyimpan file citra vektor, menampilkan tepi objek, menampilkan isi objek, menampilkan titik titik pada objek, mengubah warna tepi objek, mengubah warna isi objek, dan mengubah warna titik titik pada objek. Aktor yang terlibat dalam diagram use case ini adalah Pengguna, seperti yang tampak pada Gambar 3.1. Gambar 3.1 Diagram Use Case
38 Berikut adalah rincian dari proses proses yang ada pada diagram use case: 1. Membuka file citra raster: Proses ini adalah proses awal yang harus digunakan oleh pengguna, karena bila proses ini tidak dilakukan maka tidak akan ada citra raster yang akan di konversi menjadi objek citra vektor. 2. Konversi citra raster ke format vektor: Proses ini dilakukan oleh Pengguna untuk mengubah citra raster menjadi objek citra vektor, yang hasilnya akan ditampilkan pada layar komputer. 3. Mengatur banyaknya parameter filter threshold: Proses ini adalah untuk menentukan banyaknya parameter filter threshold pada citra raster sebelum dilakukan konversi. 4. Menampilkan citra raster atau objek citra vektor: Proses ini adalah proses untuk memilih apakah ingin menampilkan citra raster atau objek citra vektor pada layar komputer. 5. Menyimpan file objek citra vektor: Proses ini adalah proses untuk menyimpan file objek citra vektor yang di hasilkan dengan tipe file.svg (Scalable Vektor Graphics). 6. Menampilkan tepi objek: Proses ini adalah untuk menampilkan tepi pada citra raster atau objek citra vektor sesuai dengan yang Pengguna pilih untuk ditampilkan pada layar.
39 7. Menampilkan isi objek: Proses ini adalah untuk menampilkan warna isi pada citra raster atau objek citra vektor sesuai dengan yang Pengguna pilih untuk ditampilkan pada layar. 8. Menampilkan titik titik pada objek: Proses ini adalah untuk menampilkan titik titik penghubung pada objek citra vektor atau citra raster sesuai dengan yang Pengguna pilih untuk ditampilkan pada layar 9. Mengubah warna tepi: Proses ini adalah untuk mengubah tepi dari citra raster atau objek citra vektor yang ditampilkan sesuai dengan warna yang Pengguna inginkan. 10. Mengubah warna isi: Proses ini adalah untuk mengubah isi dari objek citra raster atau objek citra vektor yang ditampilkan sesuai dengan warna yang Pengguna inginkan. 11. Mengubah warna titik titik: Proses ini adalah untuk mengubah titik - titik yang di hasilkan dari citra raster atau objek citra vektor yang ditampilkan sesuai dengan warna yang Pengguna inginkan.
40 3.1.6 Sequence Diagram Dari use case yang sudah ada, maka kita akan menganalisa urutan proses proses yang akan dilakukan pada perancangan program yang akan digambarkan dalam sequence diagram (Gambar 3.2). Gambar 3.2 Sequence Diagram
41 3.2 Perancangan 3.2.1 Perancangan Program Dari proses yang terdapat pada diagram use case yang sudah dijelaskan sebelumnya, terdapat tiga metode umum yang akan dibahas pada perancangan program pada aplikasi ini, yaitu membuka dan menampilkan file citra raster, konversi citra raster menjadi objek citra vektor, dan menyimpan file objek citra vektor yang di hasilkan. 1. Membuka dan menampilkan file citra raster: a. Membuka file citra raster: Format file citra raster yang dapat dibuka kedalam program aplikasi ini adalah.bmp,.jpeg,.gif,.png dan.tif b. Mengubah citra raster kedalam matriks biner Sebelum dilakukan konversi, citra raster diubah menjadi matriks biner terlebih dahulu agar dapat dideteksi permukaannya. 2. Konversi citra raster menjadi objek citra vektor: a. Melakukan trace pada citra raster: Dari matriks biner yang sudah didapat, lalu akan dilakukan trace menggunakan metode Canny pada permukaan citra raster yang akan dijadikan dalam bentuk array kurva atau CurveArray. b. Menggambar objek citra vektor: Agar objek citra vektor dapat ditampilkan di layar, maka perlu digambar terlebih dahulu dari CurveArray yang sudah di hasilkan menjadi sebuah GraphicsPath di mana kurva dibagi menjadi dua
42 jenis, yaitu bezier (lengkung) dan garis. GraphicsPath yang sudah di hasilkan akan tampil di layar sebagai objek vektor yang sudah dikenali oleh perangkat lunak yang akan dipakai dalam membuat program aplikasi ini yaitu C Sharp (C#). 3. Menyimpan objek citra vektor kedalam tipe file.svg: Objek vektor yang sudah digambar lalu disimpan kedalam tipe file.svg (Scalable Vector Graphics), agar dapat diolah seperti diubah bentuk, diperbesar, diperkecil, dan sebagainya. Gambar 3.3 Diagram Perancangan Program
43 3.2.2 Perancangan Proses Perubahan Citra Raster ke Matriks Biner Pada program aplikasi ini, citra raster yang sudah dibuka akan dilakukan perubahan menjadi matriks biner dengan parameter threshold yang telah ditentukan, berikut adalah perancangan flowchart dari algoritma perubahan citra raster menjadi matriks biner: Gambar 3.4 Flowchart perubahan citra raster ke matriks biner
44 3.2.3 Perancangan Proses Trace Setelah matriks biner di hasilkan, maka akan diubah menjadi PathList yaitu kumpulan jalur tepi yang akan dicari perhitungan polygon yang optimalnya dengan non maximum surpression. Setelah didapat polygon yang optimal, lalu dibuat sebuah CurveArray yang merupakan kumpulan dari kurva-kurva pada polygon dan merupakan representasi vektor dari citra. Gambar 3.5 Flowchart proses trace
45 3.2.4 Perancangan Proses Menggambar GraphicsPath Dari CurveArray yang didapat, agar objek vektor dapat ditampilkan di layar perlu didefinisikan sebagai polygon dalam sebuah GraphicsPath. Berikut adalah flowchart proses menggambar GraphicsPath: Gambar 3.6 Flowchart proses menggambar GraphicsPath
46 3.2.5 Perancangan Algoritma Canny Prosedur prosedur pada algoritma Canny yang sudah dijelaskan pada landasan teori dipecah ke proses proses yang berbeda. Pada proses perubahan citra raster ke matriks biner, citra raster dilakukan filter Gaussian terlebih dahulu untuk menghilangkan noise yang ada. Setiap pixel pada citra raster akan dilakukan perkalian terhadap matriks bobot gaussian 5x5 dengan 1.4. Berikut adalah contoh perhitungannya: Misalkan kita mempunyai input citra raster yang pixel pixel-nya sudah diubah kedalam matriks biner yaitu: Gambar 3.7 Nilai pixel pixel dalam citra sebagai input Di mana pada pixel pixel yang berada di wilayah batas merah adalah pixel pixel yang akan dikalikan dengan matriks bobot 5x5 yang sudah dinormalisasi dengan pixel yang mempunyai nilai 200 yang diberi bold merupakan titik tengahnya.
47 Gambar 3.8 Matriks bobot Gaussian filter dengan 1.4 Perkalian matriks dilakukan dengan cara convolution yaitu: 3,3 = 100 0.012 200 0.025 100 0.031 100 0.025 120 0.012 30 0.025 100 0.056 200 0.075 30 0.056 30 0.025 120 0.031 30 0.075 200 0.094 100 0.075 120 0.075 100 0.025 30 0.056 120 0.075 100 0.056 100 0.025 30 0.012 200 0.025 100 0.031 120 0.025 200 0.012 Dari perkalian matriks yang sudah dijabarkan di atas, maka kita akan mendapatkan pixel hasil dengan nilai 113.43 dengan pixel yang terletak di titik
48 (3,3). Proses ini akan dilakukan perulangan hingga seluruh pixel pada citra raster akan memiliki citra raster baru yang sudah dilakukan Gaussian filter. Matriks biner didapat dari nilai pixel pixel pada citra raster yang sudah dilakukan Gaussian filter dengan nilai 0 pada pixel yang berada di bawah batas threshold dan 1 pada nilai pixel yang di atas batas threshold. Pada matriks biner yang sudah dihasilkan, untuk melakukan trace pada citra raster, maka matriks biner akan dilakukan perkalian dengan matriks operator sobel mask 3x3 pada kedua arah yaitu horizontal dan vertikal. Matriks operator akan dinotasikan dengan mx untuk matriks operator horizontal, serta my untuk matriks operator vertikal. Misal, kita mempunyai input matriks biner yang dinotasikan oleh a yang merupakan hasil dari citra raster yang diinput, untuk mencari gradien tepi, maka matriks biner akan dilakukan perkalian dengan kedua matriks operator mx dan my untuk mendapatkan gradien arah horizontal (Gx) dan vertikal (Gy). Gambar 3.9 Sobel mask arah horizontal (mx) dan vertikal (my).
49 Gambar 3.10 Contoh matriks biner Perkalian matriks dilakukan dengan cara convolution, yaitu: 1 1 0 0 0 1 1 2 1 0 1 2 0 1 0 0 1 1 dan 1 1 0 2 0 1 1 0 1 0 1 0 0 1 0 2 1 1 Setelah dilakukan perkalian matriks, kita mendapat Gx dengan hasil 2, dan Gy dengan hasil 0. Kemudian, Gx dan Gy yang sudah didapat akan dijumlahkan untuk mendapatkan vektor gradien G(x,y) dan besar gradien Gm,
50 Karena kita baru melakukan perkalian pada satu pixel maka G(x,y) yang dihasilkan adalah 2+0 = 2, sedangkan kita mendapatkan Gm dengan nilai 2. Proses di atas akan terus dilakukan perulangan hingga pada seluruh pixel pada citra sudah dilakukan perkalian, dan G(x,y) dan Gm akan di generate menjadi sebuah PathList. Gambar 3.11 Flowchart algoritma Canny
51 3.2.6 Perancangan Flowchart Program Untuk melihat gambaran keseluruhan cara kerja program aplikasi ini, digunakan flowchart. Flowchart pada program aplikasi ini adalah sebagai berikut: Gambar 3.12 Flowchart Program Aplikasi
52 3.2.7 Perancangan Tampilan Layar Sebelum membuat program aplikasi konversi ini, sangatlah penting untuk membuat rancangan tampilan layar atau tatap muka, yang akan terlihat oleh Pengguna pada saat mengoperasikan program aplikasi ini. Pada program aplikasi ini terdapat dua halaman tatap muka, yaitu halaman vektorisasi dan halaman about, untuk lebih jelasnya dapat dilihat pada gambar dibawah ini: Gambar 3.13 Rancangan layar halaman awal
Gambar 3.14 Rancangan layar halaman about 53