Iseng-iseng dengan Processing

Programming itu menyenangkan!” adalah kalimat motivasi para pejuang-pejuang Ilmu Komputer saat kuliah. Yah, tapi kenyataannya pasti ada saat-saat kita merasa bosan berkutat dengan kode program, apalagi saat kode yang kita buat hanya menampilkan program dalam bentuk command line interface alias teks putih dengan latar belakang hitam. Agar programming tetap menyenangkan, kadang baik untuk kita mempelajari bahasa pemrograman yang lain. Dalam hal ini, kita mempelajari tentang Processing yang keluaran programnya berupa grafis😀.

Untuk percobaan pertama ini, kita akan membuat sebuah program yang akan terus-menerus mengeluarkan pola bunga (lihat gambar). Bunganya tidak terlalu rumit, hanya terdiri dari lima buah lingkaran yang ditumpuk sedemikian rupa. Untuk sedikit memperindah hasil akhir program, akan kita buat supaya ukuran dan warna bunga yang dihasilkan berbeda-beda.

Pola bunga yang digunakan

Inilah langkah-langkah untuk merealisasikan program yang telah kita bayangkan sebelumnya :

  1. Download Processing.
  2. Ekstraksi file yang telah anda unduh sebelumnya.
  3. Buka Processing.
  4. Ketikkan kode berikut di lembar kerja Processing :
//Parameter
final int SCREEN_HEIGHT = 320;
final int SCREEN_WIDTH = 640;
final int MIN_DIAMETER = 0;
final int MAX_DIAMETER = 10;
final int MIN_RED = 100;      //0 - 255
final int MAX_RED = 250;      //0 - 255
final int MIN_GREEN = 100;    //0 - 255
final int MAX_GREEN = 250;    //0 - 255
final int MIN_BLUE = 0;       //0 - 255
final int MAX_BLUE = 0;       //0 - 255

//Pengaturan program, dijalankan satu kali
//saat program pertama kali berjalan
void setup()
{
  size(SCREEN_WIDTH,SCREEN_HEIGHT); //Ukuran Layar
  noStroke();    //Menghilangkan garis tepi
  background(0); //Set latar belakang menjadi warna hitam
  smooth();
}

//Fungsi untuk menggambar objek di layar.
//Dipanggil terus-menerus sampai program berhenti.
void draw()
{
  float r,g,b,a;  //Warna
  float d,x,y;    //Posisi

  //Bangkitkan satu nilai acak
  r = random(MIN_RED,MAX_RED);
  g = random(MIN_GREEN,MAX_GREEN);
  b = random(MIN_BLUE,MAX_BLUE);
  a = random(0,155);
  d = random(MIN_DIAMETER,MAX_DIAMETER);
  x = random(0,width);
  y = random(0,height);

  fill(r,g,b,a);  //Set warna bunga

  //Gambar lingkaran
  //Lima lingkaran dibentuk mirip dengan bunga
  ellipse(x, y, d, d);
  ellipse(x+d/2, y-d/2, d, d);
  ellipse(x+d/2, y+d/2, d, d);
  ellipse(x-d/2, y+d/2, d, d);
  ellipse(x-d/2, y-d/2, d, d);
}

Setelah itu, untuk menjalankan program yang telah dibuat, Anda cukup menekan tombol panah yang ada di pojok kiri atas. Untuk menghentikan program, tekan tombol kotak yang ada di sebelah tombol panah. Mirip lah dengan menjalankan lagu di Windows Media Player😀.

Tekan tombol panah untuk memulai program

Hasilnya?

Pola bunga setelah satu detik
Pola bunga setelah satu menit

Bagian pertama kode di atas berisi nilai-nilai yang digunakan pada program yang kita buat. Nilai-nilai tersebut tentu saja dapat kita ubah, untuk mendapatkan hasil yang lebih menarik. Dua nilai pertama menyatakan ukuran layar dari program yang dihasilkan.

final int SCREEN_HEIGHT = 320;
final int SCREEN_WIDTH = 640;

Dua nilai selanjutnya menyatakan ukuran minimum dan maksimum bunga yang akan ditampilkan. Semakin besar nilainya, semakin besar bunga yang digambar.

final int MIN_DIAMETER = 0;
final int MAX_DIAMETER = 10;

Nilai sisanya mempengaruhi warna bunga yang akan dihasilkan. Pengaturan seperti di bawah saya pilih agar warna bunga yang dihasilkan sewarna dengan warna daun di musim gugur😀.

final int MIN_RED = 100;      //0 - 255
final int MAX_RED = 250;      //0 - 255
final int MIN_GREEN = 100;    //0 - 255
final int MAX_GREEN = 250;    //0 - 255
final int MIN_BLUE = 0;       //0 - 255
final int MAX_BLUE = 0;       //0 - 255
Setelah MAX_DIAMETER dirubah menjadi 30

Bagian kedua program adalah fungsi setup(). Fungsi ini akan dijalankan tepat satu kali pada saat program pertama kali berjalan. Fungsi ini biasanya berisi pengaturan umum dari program, misalnya ukuran layar.

//Pengaturan program, dijalankan satu kali
//saat program pertama kali berjalan
void setup()
{
  size(SCREEN_WIDTH,SCREEN_HEIGHT); //Ukuran Layar
  noStroke();    //Menghilangkan garis tepi
  background(0); //Set latar belakang menjadi warna hitam
  smooth();
}

Bagian terakhir adalah fungsi draw(). Sesuai namanya, fungsi ini digunakan untuk menggambar objek di layar. Fungsi draw() akan dipanggil secara terus-menerus selama program masih berjalan. Hasil dari fungsi draw() adalah sebuah frame. Mungkin anda masih ingat istilah frame per second. Bila program berjalan dengan 30 frame per second, berarti dalam satu detik fungsi draw() dipanggil sebanyak tiga puluh kali. Di bagian berikut, kita bangkitkan nilai-nilai acak untuk memberikan variasi warna dan ukuran pada bunga yang digambar.

  ...
  //Bangkitkan satu nilai acak
  r = random(MIN_RED,MAX_RED);
  g = random(MIN_GREEN,MAX_GREEN);
  b = random(MIN_BLUE,MAX_BLUE);
  a = random(0,155);
  d = random(MIN_DIAMETER,MAX_DIAMETER);
  x = random(0,width);
  y = random(0,height);
  ...

Dengan menggunakan fungsi fill(), kita memberitahu program untuk menggambar sesuatu dengan warna yang telah dibangkitkan tadi.

  ...
  fill(r,g,b,a);  //Set warna bunga
  ...

Terakhir, kita gambar lima buah lingkaran sesuai dengan pola yang kita buat.

  ...
  //Gambar lingkaran
  //Lima lingkaran dibentuk mirip dengan bunga
  ellipse(x, y, d, d);
  ellipse(x+d/2, y-d/2, d, d);
  ellipse(x+d/2, y+d/2, d, d);
  ellipse(x-d/2, y+d/2, d, d);
  ellipse(x-d/2, y-d/2, d, d);
  ...

Selesai, selamat mencoba:mrgreen:. Semoga bisa dibuat kelanjutan tulisannya😀.

Ditulis saat sedang bosan koding ASP.Net dan mengerjakan dokumentasi

4 thoughts on “Iseng-iseng dengan Processing

  1. Gan…bisa bantuin ane gak nih??? ane lg ada tugas kuliah, di suruh buat fade animation pemandangan atau lalulintas nih,,,,bisa gak gan??? source code nya aja dehhhh…hehehehe

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s