Grafika Komputer dengan Processing-[Translation, Rotation dan Scalling]-(bagian V)

السلام علىكم ورحمةالله وبركاته

Hai sobat, setelah berakit-rakit kehulu akhirnya artikel ini selesai juga. Kali ini ane bakal ngebahas materi tentang Translation, Rotation dan Scalling.

Materi ini adalah bagian ke 5(lima) dari 12(dua belas) materi yang akan dibahas, bagi sobat yang belum mengenal apa itu grafika komputer dan apa itu processing ane sarankan untuk membaca artikel sebelumnya, sebab materi ini akan sulit untuk "difahami", "dihayati" apalagi "diamalkan" jika sobat belum tau processing itu apa dan apa-apa saja instruksi bentuk dasar nya. Nggak masalah sobat ngak ngebaca tentang gradasi warna karena memang nggak ada kaitanya dengan materi ini, namun agar lebih kreatif alangkah baiknya sobat baca juga materi tentang ornamen. :)

Namun sebelum kita ke TeKaPe, ada baiknya kita mampir dulu sejenak untuk membahas tentang struktur program pada Processing.

Lha, kok sekarang baru dibahas?

Ya, karena baru sekarang dibutukannya, pada materi sebelum-sebelumnya hal ini "belum" dibutuhkan. :)

Karena bahasa pemrograman yang digunakan pada Processing adalah bahasa java (ingat, bukan java tidak sama dengan jawa), maka strukturnya juga mirip. Namun tidak sama persis.

Jika pada java memiliki program utama dengan nama void main(), maka pada Processing program utama bernama void setup(), hanya saja jika kita tidak menyebutkan void setup(), maka semua instruksi yang ada dianggap berada didalam void setup().

Pada processing juga memiliki void draw() yang berfungsi untuk melukis frame untuk setiap satuan waktu (frameCount). Jika pada void setup() diberi instruksi noLoop(), maka frame hanya dilukis sekali saja.

frameCount dapat diatur kecepatannya dengan instruksi frameRate(freq). Dimana nilai freq adalah jumlah count dalam 1 (satu) detik.

 void setup(){  
  //Control Program
 }  
 void draw(){  
  //drawing frame
 }  

contoh :

float r,g,b;  //Buat variable r,g,b;
void setup(){  
 size(200,200);   //atur ukuran screen = 200x200 pixels;
 frameRate(3);  //atur frekwensi pelukisan = 3 Hz;
}  
void draw(){  
 r=random(0,255);  //nilai r adalah bilangan random dari 0 hingga 255;
 g=random(0,255);  //nilai g adalah bilangan random dari 0 hingga 255;
 b=random(0,255);  //nilai b adalah bilangan random dari 0 hingga 255;
 background(r,g,b);  //atur warna latar = nilai r,g,b;
}

Coba jalankan programnya, jika program anda benar maka layar akan berganti warna secara acak sebanyak 3x dalam 1 detik. Jangan terkesima, itu mah biasa pada Processing.. :)

1. Translation (Pergeseran)

Nah, sekarang saatnya kita bahas materi utama kita.

Translation berarti kita menggeser atau memindahkan objek dari koordinat A ke koordinat B. Nah, jika ada gambar pada sebuah kertas dan kita ingin memindahkannya bagaimana caranya ya?

Ada 2 (dua) cara untuk memindahkan objek, yaitu :

1. Geser titik koordinat gambarnya
2. Geser titik koordinat pusat frame-nya 

Untuk menggeser koordinat gambar tentulah sangat mudah. Tinggal tambahkan nilai x dan y sesuai keinginan maka gambar pun akan berpindah.

Misalnya ada ellipse dengan ukuran 100x100 pixels berada pada koordinat x=50 dan y=50. Untuk memindahkan lingkaran tersebut kita cukup menambahkan atau mengurangkan nilai x dan y dengan angka yang kita inginkan. Misalnya nilai x kita tambah 10 dan nilai y kita tambah 20, maka nilai x baru adalah 50+10=60 dan nilai y baru adalah 50+20=70.

Namun untuk memindahkan banyak objek sekali gus tentulah hal ini sangat tidak efisien, misalnya kita mau memindahkan gambar emoticon yang memiliki ellipse() untuk lingkar kepala dan 2(dua) buah mata serta satu buah arc() untuk mulut. Kalau masing-masing koordinatnya kita pindahkan one by one maka sungguh sangat dificult. (eh, bahasa saya udah keren nggak? kata tetangga sebelah kalau speak english ntu keren, nggak tau letak kerennya dimana?)

Lalu gimana solusinya?

Solusinya adalaaaah... Geser titik koordinat pusat frame-nya.

Default-nya titik pusat frame berada pada koordinat(0,0). Namun hal itu dapat kita pindahkan ke koordinat lain, misalnya (40,80), sehingga koordinat(0,0) yang kita tuliskan pada program pada hakikatnya sudah berpindah ke koordinat(40,80).

Instruksi yang digunakan untuk keperluan tersebut adalah translate(x,y). Untuk lebih jelasnya pelototin gambar berikut ini.

Tidak lengkap rasanya suatu ilmu kalau tidak ada prakteknya. Yap, untuk ngetest suatu "kebenaran", maka sepatutnya kita uji kebenaran tersebut terlebih dahulu. Cekidot..

 int x=0,y=0,cx,cy;  //delarasikan variable x=0, y=0 dan variable countX (cx) dan countY (cy)
 void setup(){  
  size(400,400);   
 }  
 void draw(){  
  background(255);   
  if(x>=300)cx=-5; //Jika nilai x>=300 maka nilai cx=-5 (agar nilai x dikurangi 5)
  else if(x<=0)cx=5;  //Jika nilai x<=0 maka nilai cx=5 (agar nilai x ditambah 5)
  x+=cx; //Nilai x ditambahkan dengan nilai cx;
  if(y>=300)cy=-2;  //fikirkan aja sendiri.. :D
  else if(y<=0)cy=2;  
  y+=cy;   
  translate(x,y); //Pindahkan pusat frame ke koordinat sesuai niali x dan y
  noStroke(); //Objek tidak memiliki outline
  fill(255,255,0); //atur warna isi = kuning
  ellipse(50,50,100,100);  //lingkar kepala
  fill(0);  //warna isi = hitam
  ellipse(30,30,15,30);  //mata kiri
  ellipse(70,30,15,30);  //mata kanan
  stroke(0);  //outline berwarna hitam
  strokeWeight(3);  //ketebalan pena (garis) = 3 pixels
  noFill();  //tidak ada warna isi
  arc(50,30,75,100,radians(45),radians(135));  //bibir
 }  

Oiya, karena kita terbiasa menggunakan sudut derjat (degree), ada baiknya kita manfaatkan instruksi radians(x) untuk mengkonfersi nilai sudut derjat menjadi sudut radian.

Berikut ilustrasi hasilnya..

2. Rotation (Perputaran)

Sama halnya dengan translation, rotation juga dapat kita lakukan dengan 2 cara, yaitu :

1. Gunakan rumus perputaran objek dengan instruksi sin() dan cos()
2. Putar frame-nya dengan instruksi rotate()

Namun pada pembahasan in kita hanya membahas cara ke-2. Kenapa? Karena cara pertama itu sudah kuno, kalau sudah ada cara baru yang lebih praktis buat apa mepelajari cara lama yang ribet?

Ane rasa sobat semua sudah faham apa itu rotasi(rotate), namun yang harus diperhatikan untuk masalah rotasi adalah "tentukan dulu titik putar (poros) nya". Secara default poros putar berada di koordinat(0,0). Agar objek tidak "menghilang" ataupun terpotong dari layar maka kita harus pindahkan dulu porosnya dengan instruksi translate(x,y).

Oke deh, tanpa banyak bacot lagi silahkan sedot contoh program berikut :

 void setup(){  
  size(300,300);   
 }  
 void draw(){  
  int c=width/2;  
  background(255);  
  ellipse(c,c,3,3);  
  translate(c,c);  //Pindahkan poros putar ke titik tengah screen.
  rotate(PI*frameCount/100);  //putar frame 2 derjat dikali nilai frameCount
  //Buat emoticon..
  noStroke();  
  fill(255,255,0);
  ellipse(50,50,100,100);   
  fill(0);  
  ellipse(30,30,15,30);  
  ellipse(70,30,15,30);  
  stroke(0);  
  strokeWeight(3);  
  noFill();  
  arc(50,30,75,100,radians(45),radians(135));  
 }  

Berikut ilustrasi hasilnya..

3. Scalling (Penskalaan)

Materi kita yang terakhir pada kesempatan ini adalah tentang Scalling, sama halnya dengan translation dan rotation, scalling juga punya 2(dua) cara, namun yang kita bahas hanya "cara terbaik" saja.

Adapun kedua cara tersebut adalah :

1. Perkecil/perbesar nilai width dan height dari sebuah objek, jika objek tersebut tidak memiliki nilai width dan height misalnya line, quad(), triangle() dll, maka selamat berpusing ria untuk memperbesar/memperkecil objek tersebut dengan menghitung jarak antar koordinat(x,y) nya kemudian dibagi/dikali dengan skala yang diinginkan.
2. Rubah skala frame dengan instruksi scale(x), dimana nilai x adalah nilai pembanding untuk skala awal frame.
   
   Maksudnya?
   Gini lo, untuk skala frame 2x lipat lebih besar maka digunakan instruksi scale(2), untuk kembali ke skala normal tinggal ketik scale(1), dan untuk memperkecil 50% tinggal ketik scale(0.5);
   Gimana kalau ingin memperbesar 175% atau memperkecil 35%, ya tinggal ketik scale(1.75) atau scale(0.35) aja.
   
   Ada pertanyaan lagi?
   
   Pernah nengok sendal terbang nggak?..

Biar lebih "ngeh" silahkan fahami, hayati dan amalkan program berikut :

 float s=1,cs=0.1;  //buat variable s=1 (skala 1) dan cs=0.1 (penambahan skala = 0.1)
 void setup(){  
  size(400,400);  
  frameRate(30);  //frekwensi pelukisan = 30Hz
 }  
 void draw(){  
  int c=width/2;  //buat variable untuk mengambil titik tengah (center) screen.
  background(255);  //Warna latar = putih
  if(s>=3.8)cs=-0.1;  //jika nilai skala >= 3.8 (1 berbanding 3.8), maka kurangi skala
  else if(s<=0.5)cs=0.1;  //jika nilai skala<=0.5 (1 berbanding 0.5) mak naikkan skala
  s+=cs;  //nilai skala adalah nilai skala ditambah nilai cs
  translate(c,c);  //pindahkan titik poros ke tengah layar
  scale(s);  //atur skala sesuai nilai s (antara 0.5 hingga 3.8)
  //Buat emoticon..
  noStroke();  
  fill(255,255,0);  
  ellipse(0,0,100,100);   
  fill(0);  
  ellipse(-20,-20,15,30);  
  ellipse(20,-20,15,30);  
  stroke(0);  
  strokeWeight(3);  
  noFill();  
  arc(0,-20,75,100,radians(45),radians(135));   
 }  

Sekian dulu materi tentang Translation, Rotation dan Scalling. Materi berikutnya adalah tentang kurva yang insya Allah akan segera launching.. :D