IT: Pengolahan Citra 3: Bitmap

Pada pertemuan 3 ini kita akan mempelajari mengenai Bitmap. Jika sebelumnya pada pertemuan 1 dan 2 kita mempelajari pengolahan citra dengan pixel, maka sekarang ini kita akan mempelajari yang namanya Bitmap.

Pada pertemuan yang lalu, cara kita mengolah citra adalah sebagai berikut:

Kita melakukan grab pixel dari image agar bisa kita proses dalam pemrograman dengan nilai integer. Pada saat proses, kita pisahkan antara R, G, dan B. Hasil grab pixel tersebut ditampung dalam array integer 1 dimensi, pada pertemuan sebelumnya array itu kita beri nama pixels. Sampai pada proses ini, boleh langsung kita proses. Boleh dibuat grayscale, brightness, dibinerkan, atau yang lainnya. Setelah proses ini, kita bias tampilkan per pixel dengan fungsi drawLine, drawOval, atau drawRectangle.

Cara pada pertemuan kedua ini bisa kita gunakan namun dalam pertemuan 3 ini, kita akan menampilkan flip vertikal, flip horizontal, dan flip vertikal horizontal. Jika kita hanya menggunakan array 1 dimensi, kira-kira hal itu pasti cukup merepotkan kita karna harus mebalik-balikkan koordinat. Mengapa kita harus sibuk mengatur koordinat? Karena kita bermain dengan satu canvas, berbeda halnya jika kita menggunakan Delphi. Langsung kita bahas mengenai bitmap.

Jika kita mempunyai array 2 dimensi, kita lihat gambar yang kita miliki. Gambar/citra yang kita miliki itu sebenarnya adalah gambar 2 dimensi. Pada array 2 dimensi, harus ada pixel baris dan kolom. Dalam array 2 dimensi, diperbolehkan jika dimensi pertama kita anggap sebagai baris, dimensi kedua kita anggap sebagai kolom atau sebaliknya. Nilai pixel disimpan dalam setiap cell pada array 2 dimensi. Yang membedakan saat kita menggunakan array 1 dimensi adalah pada array 2 dimensi, setiap R, G dan B dibuatkan masing-masing satu bitmap array agar nantinya mudah saat ingin dipakai. Ambil setiap R ke dalam cell yang ada dalam bitmap R, begitu juga dengan G dan B. selama pembelajaran ini, setiap pencampuran Bitmap R, G, dan B kita siapkan array 2 dimensi untuk penampung citra warna yang dihasilkan dari pencampuran bitmap R, G, dan B. setelah kita mendapatkan ketiga bitmap dari R, G, dan B, jika kita ingin membuat citra itu jadi flip vertikal kita hanya perlu mengatur menampilkan setiap cell pada bitmap hasil yang telah disiapkan. Yang diperlukan di sini adalah teknik pemrograman untuk looping. Di sini kita menggunakan looping for di dalam looping for. Untuk lebih jelasnya, nanti akan kita bahas dalam source code praktikum pertemuan 3 ini. Berikut ini adalah gambar analogi untuk menempatkan pixel dalam cell setiap bitmap R, G, dan B ke dalam bitmap hasil:

Bitmap RGB diproses menghasilkan Bitmap Vertikal:

Bitmap RGB diproses menghasilkan Bitmap Horizontal:

Bitmap RGB diproses menghasilkan Bitmap Vertikal-Horizontal:

Dari gambaran di atas, untuk pemula, kita yang baru belajar, tidak ada salahnya sedikit lebih boros memori yaitu dengan menggunakan 12 array untuk menampung array Red, Green, dan Blue, lalu array Bitmap Vertikal Red, Green, dan Blue, array Bitmap Horizontal Red, Green, dan Blue, dan array Bitmap Vertikal-Horizontal Red, Green, dan Blue. Lebih jelasnya seperti apa kita memprogram, nanti akan dijelaskan pada saat pembuatan source program.

Berikut ini adalah source program untuk membuat Bitmap:

Pada source code di atas, pada awal penulisan program kita lihat ada bagian deklarasi aray untuk bitmap. Total kita deklarasikan 12 array 2 dimensi untuk bitmap RGB, vertikal RGB, horizontal RGB, dan vertikal-horizontal RGB. Selanjutnya di akhir penulisan program yaitu pada saat kita akan menampilkan hasil citranya, dapat kita lihat di sana terdapat cara 1 dan cara 2 yang dibuat sebagai command. Array 2 dimensi yang kita buat sebanyak 12 array akan kita gunakan jika kita ingin menggunakan cara 1. Artinya ke-12 array tersebut tidak berguna jika kita gunakan cara ke-2.

Kita bahas sedikit mengenai cara pembuatan source code di atas:

Mengambil informasi lebar dan tinggi citra:

lebar = img.getWidth(this);

tinggi = img.getHeight(this);

Selanjutnya, kita sediakan array 2 dimensi untuk bitmap dengan format seperti berikut:

int [ ][ ] bitmapR = new int[lebar][tinggi];

Untuk mengisi Bitmap:

for(int j=0;j<tinggi;j++)

{

for(int i=0;i<lebar;i++)

{

warna = pixels[j*lebar+i];

red = (warna >> 16) & 0xff;

bitmapR[i][j] = red;

}

Berikutnya akan kita bahas mengenai 2 cara yang ada dalam source code di atas.

Source code di atas ini dapat kita lihat kita menggunakan 12 array 2 dimendi yang telah kita deklarasikan di awal program. Untuk menjalankan cara 1 ini diperlukan pengisian nilai i dan nilai j. Cara pengisiannya adalah seperti berikut ini:

Jadi, sebelum kita gunakan cara 1 sebagai penampilan citra, kita harus menentukan letak pixel yang ada dalam setiap cell dari bitmap-bitmap yang ada seperti potongan source code di atas ini.

Sedangkan, untuk cara kedua kita tidak perlu mengisikan looping untuk pindah ke bitmap-bitmap vertikal, horizontal, ataupun vertikal horizontal. Kita hanya menggunakan 3 bitmap yaitu Red, Green dan Blue yang kita gunakan sebagai penampung untuk masing-masing warna. Maka dari itu, kita tidak perlu menggunakan sampai 12 array. Kita hanya perlu menggunakan 3 array yang sudah pasti harus ada. Maka looping untuk mengisi tampilan citra dengan cara kedua adalah sebagai berikut:

Dapat kita lihat bahwa baik normal, vertikal, horizontal, maupun vertikal-horizontal, kita menggunakan bitmap yang sama yaitu bitmapRed untuk warna merah, bitmapGreen untuk warna hijau, dan bitmapBlue untuk warna biru. Yang perlu diubah di sini hanya parameter i dan j saja yang menentukan di cell mana pixel akan diletakkan. Penempatan parameter i dan j ini jika kita lihat sama saja dengan cara 1 saat kita mau mengisikan nilai bitmap vertikal, horizontal, dan vertikal-horizontal dari bitmapRed, bitmapGreen, dan bitmapBlue. Pada intinya, menggunakan cara 1 atau 2 akan sama saja, tidak akan berpengaruh pada tampilan. Hanya saja, jika kita gunakan cara ke dua maka kita akan lebih menghemat memori yang akan digunakan untuk 9 array 2 dimensi yang kita gunakan untuk cara 1.

Berikutnya adalah source code untuk tampilan, yaitu source code untuk program html: