IMAGE PROCESSING PADA APLIKASI COMIC READER UNTUKMENAMPILKAN BAGIAN SCENE DALAM KOMIK CETAK

Shara Yustria F.Jurusan Teknik InformatikaFakultas Teknologi Industri

Universitas Gunadarma20 Oktober 2012

ABSTRAKSI

Komik adalah suatu bentuk seni yang menggunakan gambar-gambar tidak bergerak

yang disusun sedemikian rupa sehingga membentuk jalinan cerita. Biasanya, komik

dicetak di atas kertas dan dilengkapi dengan teks. Untuk kemudahan dalam membaca

komik, saat ini muncul aplikasi Comic Reader yang merupakan aplikasi mobile yang

diterapkan pada smartphone Android. saat ini aplikasi comic reader berbasis android

masih menampilkan gambar yang terlalu kecil.

Oleh karena itu untuk membuat tampilan pada komik reader menjadi lebih

besar maka dilakukan Image Processing agar tampilan yang dihasilkan berupa

tampilan per scene. Istilah image processing atau pengolahan citra secara umum

didefinisikan sebagai pemrosesan citra dua dimensi dengan computer. Yang dalam

penerapannya pengolahan citra digunakan untuk memperbaiki kualitas suatu citra

agar menjadi lebih baik sebagai contoh, penerapan pada aplikasi comic reader.

Dengan image processing ini maka tampilan komik akan lebih baik, karena tidak

perlu melakukan proses zoom in dan zoom out. Hasil tampilannya akan menjadi lebih

besar dan jelas.

Kata Kunci : Image Processing, Komik, Comic Reader, Matlab

1. Pendahuluan

1.1 Latar Belakang

Umumnya saat ini aplikasi

comic reader berbasis android masih

menampilkan gambar yang terlalu

kecil, hal ini dikarenakan gambar dari

komik tersebut masih berdasarkan

tampilan perhalaman komik, hal ini

tentunya membuat para pembaca

komik menjadi kesulitan dalam

menggunakannya, karena harus

melakukan zoom in dan zoom out tiap

kali ingin membaca. Dengan image

processing ini maka tampilan komik

akan lebih baik, karena tidak perlu

melakukan proses zoom iin dan zoom

out. Hasil tampilannya akan menjadi

lebih besar dan jelas.Uraian

sebelumnya merupakan latar belakan

untuk dilakukan penelitian tentang

”Image Processing Pada Aplikasi

Comic Reader Untuk Menampilkan

Bagian Scene Dalam Komik Cetak”.

1.3 Batasan Masalah

Batasan masalah dari penelitian

ini dibatasi pada proses pemisahan tiap

scene pada komik dan hasil

pengolahan citra untuk comic reader

ini diterapkan pada perangkat mobile

berbasis android.

1.4 Tujuan Penelitian

Tujuan penelitian ini adalah

untuk menghasilkan komik yang dapat

ditampilkan tiap scene. Dengan cara

ini maka pembaca komik dapat dengan

mudah untuk membaca tanpa zoom in

dan zoom out.

2. Tinjauan Pustaka

2.1 Pengolahan Citra

Pengolahan Citra merupakan

proses pengolahan dan analisis citra

yang banyak melibatkan persepsi

visual[1] Dalam definisi yang lebih

luas, pengolahan citra digital juga

mencakup semua data dua dimensi.

Agar citra yang mengalami ganguan

mudah direpresentasikan maka citra

tersebut perlu dimanipulasi menjadi

citra lain yang kualitasnya lebih baik.

Pengolahan citra adalah pemrosesan

citra khususnya dengan menggunakan

komputer menjadi citra yang lebih

baik.

2.2 Operasi Morfologi

Operasi-operasi morfologi pada

Matlab menyediakan informasi tentang

bentuk atau struktur sebuah citra.

Dibawah ini merupakan tabel yang

menunjukkan tipe-tipe operasi

morfologi pada Matlab beserta

keterangan singkat mengenai operasi

tersebut.

Semua operasi morfologi bekerja pada

citra biner. Beberapa dari perintah-

perintah tersebut, seperti fungsi

perimeter dan euler number,

memungkinkan untuk melaksanakan

operasi 4 sampai 8 ‘tetangga’ yang

berhubungan.

2.3 Operasi Dilasi dan Erosi

(Dilation and Erosion)

Operasi dilasi dan erosi melakukan

penambahan dan pengurangan piksel

pada citra biner. Fungsi/perintah dilate

menambahkan pixel pada pinggiran

tiap objek biner, yaitu daerah yang

memiliki nilai 1. perintah ini memiliki

Seperti halnya fungsi dilate, maka

fungsi erode juga bisa menggunakan

structuring element (elemen

penstruktur). Dalam hal ini, erode

hanya meninggalkan piksel-piksel

pada citra yang memiliki konfigurasi

tetangga yang cocok dengan

konfigurasi dari nilai 1 pada elemen

penstruktur.

2.4 Algoritma Dengan Dasar

Morfologi.

etika berhadapan dengan citra

biner, aplikasi utama dari morfologi

adalah pengekstrakan komponencitra

yang berguna dalam representasi dan

deskripsi bentuk.

2.5 Region Filling

Algoritma sederhana untuk

region filling didasarkan pada

sejumlah dilasi, komplementasi, dan

interseksi. Toolbox yang disediakan

matlab untuk melakukan region filling

adalah imfill dengan sintaks dasar ada

3 bentuk:

Bentuk 1: BW2 = imfill(BW,locations)

Bentuk 2: BW2 = imfill(BW,’holes’)

Bentuk 3: BW2 = imfill(BW)

Bentuk 2, mengisi lubang citra biner

BW. Sebuah lubang yang merupakan

sekumpulan piksel background yang

tidak dapat dicapai dengan pengisian

background dari tepi citra.

2.6Connected-ComponentsLabelling

fungsi bwlabel untuk

membentuk Connected-Components

Labelling, yaitu metode untuk

menandai setiap objek diskrit pada

citra biner[4], yaitu metode untuk

menandai setiap objek diskrit pada

citra biner. dapat menentukan citra

biner masukkan dan tipe ketetanggaan,

dan fungsi bwlabel menghasilkan

sebuah matriks dengan ukuran yang

sama dengan citra masukan. Objek-

objek berbeda di citra masukkan

dibedakan oleh nilai integer berbeda

pada citra keluaran.

2.7 Boundary Segmentation

Dekomposisi mengurangi

kompleksitas boundary dan

menyederhanakan proses deskripsi[5].

Pendekatan ini atraktif ketika

boundary berisi satu atau lebih

concavities signifikan yang membawa

informasi bentuk. dalam prakteknya,

jenis pemrosesan ini biasanya

digunakan image smoothing untuk

mengurangi jumlah concavities yang

tidak signifikan. Fungsi dalam Matlab

yang digunakan untuk dekomposisi

boundary dalam pengertian yang baru

dijelaskan adalah fungsi regionprops.

3. Analisis dan Perancangan

3.1 Analisis

Ada beberapa tahapan yang

harus dilakukan dalam sistem

pemisahan scene komik ini, pada

langkah awal yakni akuisisi citra

dilakukan pengambilan data. kemudian

diikuti dengan langkah selanjutnya

yakni pembacaan citra. Setelah

dilakukan pemrosesan citra, maka

program akan menampilkan hasil

pemisahan citra yang berupa citra

perscene. tahapan ini dapat dilihat

dalam langkah-langkah singkat pada

Gambar 3.1.

3.1 Blok Diagram Sistem

3.2 Algoritma Pemotongan Scene

pada Komik Cetak

Berikut ini adalah alogritma

pemotongan scene yang disusun

menggunakan UML Activity diagram:

1. Pembacaan Citra pada File

Pembacaan Citra merupakan

inti dalam menjalankan

program ini, program akan

baru bisa dijalankan apabila

terdapat citra yang telah dibaca

atau dimasukkan sebelumnya.

pembacaan citra pada program

ini adalah dengan membaca

nama file beserta direktori yang

diinput oleh user. Proses

pembacaan citra pada Matlab

dapat digunakan dengan

menggunakan fungsi imread.

2. Tahap Operasi Erosi pada Citra

Grayscale

Pada program ini diakukan

fungsi erosi agar mengubah

citra menjadi sedikit lebih

gelap. penerapan erosi pada

citra grayscale tidaklah akan

menghasilkan hasil yang sama

seperti citra biner, dapat dilihat

pada Gambar. 3.1 dimana hasil

erosi pada citra grayscale akan

terlihat lebih gelap

dibandingkan dengan dilasi

yang tampak lebih terang.

Gambar. 3.1 Perubahan Citra Asli

Menjadi Citra Tererosi

3. Tahap Pengubahan ke Citra

Biner

Pada tahap ini untuk mengubah

citra asli menjadi citra biner,

dilakukan proses tresholding

dimana akan dihasilkan citra

yang hanya bewarna hitam dan

putih. Dapat dilihat pada

Gambar 3.2 bahwa Citra

tererosi diubah menjadi citra

Biner, dimana citra biner

merupakan citra yang hanya

berwarna hitam dan putih.

Gambar 3.2 Perubahan Citra Tererosi

Menjadi Citra Biner

4. Pengisian Daerah Objek

Proses pengisian area objek ini

menggunakan fungsi imfill

(image fill). Fungsi holes

adalah fungsi yang

mengartikan bahwa objek yang

sudah dideteksi akan diberi

semacam lubang putih yang

mengisi area objek di

dalamnya. Pada Gambar3.3

dapat dilihat bahwa citra biner

yang terisi lebih banyak

mengandung warna putih atau

pixel dengan bilangan 0.

Gambar 3.3 Perubahan Citra Biner

Menjadi Citra Biner Yang Terisi

5. Pelabelan Komponen yang

Terhubung (Connected-

Components Labelling)

Dengan menggunakan bwlabel

maka objek citra biner yang

telah diisi menggunakan imfill

dapat terhubung dan dilabeli.

Bwlabel digunakan untuk

menandai tiap objek yang telah

terisi dan hal ini berguna untuk

memudahkan dalam proses

boundary segmentation

menggunakan bounding box.

6. Boundary Segmentation

Selanjutnya adalah

mendekomposisi boundary ke

dalam segmen, menggunakan

bentuk Pengukuran Bounding

Box dalam proses

segmentasinya. bounding box

yang dilakukan adalah untuk

mengidentifikasikan tiap objek

dalam citra yang sudah

terhubung oleh proses bwlabel.

Dapat dilihat pada Gambar 3.4

bahwa terjadi proses

segmentasi bounding box. Pada

gambar ini bounding box

mensegmentasi tiap-tiap objek.

Gambar 3.4 Perubahan Citra

Biner Yang Terisi Menjadi

Citra Tersegmentasi

7. Tahap pengisian Bounding Box

pengisian citra dilakukan untuk

mengisi tiap bounding box

yang terdapat pada objek citra

guna menghasilkan citra yang

terisi penuh tiap scenenya.

Pada Gambar3.5 dapat dilihat

bahwa tiap segmentasi

bounding box diisii kembali

untuk menghasilkan tiap scene

yang kosong. maka dihasilkan

beberapa bentuk atau pola dari

scene-scene yang ada pada

Citra Asli.

Gambar 3.5 Perubahan Ke Citra

Bounding Box Yang Telah Terisi

8. Tahap Pemotongan Scene

Pemotongan (Croping) gambar

adalah memotong bagian objek

dari suatu gambar. pada proses

ini, citra dipotong berdasarkan

pola yang telah diberikan pada

prosessebelumnya.Pemotongan

scene ini dilakukan dengan

menggunakan fungsi imcrop.

Gambar 3.6 menunjukkan hasil

dari pemotongan tiap scene

pada citra asli. Pemotongan

didasarkan pada pola yang

dihasilkan pada proses

pengisian bounding box

sebelumnya.

Gambar 3.6. Hasil Pemotongan

Citra Asli

9. Perbaikan Kualitas Citra

Perbaikan citra ini dilakukan

untuk memperbaiki citra asli

yang kurang bagus diakibatkan

dari proses akuisisi citra yang

diperoleh denganmenggunakan

media scanner. Pada proses ini

digunakan fungsi imcontrast

4. Implementasi dan Evaluasi

4.1 Implementasi dan Pengujian

Program

Sebelum dilakukan proses

implementasi, perlu diperhatikan

beberapa hal agar

Proses yang dilakukan dapat

memberikan hasil yang bermanfaat.

Diantaranya yaitu menyiapkan data

berupa image komik yang akan

digunakan untuk proses implementasi.

Berikut adalah citra komik

yang digunakan sebagai objek dalam

proses pemisahan scene atau panel :

1. Citra komik diperoleh dari

proses scanned dan kemudian

disimpan pada direktori kerja.

Hasil uji coba dinyatakan

berhasil apabila dapat

memisahkan tiap scene dari

citra asli komik. Pada

implementasi ini digunakan

citra sebagai berikut:

Gambar 4.1 Citra Asli

2. Untuk menjalankan program

user harus terlebih dahulu

membuka file crop.m pada

Matlab dan klik tombol “Run”

pada tool bar. Setelah program

dijalankan maka user harus

menginput nama gambar yang

akan diproses kemudian tekan

enter. atau dengan cara lain

user dapat mengetikkan nama

file.m yang akan dijalankan

pada command window dan

tekan enter untuk menjalankan

program tersebut.

3. setelah dilakukan penginputan

citra, maka program akan

menampilkan 6(enam) buah

citra sekaligus yang masing-

masing merupakan tahapan-

tahapan proses sebelum

dilakukannya pemotongan

scene.

4. Untuk menampilkan tiap scene

yang telah terpisah, user perlu

memillih tombol “yes” pada

kotak dialog. berikut tampilan

scene yang sudah terpisah yang

dilakukan pada Gambar

4.1Citra Asli:

(a) (b)

(c) (d)

(e) (f) (g)

Gambar 4.3 (a)s/d(g) Scene yang

sudah terpisah dari Citra Asli

5. Untuk memperbaiki kualitas

citra dari tiap scene,

sebelumnya user perlu

menyimpan tiap scene yang

sudah terpisah pada direktori,

dan menjalankan program

perbaikan_citra.m. kemudian

klik tombol “Run” pada toolbar

atau dengan cara lain user

dapat mengetikkan nama file.m

yang akan dijalankan pada

command window dan tekan

enter untuk menjalankan

program tersebut.

6. Dengan adanya dengan adanya

kotak imcontrast ini user dapat

memperbaiki kualitas citra

sesuai dengan yang inginkan,

hanya dengan cara menggeser

garis merah pada kotak, citra

akan secara otomaris menjadi

jelas dan cerah. Dan klik

tombol Adjust data untuk

mengimplementasikan

perubahan tersebut.

7. Dengan dilakukan perbaikan

citra menggunakan imcontrast

maka citra yang semula tampak

kurang kurang baik, menjadi

citra yang lebih jelas dan cerah.

Hal ini tentunya dimaksudkan

agar proses membaca komik

menjadi lebih nyaman. Berikut

tampilan scene yang telah

diperbaiki kualitasnya;

(a) (b)

(c) (d)

(e) (d) (f)

Gambar 4.4 (a)s/d(f) perbaikan

kualitas citra scene pada Gambar

4.1Citra Asli 1

4.2 Implementasi pada aplikasi

Comic Reader

Aplikasi comic reader dibuat

agar proses membaca komik menjadi

lebih mudah bagi para user yang tidak

ingin repot dalam membawa komik

cetak. Dalam pengimplementasian

pada comic reader ini tentunya

membutuhkan tiap scene komik yang

sudah terpisah dan yang sudah

diperbaiki kualitasnya pada

pemrosesan citra sebelumnya. Dengan

begitu aplikasi ini akan menghasilkan

aplikasi yang proses pembacaan

komiknya menjadi nyaman

dikarenakan citra yang ditampilkan

besar dan jelas. Berikut merupakan

implementasi daripada scene yang

telah terpisah pada aplikasi mobile

android comic reader.

(a) (b)

Gambar 4.5 (a)&(b) Implementasi

scene pada aplikasi Comic Reader

4.3 Evaluasi

Hasil dari pengujian ini

membuktikan bahwa citra yang

diproses tidak mengalami pengurangan

kualitas, melainkan sama sepertihalnya

sebelum diproses. Dengan

dilakukannya perbaikan citra pada

program perbaikan_citra.m maka citra

tiap scene menjadi citra yang lebih

jelas dan cerah dibandingkan dengan

citra asli yang sedikit buram.

5 Kesimpulan dan Saran

5.1 Kesimpulan

Dari hasil percobaan yang

dilakukan dengan menggunakan

beberapa citra komik cetak, dapat

disimpulkan bahwa proses yang

dilakukan pada citra asal, telah

berhasil memisah scene dalam satu

halaman sehingga menghasilkan

scene-scene yang terpisah. Program

yang telah dibuat hanya mampu dalam

memisahkan scene pada komik cetak

yang sebagian besar berbentuk kotak.

Hasil dari pemisahan scene komik ini

dapat diterapkan pada aplikasi mobile

android Comic Reader.

5.2 Saran

Ketidakmampuan program

dalam memisahkan tiap scene pada

komik yang berbentuk tidak beraturan,

dapat dikembangkan lagi untuk

penelitian lebih lanjut. akan lebih

optimal bila menggunakan citra yang

baik, dimana keterhubungan antar

pikselnya jelas sehingga memudahkan

pada proses pemisahan scene

Referensi

[1] Anonim, URL:http://elektronika-dasar.com/teori-elektronika/definisi-dan-pengolahan-citra-digital/ Akses:30 September 2012,

[2] [4] Wijaya, Marvin CH,Pengolahan Citra Dijital MenggunakanMATLAB, Informatika Bandung,2007.

[3]Anonim,URL:http://www.mathworks.com/help/images/ref/imcontrast.html, Akses:9Agustus 2012,

[5] Prasetyo,Eko, Pengolahan CitraDigital dan Aplikasinya MenggunakanMatlab. CV. ANDO OFFSET,2011.

[6] Anonim, URL:http://www.creative-instrument.com/dokumen/image.pdf,Akses: 1 Agustus 2012,

[7] Anonim, URL:http://202.91.15.14/upload/files/1585_Modul4.pdf ,Akses: 20 September2012,

[8] IlmuKomputer.com. PengantarUnified Modeling Language(UML).2001.ilmukomputer