Processing adalah bahasa pemrograman dan lingkungan pemrograman (development

environment) open source untuk memprogram gambar, animasi dan interaksi. Digunakan
oleh pelajar, seniman, desainer, peneliti, dan hobbyist untuk belajar, membuat prototipe,
dan produksi. Processing digunakan untuk mengajarkan dasar-dasar pemrograman
komputer dalam konteks rupa dan berfungsi sebagai buku sketsa perangkat lunak
(software) dan tool produksi profesional.

Processing bebas untuk didownload dan tersedia untuk GNU/Linux, Mac OS X, dan
Windows. Silakan berpartisipasi untuk merilis versi selanjutnya!

Processing adalah suatu projek terbuka yang diinisiasi oleh Ben Fry dan Casey Reas.
Berkembang dari ide-ide yang dieksplorasi di Aesthetics and Computation Group (ACG) di
MIT Media Lab. Projek ini kini terus diperbaiki dan dikelola oleh sejumlah kecil tim voluntir.

Processing mengaitkan konsep software pada prinsip-prinsip bentuk rupa, gerak, dan
interaksi. Processing mengintegrasikan suatu bahasa pemrograman, lingkungan
pemrograman, dan metodologi pengajaran ke dalam sistem terpadu.

Lingkungan Pemrograman

Lingkungan Pemrograman Processing terdiri dari teks editor terintegrasi dan jendela
tampilan untuk menampilkan program. Jika tombol “run” ditekan, program akan
mengkompilasi dan berjalan di jendela grafis (jendela tampilan). Dari jendela lingkugan
utama, bisa menjalankan, menghentikan, menyimpan, membuka, dan mengeksport file.
Sistem Koordinat

Processing menggunakan sistem koordinat kartesian dengan titik asal terletak di sudut kiri-
atas. Bila program berukuran lebar 320 piksel dan lebar 240 piksel, maka koordinat [0, 0]
terletak di kiri-atas dan koordinat [320, 240] terletak di kanan bawah.

Mode Pemrograman

Dalam Processing struktur program dapat dibuat dalam tiga tingkat kompleksitas: Mode
Statik, Mode Aktif, dan Mode Java.

Mode Statik

Mode Statik digunakan untuk membuat gambar statik. Contoh berikut menggambar sebuah
segi empat kuning di layar.

size(200, 200);
background(255);
noStroke();
fill(255, 204, 0);
rect(30, 20, 50, 50);

Mode Aktif

Mode Aktif menyediakan bagian setup() opsional yang akan berjalan ketika program mulai
berjalan. Bagian draw() akan berjalan selamanya sampai progam dihentikan. Contoh ini
menggambar segi empat yang mengikuti posisi mouse (disimpan dalam variabel mouseX
dan mouseY). Perhatikan bahwa panggilan ke method background() terletak di setup()
karena hanya diperlukan sekali.

void setup()
{
size(200, 200);
rectMode(CENTER);
noStroke();
fill(255, 204, 0);
}

void draw()
{
background(255);
rect(width-mouseX, height-mouseY, 50, 50);
rect(mouseX, mouseY, 50, 50);
}

Mode Java

Mode Java adalah yang paling fleksibel, namun tidak tersedia sampai dengan rilis Processing
1.0 Beta. Mode ini memungkinkan menulis program Java secara lengkap di dalam Lingkugan
Processing.
Contoh ini sama dengan di atas, namun ditulis dalam style Java:

public class MyDemo extends BApplet {

void setup()
{
size(200, 200);
background(255);
rectMode(CENTER);
noStroke();
fill(255, 204, 0);
}

void draw()
{
rect(width-mouseX, height-mouseY, 50, 50);
 rect(mouseX, mouseY, 50, 50);
}
}
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:

o 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

o 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.
o Area Text Editor adalah tempat dimana kita akan menuliskan program kita.
o Message Area merupakan tempat dimana berbagai pesan dari Processing
dikeluarkan, misalnya terjadi error.
o 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.

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