Visualisasi dengan Processing

Pada post ini saya akan memperkenalkan processing. Processing adalah bahasa pemrograman yang digunakan untuk membuat visualisasi dalam bentuk gambar statis dan/atau animasi. Secara bahasa pemrograman, Processing memiliki sintaks yang mirip dengan Java.

logo

Instalasi

Masuk ke halaman Download di situs processing dan pilih file sesuai dengan sistem operasi yang Anda gunakan.

download

Ekstrak file zip ke direktori manapun yang dikehendaki.

Getting Started

Buka folder hasil ekstraksi dan jalankan processing.exe

processing

Gambar di atas adalah tampilan awal dari processing ketika baru dijalankan. Pada text editor, ketikkan kode berikut untuk menginisialisasi visualisasi baru lalu klik tombol Rum (yang gambar segitiga) atau lewat menu Sketch > Run atau dengan shortcut Ctrl+R.

void setup() {
  size(500, 400);
}

void draw() {
  background(0,0,255);
}

Seharusnya keluar window baru dengan warna latar belakang biru. Kode di atas merupakan kode paling dasar pada Processing. fungsi setup() dijalankan sekali pada waktu program mulai berjalan di awal sedangkan fungsi draw() dipanggil berulang kali dalam satu detik. Berapa kali fungsi draw() dipanggil bisa dikontrol dengan fungsi frameRate() di mana nilai standarnya adalah 60 fps.

Contoh: Bacteria random walk

Untuk contoh yang sedikit lebih rumit dibanding hanya background kosong, kita akan membuat animasi bakteri yang berjalan secara acak.
Pertama, kita buat kelas baru untuk menyimpan data posisi bakteri. Jangan lupa fungsi constructor untuk menginisialisasi posisi awal bakteri.

class Bactery {
  int x;
  int y;
  float angle;
  
  Bactery() {
    x = int(random(width));
    y = int(random(height));
    angle = 2*PI*random(1);
  }
  
  Bactery(int x, int y) {
    this.x = x;
    this.y = y;
    angle = 0;
  }
}

Kemudian kita tambahkan fungsi display() untuk menggambar bakteri, dimana kita sederhanakan bentuk bakteri menjadi sebuah segi empat.

void display() {
    stroke(0);
    fill(0);
    
    if(random(1) < 0.2)
      angle = 2*PI*random(1);
      
    int x1 = bactWidth;
    int y1 = 0;
    
    int x2 = bactWidth;
    int y2 = bactHeight;
    
    int x3 = 0;
    int y3 = bactHeight;
    
    // Apply the rotation
    int nx1 = int( x1*cos(angle) - y1*sin(angle) +x);
    int ny1 = int( x1*sin(angle) + y1*cos(angle) +y);
    
    int nx2 = int( x2*cos(angle) - y2*sin(angle) +x);
    int ny2 = int( x2*sin(angle) + y2*cos(angle) +y);
    
    int nx3 = int( x3*cos(angle) - y3*sin(angle) +x);
    int ny3 = int( x3*sin(angle) + y3*cos(angle) +y);
    
    quad(x, y, nx1, ny1, nx2, ny2, nx3, ny3);
  }

Tambahkan pula fungsi step() untuk meng-update posisi bakteri pada setiap frame.

void step() {
    int moveX = int(random(11)) - 5;
    int moveY = int(random(11)) - 5;
    
    x += moveX;
    y += moveY;
  }

Instansiasi objek bakteri di awal, kemudian kita panggil kedua fungsi diatas pada setiap frame.

void setup() {
  size(500, 400);
  
  bacteria = new Bactery[numBact];
  for(int i=0; i<numBact; i++) {
    bacteria[i] = new Bactery();
  }
}

void draw() {
  background(255,255,255);
  
  for(int i=0; i<numBact; i++) {
    bacteria[i].step();
    bacteria[i].display();
  }
}

Jangan lupa untuk menambahkan variabel-variabel global yang dipakai.

Bactery[] bacteria;
int numBact = 200;
int bactWidth = 2;
int bactHeight = 10;

Contoh tampilan ketika dijalankan: bakteri yang jumlahnya banyak menggeliat sepanjang waktu.

bakteri

Processing on the Web

dengan menggunakan processing.js, program processing Anda akan secara ajaib dan otomatis bisa ditampilkan pada halaman web dengan memanfaatkan teknologi HTML5. Cukup dengan membuat sebuah halaman html kosong, import processingjs, dan tambahkan canvas ke dalamnya.

<script src="https://raw.github.com/processing-js/processing-js/v1.4.8/processing.min.js"></script>
<canvas data-processing-sources="bacterium.pde"></canvas>

Karena wordpress.com tidak bisa pakai iframe, maka animasinya bisa dilihat pada link berikut: http://mitbal.com/bacterium.html

Seperti biasa kode lengkap bisa dilihat di repository github: https://github.com/mitbal/pro-bacterium

Demikian, semoga berguna. Sampai ketemu pada contoh-contoh visualisasi lainnya.
Salam.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s