Getting started – Processing

Membentuk sebuah garis sederhana

Jika kamu pertama kali menggunakan processing pasti akan sedikit bingung bagaimana cara menggunakannya. oke, daripada bingung mendingan kamu copas dulu code ini ke processingmu lalu run. apa hasilnya?

//void setup digunakan untuk mengatur canvas
void setup(){
  size(600,600); //untuk mengubah ukuran canvas
  background(255); //background warna pada canvas
}

//void draw digunakan untuk menggambar pada canvas
void draw(){
  for (int i=0;i<200;i++){
    point(i,20);//point digunakan untuk menggambar titik
  }
}

standarisasi titik (0,0)

Bagaimana? apakah sudah paham dengan processing? begitu sederhana kan?
method point pada processing digunakan untuk menggambar titik pada pixel tertentu yang secara default titik (0,0) ialah titik yang berada pada pojok kiri atas.. mungkin ini sedikit menyulitkan kita apabila kita ingin menggambar sesuai fungsi matematis yang biasanya titik (0,0) itu berada pada tengah canvas. Tapi jangan khawatir kawan, kita bisa membuat method point sendiri ko 😉 artinya method point kita dapat memulai titik (0,0) menjadi di tengah canvas.. Lalu bagaimana caranya kaka? ok, disini saya akan menggunakan template sederhana yang saya dapatkan dari dosen grafcit IT Telkom.. silakan cermati code dibawah ini

// STANDAR TEMPLATE TUBES GRAFCIT @IT TELKOM | 2011
//--------------------------------- inisialisasi, ga perlu dirubah
static int canvasW = 600;
static int canvasH = 600;
void setup() {
  size(canvasW, canvasH);
  background(255);
}

//--------------------------------- variable global ditulis disini
int x1 = 3;
int y1 = 7;
int x2 = 12;
int y2 = 15;

//--------------------------------- disini mulai codingnya
void draw() {
  drawHelpLines();//untuk menggambar garis bantu sumbu-x dan sumbu-y
  for (int i=0;i<200;i++){
     stdPoint(i,20);//stdPoint digunakan untuk menggambar titik
  }

}

//--------------------------------- procedure/fungsi bikinan sendiri
//--------------------------------- silahkan ditulis dibawah sini

// -------------------------------- normalisasi, ga perlu dirubah

void stdPoint(int xxx, int yyy)
{
  point(xxx+(canvasW/2), (yyy*-1)+(canvasH/2));
}

void drawHelpLines()
{
  stroke(0, 0, 255);
  for (int z=0; z<canvasW; z=z+1) {
    point((canvasW/2), z);
    point(z, (canvasH/2));
  }
  stroke(0, 0, 0);
}

Bagaimana? anda sudah dapat melihat perbedaannya? Disana kita melihat adanya method stdPoint yang merupakan hasil dari kustomisasi method point.
nah, sekarang dengan adanya template diatas anda tinggal coding dengan lebih mudah 😉

Oh iya jika anda ingin melakukan debugging dapat menggunakan syntax println(); jika anda menuliskan syntax ini di void draw(), maka di console akan tampil output yang terus menerus berulang-ulang, karena void draw sebenarnya me-refresh secara terus menerus canvas yang dibentuk..

Selamat berPROCESSING riaa 🙂