Merah Putih – Source code

Below is processing code for program in my previous post. A lot of explanation already given in this post. To run it, you can paste the source code into online processing sketch. Feel free to experiment with various color and flower size :D.

//Screen size
final int SCREEN_HEIGHT = 400;
final int SCREEN_WIDTH = 400;

//Flower parameter
final int MIN_DIAMETER = 1;
final int MAX_DIAMETER = 10;

//RGBA value range : 0 - 255
int min_red, min_blue, min_green, min_alpha;
int max_red, max_blue, max_green, max_alpha;

int x, y;

void setup()
{
   size(SCREEN_WIDTH, SCREEN_HEIGHT);
   noStroke();
   background(0);
   smooth();        //Enable anti-aliasing

   min_red = 220;
   max_red = 255;
   min_green = 0;
   max_green = 0;
   min_blue = 0;
   max_blue = 0;
   min_alpha = 10;
   max_alpha = 150;

   x = 0;
   y = 0;
}

void draw()
{
   int r, g, b, a; //Flower color
   int d;          //Flower diameter

   //Bangkitkan satu nilai acak
   r = (int)random(min_red, max_red);
   g = (int)random(min_green, max_green);
   b = (int)random(min_blue, max_blue);
   a = (int)random(min_alpha, max_alpha);
   d = (int)random(MIN_DIAMETER, MAX_DIAMETER);

   fill(r, g, b, a);
   drawFlower(x, y, d);

   x = x + 10;
   if (x > width) {  //Newline
      x = 0;
      y = y + 10;
   }
   if (y > height/2) { //Change colour
      max_green = max_blue = 255;
      min_green = min_blue = 240;
   }
}

void drawFlower(int x, int y, int d){
   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);
}
Advertisements

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 :D.

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 :D.

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 :D.

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 :D.

Ditulis saat sedang bosan koding ASP.Net dan mengerjakan dokumentasi