i

Pengembangan Canvas J2ME : Gradasi Kotak DOKUMENTASI

untuk memenuhi kelulusan

Kaderisasi Divkom 2009

Prosedur Tugas Akhir

Oleh :

Ananto Eka Prasetiadi 132 06 008

Divisi Komputer HME ITB

SEKOLAH TEKNIK ELEKTRO DAN INFORMATIKA INSTITUT TEKNOLOGI BANDUNG

2009

ii

LEMBAR PENGESAHAN

Pengembangan Canvas J2ME : Gradasi Kotak

DOKUMENTASI Oleh:

Ananto Eka Prasetiadi 132 06 008

Divisi Komputer

Telah disetujui dan dishkan sebagai persyaratan memperoleh gelar

KRU

pada DIVISI KOMPUTER

HIMPUNAN MAHASISWA ELEKTRO INSTITUT TEKNOLOGI BANDUNG

Bandung, 11 Juli 2009

Telah diperiksa, diuji, disetujui dan disahkan oleh :

Mengetahui,

Penguji IIPenguji I Penguji III

Ketua BPAKKD

iii

iv

Kata Pengantar

Puji syukur dipanjatkan kepada Allah SWT, karena atas rahmat dan karunia-Nya, penulis dapat menyelesaikan dokumentasi tugas akhir ini. Dokumentasi yang berjudul “Pengembangan Canvas J2ME : Gradasi Kotak” menitikberatkan pada pengembangan canvas J2ME, terutama dalam pembuatan gradient dengan objek yang berbentuk kotak. Jenis gradasi yang akan dibuat ada 6, yaitu horizontal, vertical, diagonal 1, diagonal 2, form center, dan from corner. Dengan adanya pengembangan ini, diharapkan programmer lebih mudah membuat gambar dengan kualitas yang lebih baik.

Dalam penulisan dokumentasi ini, penulis mengucapkan terima kasih kepada Bayu Ahadi Artanggaprana yang telah memberikan usulannya untuk memperbaiki dokumentasi ini. Penulis juga menyadari bahwa penulisan dokumentasi ataupun pembuatan programnya sendiri belum sempurna. Oleh karena itu, penulis mengharapkan kritik dan saran yang membangun untuk meningkatkan kualitas program ataupun dokumentasi ini. Akhir kata, penulis berharap agar dokuemntasi ini bermanfaat bagi pembaca.

Bandung, Agustus 2009

Penulis

Ananto Eka Prasetiadi

v

Daftar Isi

Pengembangan Canvas J2ME : Gradasi Kotak...................................................................................i

LEMBAR PENGESAHAN.....................................................................................................................ii

Kata Pengantar ................................................................................................................................ iv

Daftar Isi ...........................................................................................................................................v

Daftar Gambar.................................................................................................................................vi

Bab I Pendahuluan............................................................................................................................1

1.1 Latar Belakang ....................................................................................................................1

1.2 Identifikasi Masalah............................................................................................................1

1.3 Maksud dan Tujuan Penelitian ...........................................................................................2

1.4 Batasan Masalah.................................................................................................................2

1.5 Metodologi Penelitian ........................................................................................................2

1.6 Sistematika Penulisan.........................................................................................................2

Bab II Dasar Teori dan Spesifikasi.....................................................................................................4

Bab III Peracangan dan Implementasi ..............................................................................................6

Bab IV Pengujian Hasil Perancangan ..............................................................................................12

Bab V Penutup................................................................................................................................14

vi

Daftar Gambar

Gambar 1. Penggambaran Kotak dalam Gradasi From Corner; (a) height > width, jumlah kotak mengikuti width; (b) height < width, jumlah kotak mengikuti height ……………………………………….8

Gambar 2. Penggambaran Kotak dalam Gradasi From Center ………………………………………………….9

Gambar 3. Simulasi Hasil Perancangan Program pada Wireless Toolkit 2.5.2. ………………………….12

vii

1

Bab I

Pendahuluan

Pada bab ini akan dijelaskan mengenai latar belakang penelitian dan pengembangan, identifikasi masalah, serta batasan-batasan permasalahan. Akan dijelaskan juga mengenai maksud dan tujuan penelitian, serta metodologi dan penjelasan sistematika penulisan.

1.1 Latar Belakang Pada awal mula perkembangannya, handphone hanya digunakan seekedar sebagai alat untuk berkomunikasi dengan orang lain. Seiring dengan perkembangan zaman, orang pun tidak hanya memanfaatkan handphone sebagai alat komunikasi saja, melainkan untuk keperluan lain. Untuk keperluan tersebut, dibangunlah berbagai aplikasi yang mendukung.

Banyak aplikasi-aplikasi yang dibangun dengan menggunakan tampilan grafis. Artinya, banyak gambar-gambar yang memiliki warna. Hal ini didukung oleh handphone yang berwarna.

Untuk membuat gambar-gambar ini, dapat digunakan J2METM (Java™ 2 Platform, Micro Edition). Pembuatan tampilan grafis pada J2ME dapat menggunakan canvas. Dengan menafaatkan library yang sudah tersedia, berbagai gambar dapat dibuat.

Meskipun demikian, terdapat kekurangan pada J2ME, terutama jika diinginkan gambar dengan kualitas yang cukup baik. Misalnya dalam hal pewarnaan gambar yang telah dibuat. Warna yang dapat diperoleh hanya satu jenis warna saja. Padahal, di dunia nyata, ada berbagai variasi warna karena adanya gradasi, dan sebagainya. Selain kesulitan dalam hal pewarnaan, banyak kesulitan lain seperti sulitnya menggambar suatu polygon, mentransformasikan gambar yang sudah dibuat, dan sebagainya.

Oleh karena itu, penulis tertarik untuk mengembangkan lebih jauh J2ME untuk mengatasi kesulitan-kesulitan semacam itu. Dalam tulisan ini, permasalahan yang dibahas dibatasi pada pewarnaan gradasi saja.

1.2 Identifikasi Masalah Rumusan masalah untuk penelitian dan pengembangan ini akan dijabarkan sebagai berikut :

Bagaimana caranya agar dapat dapat membuat fill color berupa gradasi?

2

1.3 Maksud dan Tujuan Penelitian Maksud dan tujuan dari penelitian ini adalah untuk mempelajari pembuatan fill color berupa gradasi

1.4 Batasan Masalah Karena keterbatasan waktu, gradasi warna yang dibuat hanyalah yang berbentuk kotak saja.

1.5 Metodologi Penelitian Metodologi penelitian yang digunakan adalah studi literatur terutama dari pengembangan dan dokumentasi J2ME yang sudah ada.

1.6 Sistematika Penulisan Sistematika penulisan dokumentasi ini dijabarkan sebagai berikut :

a. Bab I : Pendahuluan

Bab pertama berisi latar belakang permasalahan dari dokumentasi, pengidentifikasian masalah, maksud dan tujuan penelitian, batasan masalah dalam penelitian, metodologi penelitian dan sistematika penulisan.

b. Bab 2 : Spesifikasi

Bab kedua berisi tentang spesifikasi pada program yang akan dibuat.

c. Bab 3: Perancangan dan Implementasi

Dalam bab ini, akan dibahas tentang perancangan program untuk pembuatan gradasi warna.

a. Bab 4 : Hasil Implementasi

Bab empat berisi tentang hasil dari pembuatan gradasi warna

e. Bab 5 : Kesimpulan

Bab terakhir berisi tentang kesimpulan dan saran dari penelitian secara keseluruhan.

3

4

Bab II

Dasar Teori dan Spesifikasi

Warna gradsi adalah perubahan dari satu warna ke warna lainnya secara bertahap dalam satu obyek. Warna gradasi bisa terjadi dengan perubahan lebih dari 2 warna berbeda. Namun, akan digunakan 2 warna saja dalam dokumentasi ini. Dalam J2ME, pembuatan gradasi ini dilakukan pada kelas canvas yang memang menyediakan akses untuk membuat tampilan grafis sederhana.

Seperti yang telah dijelaskan pada bagian pendahuluan, penulis akan mencoba untuk memudahkan programmer dalam mewarnai dengan gradasi warna dengan bentuk kotak. Gradasi warna yang akan dibuat mencakup :

1. Gradasi warna horizontal, maksudnya warna 1 terletak di bagian atas gambar dan warna 2 terletak di bagian bawah gambar.

2. Gradasi warna vertikall, maksudnya warna 1 terletak di bagian kiri gambar dan warna 2 terletak di bagian kanan gambar

3. From center, warna 1 terletak di tengah objek dan warna 2 terletak di tepi objek

4. From corner, maksudnya warna 1 terletak di bagian sudut objek dan warna 2 terletak di diagonalnya.

5. Gradasi warna diagonal 1, maksudnya warna 1 terletak di diagonal kiri atas dan warna 2 terletak di diagonal kanan bawah

6. Gradasi warna diagonal 2, maksudnya warna 1 terletak di diagonal kanan atas dan warna 2 terletak di diagonal kiri bawah

Untuk memudahkan user menggambar kotak dengan gradasi, dibuatlah form tempat user memasukkan parameter-parameter yang diperlukan, seperti posisi kotak, ukuran kotak, warna kotak, dan jenis gradasi yang diinginkan.

5

6

Bab III

Peracangan dan Implementasi

Program yang telah dibuat disimpan dalam file cgperbaikan.java yang dapat dilihat pada lampiran.

Program ini terdiri atas 2 tampilan, yaitu form yang berfungsi sebagai tempat user memasukkan parameter yang diperlukan dan tampilan canvas gambar yang berfungsi sebagai tempat penggambaran kotak bergradasi. Pada tampilan form, terdapat 2 buah command, yaitu keluar dan gambar. Command keluar berfungsi agar dapat keluar dari program dan command gambar berfungsi untuk menampilkan kotak bergradasi berdasarkan parameter yang dimasukkan di dalam form. Pada tampilan canvas, command yang ada adalah keluar dan kembali. Command kembali berfungsi agar user dapat memasukkan kembali berbagai parameter pembuatan kotak bergradasi dalam form.

Untuk pembuatan gradasi kotak sendiri, dipergunakan operasi gradientBox, dengan sintaks seperti berikut.

public void gradientBox(Graphics g, int color1, int color2, int left, int top, int width, int height, int nograd)

GradientBox ini terdiri dari 8 argumen, yaitu g (graphics), color 1, color 2, left, top, width, height, dan nograd. Berikut ini adalah penjelasannya.

1. Graphics merupakan kelas graphics, yang berfungsi agar penggambaran objek 2 dimensi dapat dilakukan. G merupakan objek dari kelas graphics.

2. Color 1 dan color 2 merupakan warna yang akan ditentukan oleh pengguna. Color 1 dan 2 ini bertipe integer karena color ini ditentukan dengan memasukkan nilai heksadesimalnya.

3. Left adalah koordinat aksis yang paling kiri dari suatu kotak yang akan digambarkan. 4. Top adalah oordinat teratas dari kotak. 5. Width dan height masing-masing adalah lebar dan tinggi kotak 6. Nograd (nomor gradasi), yaitu suatu integer yang berfungsi sebagai switch. Switch di sini

berfungsi untuk memilih jenis gradasi yang akan digunakan. Berikut ini adalah penomorannya.

a. 0 : Horizontal b. 1 : Vertikal c. 2 : From corner d. 3 : From center e. 4 : Diagonal 1 f. 5 : Diagonal 2

Berikut ini adalah contoh penggunaan operasi gradientBox.

gradientBox(g, 0xffffff, 0xffff00, 0, 150, 100, 100, 0); gradientBox(g, 0xff3399, 0xff0000, 0, 0, 50, 50, 1); gradientBox(g, 0x66ff33, 0x3300ff, 100, 0, 50, 25, 2); gradientBox(g, 0xff9900, 0x3300ff, 0, 100, 50, 25, 3);

7

gradientBox(g, 0x00cc00, 0xffff99, 100, 100, 10, 10, 4); gradientBox(g, 0xff99ff, 0x00ff33, 150, 150, 10, 15, 5);

Ide dari gradasi ini adalah membuat garis atau kotak dengan warna yang bervariasi sesuai dengan posisisnya terhadap warna 1 dan 2. Warna suatu garis atau kotak akan berdekatan dengan warna lain di sekitarnya. Untuk membuat warna yang berdekatan, digunakan algoritma midColor sebagai berikut.

int midColor(int color1, int color2, int prop, int max)

{int red = (((color1 >> 16) & 0xff) * prop + ((color2 >> 16) & 0xff) * (max - prop)) / max;

int green =

(((color1 >> 8) & 0xff) * prop + ((color2 >> 8) & 0xff) * (max - prop)) /

max;

int blue = (((color1 >> 0) & 0xff) * prop + ((color2 >> 0) & 0xff) * (max - prop)) /

max;

int color = red << 16 | green << 8 | blue;

return color;

}

Pembuatan kotak bergradasi ini menggunakan loop for. Oleh karena itu, perlu ditentukan terlebih dahulu kapan program akan selesai dieksekusi, yaitu pada saat loop mencapai nilai maksimum (variable max). Nilai maksimum ini akan berbeda-beda untuk setiap jenis gradient.

Berikut ini adalah algortima-algoritma yang digunakan.

1. Gradasi Horizontal.

Nilai maksimum yang dipergunakan dalam gradasi horizontal ini adalah tinggi kotak (height). Hal ini disebabkan karena pengisian gradasi (pembuatan garis) dimulai dari atas sampai bawah sehingga program akan berhenti apabila pewarnaan sudah mencapai tinggi kotak yang dibuat. Berikut ini adalah source codenya.

for(int i = 0; i < max; i++) { int color = midColor(color1, color2, max * (max - 1 - i) / (max - 1), max); g.setColor(color); g.drawLine(left, top + i, left + width - 1, top + i); }

2. Gradasi Vertikal

Berikut ini adalah source codenya.

for(int i = 0; i < max; i++) { int color = midColor(color1, color2, max * (max - 1 - i) / (max - 1), max); g.setColor(color); g.drawLine(left + i, top, left + i, top + height - 1);

8

}Source code ini mirip dengan gradasi horizontal. Hanya saja, garis digambar vertical dari top sampai top + height. Garis yang lain akan dibuat kembali di sebelah kanan garis tersebut sampai loop mencapai nilai maksimum, yaitu lebar dari kotak yang akan dibuat.

3. Gradasi From Corner

Proses pembuatan gradasi from corner dan center sedikit berbeda dengan gradasi horizontal atau vertikal. Jika kedua gradasi sebelumnya menggunakan garis yang sama panjang, namun warnanya berbeda, kedua gradasi ini menggunakan kotak dengan ukuran dan warna yang berbeda. Untuk gradasi from corner, source code yang digunakan adalah sebagai berikut.

int max = height < width ? height : width; g.setColor(color2); g.fillRect(left,top,width,height); for(int i = 0; i < max; i++) { int color = midColor(color1, color2, max * (max - 1 - i) / (max - 1), max); g.setColor(color); g.drawRect(left + i, top + i, width-i, height-i); } Kotak dengan warna 1 akan digambar dari sudut kiri atas. Selanjutnya, kotak-kotak lain akan digambarkan sampai ke ujung kanan bawah. Kotak-kotak ini akan mengecil ukurannya, baik lebar maupun tinggi. Posisi top dan left-nya bertambah, karena kotak akan bergeser menuju ke kanan bawah. Jumlah maksimal kotak yang digunakan tergantung pada ukuran kotak yang akan digambar. Jika tinggi kotak lebih kecil daripada lebar kotak yang akan digambarkan, maka jumlah kotak gradasi yang digambar akan berjumlah sama dengan tinggi kotak, dan sebaliknya. Agar lebih jelas dapat dilihat pada gambar berikut.

(a) (b)

Gambar 1. Penggambaran Kotak dalam Gradasi From Corner; (a) height > width, jumlah kotak mengikuti width; (b) height < width, jumlah kotak mengikuti height

4. Gradasi From Center

Gradasi jenis from center juga menggunakan kotak, seperti from corner. Perbedaan terletak pada ukuran kotak yang berkurang dua kali lebih besar jika dibandingkan dengan gradasi from corner. Hal ini disebabkan oleh bagian bawah dan kanan telah digunakan oleh kotak sebelumnya, seperti gambar berikut.

9

Gambar 2. Penggambaran Kotak dalam Gradasi From Center

Jumlah maksimum kotak sama seperti from corner. Namun, berhubung penggambaran hanya dilakukan sampai di bagian tengah, width diganti dengan width/2, dan begitu juga dengan height. Berikut ini adalah source codenya.

int max = height < width ? height/2 : width/2; g.setColor(color2); g.fillRect(left,top,width,height); for(int i = 0; i < max; i++) {

int color = midColor(color1, color2, max * (max - 1 - i) / (max - 1), max); g.setColor(color); g.drawRect(left + i, top + i, width-2*i, height-2*i); }

5. Gradasi Diagonal 1

Untuk gradasi diagonal, digunakan kembali penggambaran garis. Hanya saja, garis-garis ini berbentuk diagonal. Berikut ini adalah source code yang digunakan.

int max = width+height-1; g.setColor(color2); g.fillRect(left,top,width,height); for(int i = 0; i < max; i++) {

int color = midColor(color1, color2, max * (max - 1 - i) / (max - 1), max); g.setColor(color); if (((left+i)<=left+width)&&((top+i)<=top+height)) {

g.drawLine(left+i,top,left,top+i); }

else if (((left+i)>left+width)&&((top+i)<=top+height)) {

g.drawLine(width+left,top+(i-width),left,top+i); }

else if (((left+i)<=left+width)&&((top+i)>top+height)) {

g.drawLine(left+i,top,left+(i-height),top+height); }

else if (((left+i)>left+width)&&((top+i)>top+height)) {

g.drawLine(width+left,top+(i-width),left+(i-height),height+top); }}

10

Penggambaran garis dilakukan dari kanan atas ke kiri bawah untuk diagonal 1. Penggambaran garis ini selalu dimulai pada bagian top dari kotak, lalu menuju ke tepi kanan kotak sampai bawah, sehingga jumlah garis yang digambarkan sama dengan width + height – 1. Angka “1” ini muncul karena ujung kanan top dan ujung atas tepi kanan menggunakan piksel yang sama, sehingga perlu pengurangan 1 untuk mencegah penggandaan.

Dalam penggambaran garis, ada beberapa kasus yang harus ditangani, yaitu :

1. Garis digambarkan dari bagian atas kotak sampai ke bagian kiri kotak.

2. Garis digambarkan dari bagian kanan kotak sampai ke bagian kiri kotak.

3. Garis digambarkan dari bagian atas kotak sampai ke bawah kotak

4. Garis digambarkan dari bagian kanan sampai ke bawah kotak.

Masing-masing kasus ini berbeda dalam sintaks penggambaran garisnya, yaitu dalam hal posisi awal dan akhir, seperti yang dapat dilihat pada source code.

6. Gradasi Diagonal 2

Pada gradasi diagonal 2, gradasi dimulai dari ujung kanan atas menuju ke ujung kiri bawah. Artinya, garis-garis dibuat dari bagian top dari kotak menuju ke bagian kanan. Berikut ini adalah source code-nya.

int max = width+height-1; g.setColor(color2); g.fillRect(left,top,width,height); for(int i = 0; i < max; i++) { int color = midColor(color1, color2, max * (max - 1 - i) / (max - 1), max); g.setColor(color); if (((left+width-i)>=left)&&((top+i)<=height+top)) {

g.drawLine(left+width-i,top,left+width,top+i); }

if (((left+width-i)<left)&&((top+i)<=height+top)) {

g.drawLine(left,top+i-width,left+width,top+i); }

else if (((left+width-i)>=left)&&((top+i)>height+top)) {

g.drawLine(left+width-i,top,left+width-(i-height),top+height); }

else if (((left+width-i)<left)&&((top+i)>height+top)) {

g.drawLine(left,top+(i-width),left+width-(i-height),top+height); }

}Sama seperti diagonal 1, ada 4 macam kasus penggambaran garis yang harus ditangani yang dapat dilihat pada source code.

11

12

Bab IV

Pengujian Hasil Perancangan

Hasil perancangan program pembuatan gradasi cgperbaikan dapat dilihat dengan menggunakan Software Wireless Toolkit 2.5.2. Setalah software tersebut dijalankan, dibuatlah project dengan nama “cgperbaikan”, yaitu nama yang sama dengan nama file dan kelas yang digunakan di dalam program. File cgperbaikan.java diletakkan di dalam folder src. Selanjutnya, dilakukan build dan run sehingga simulasi program dapat dilihat, yaitu seperti berikut.

Gambar 3. Simulasi Hasil Perancangan Program pada Wireless Toolkit 2.5.2.

Dari hasil tersebut, terlihat bahwa kotak dengan gradasi warna telah berhasil dibuat.

13

14

Bab V

Penutup

Program yang dibuat terbukti mampu mensimulasikan 6 macam gradasi sesuai dengan yang disebutkan pada bagian spesifikasi. Meskipun demikian, perlu pengembangan lebih lanjut agar kualitas gambar yang dihasilkan dengan menggunakan J2ME lebih baik. Contoh pengembangannya misalnya pada warna gradasi yang lebih blended, gradasi objek yang tidak berbentuk kotak, variasi-variasi gradasi yang lain, dan sebagainya.

15

Daftar Pustaka

• http://wiki.forum.nokia.com

• Dokumentasi J2ME dan MIDP 2.0

• Rahardjo, Budi, dkk. 2007. Tuntunan Pemrograman Java untuk Handphone. Bandung : Informatika.