Lingkungan Pengembangan Processing

IDE (Integrated Development Environment) atau lingkungan pengembangan dari software Processing diperlihatkan seperti pada Gambar 1. Saat tulisan ini dibuat, versi terbaru yang dirilis adalah Processing 3.0.1. Ini adalah versi awal dari Processing 3. IDE Processing cukup mudah dipahami. Tidak terdapat menu-menu yang sifatnya rumit dan sulit untuk dipahami.

Bagian-bagian utama dari IDE Processing adalah sebagai berikut:

• Bagian Toolbar adalah bagian dimana tombol-tombol kontrol ditempatkan. Pada bagian ini, tombol Debug, Step, Continue dan Stop ditempatkan.

ide processing.png

Gambar 1. IDE Processing 3

• Bagian Tabs adalah tempat dimana file yang terdiri dari banyak sketch ditempatkan. Ada kalanya bagian-bagian tertentu dari program perlu ditulis secara terpisah dari program utamanya. Program utama dan program pendukung dapat ditulis secara terpisah dengan sistem multi tab.
• Area Text Editor adalah tempat dimana kita akan menuliskan program kita.
• Message Area merupakan tempat dimana berbagai pesan dari Processing dikeluarkan, misalnya terjadi error.
• Bagian Console merupakan area tempat ditampilkannya output-output program dalam bentuk console, misalnya menampilkan hasil perhitungan, data-data berupa numerik dan string, serta data komunikasi secara serial.

Memulai Pemrograman Pertama

Bukalah program Processing, dan ketikkan sintaks berikut pada Text Editor:

ellipse(50, 52, 90, 90);

Maksud dari skrip tersebut adalah buatlah objek elips dengan titik pusat berada pada 50 piksel dari kiri, 52 piksel dari atas, lebar elips sebesar 90 piksel dan tinggi elips juga sebesar 90 piksel.

Kliklah tombol Debug (>)dan amatilah hasilnya. Jika skrip pemrograman benar, maka akan tampil jendela baru seperti pada Gambar 2.

gambar 2 pemrograman processing pertama.png

Gambar 2. Tampilan hasil program membuat elips

Jika terjadi kesalahan, misalnya tidak menuliskan tanda semikolon (titik koma) di akhir skrip, maka akan muncul pesan error pada Message Area, seperti yang diperlihatkan pada Gambar 3.

gambar 3 processing error.png

Gambar 3. Salah satu pesan error : tidak menuliskan tanda semicolon di akhir skrip

Mari kita kembangkan program kita agar menjadi lebih menarik. Ketiklah skrip berikut dan amatilah hasilnya.

void setup(){

 size(500, 300);

 smooth();

}


void draw(){

 ellipse(mouseX, mouseY, 90, 90);

 if (mousePressed) {

   fill(200);

 }

 else {

   fill(255);

 }

}

Maksud program tersebut adalah sebagai berikut. void setup() adalah bagian dimana kita akan menuliskan inisiasi awal dari program kita. void setup() akan dieksekusi hanya sekali. Pada bagian ini, kita akan membuat sebuah layar dengan ukuran 500 x 300 piksel. Fungsi smooth menampilkan gambar yang halus (anti aliasing).

Selanjutnya, program utama akan dituliskan pada void draw(). Bagian ini adalah berisi kumpulan skrip yang akan dieksekusi secara terus-menerus, sampai tombol Stop ditekan. Di dalam fungsi void draw(), kita membuat sebuah objek elips dengan ukuran 90 x 90 piksel. Karena pengaruh fungsi mouseX dan mouseY, maka posisi elips akan mengikuti posisi mouse.

Jika mause ditekan, maka elips akan berubah warna menjadi abu-abu.. Jika sebaliknya, maka akan warna elips akan putih. Warna elips dikontrol oleh fungsi fill. Dalam fungsi fill, kita dapat memasukkan nilai keabuan (dari 0 sampai 255). Nilai 0 akan sepenuhnya menghasilkan warna hitam, dan 255 menghasilkan putih. Nilai antara 0 dan 255 menghasilkan warna keabuan.

Tekanlah tombol Debug. Amatilah hasilnya. Gerakkanlah mouse dan klik kanan mouse untuk melihat perubahan warna pada elips.

gambar 4 processing contoh.png

Gambar 4. Contoh tampilan hasil program pada Contoh 2-2

Konversi Hasil Desain Processing

Ada kalanya kita ingin menjalankan sketch tanpa perlu membuka Processing lagi. Atau, kita ingin membagikan hasil karya kita dengan yang lain. Untuk merealisasikan hal ini, kita dapat mengeksport hasil kerja kita. Caranya, pilihlah menu File aExport Application... , atau cukup menekan tombol Ctrl+Shift+E. Selanjutnya akan muncul jendela Export Options. Pilihlah sesuai dengan Sistem Operasi yang digunakan, dan selanjutnya tekan tombol Export. Pada sistem operasi Windows, file yang dihasilkan berformat .exe. File ini secara default akan diletakkan di \Documents\Processing\NamaFile\versiWindows

Penulisan NamaFile dan versiWindows pada tautan di atas tergantung dari nama file yang kita tulis, serta versi Windows (32 atau 64-bit).

Gambar 5 Processing konversi.png

Gambar 5. Opsi dalam melakukan eksport sketch