Variabel

Sebuah variabel akan menyimpan suatu nilai bertipe tertentu di dalam memori, dan selanjutnya nilai ini dapat dipergunakan di bagian lain di dalam program. Salah satu keuntungan menggunakan variabel adalah efisiensi dalam penulisan skrip program. Dengan menggunakan variabel, nilai suatu data dapat diubah (di-update) sekali tanpa harus mengubah seluruh data yang sama di dalam program tersebut. Selain itu, logika pemrograman dapat dibentuk dengan lebih baik jika menggunakan variabel.

size(480, 200);
int x = 60;
int y = 100;
int d = 90;
ellipse(x, y, d, d+10);
ellipse(x+120, y, d, d+20);
ellipse(x+240, y, d, d+40);
ellipse(x+360, y, d, d+60);

Pada contoh di atas, tipe data yang digunakan adalah int (integer). Tipe data ini digunakan untuk mendeklarasikan nilai bulat (tanpa mengandung koma). Terdapat berbagai tipe data yang lain, dan dirangkum pada berikut:

Pengulangan

Pengulangan akan mempermudah pekerjaan, terutam jika kita harus menulis skrip program yang serupa satu-persatu. Pada Processing, pengulangan (iterasi) yang dapat dimanfaatkan adalah bentuk for dan while.

Fungsi for

Fungsi for memiliki sintaks:

for (insialisasi; cek; perbarui) { 
  pernyataan
} 

Ilustrasi fungsi for ditunjukkan pada gambar berikut:

size(480, 120);
strokeWeight(5);
for (int i = 20; i < 400; i += 15) {
   line(i, 40, i + 60, 80);
}

size(480, 120);
strokeWeight(2);
for (int i = 20; i < 600; i += 20) {
  line(i, 0, i - i/5, 80);
  line(i - i/5, 80, i*1.2, 120);
}

Fungsi for juga bisa dibuat bersarang (nested for). Artinya, terdapat for di dalam for. Iterasi akan bertambah sesuai dengan ukuran tiap-tiap for.

size(480, 120);
noStroke();
for (int y = 0; y <= height; y += 40) {
 for (int x = 0; x <= width; x += 40) {
  fill(220);
  ellipse(x, y, 40, 40);
  fill(#FA0844);
  ellipse(x+20, y+20, 40, 40);
 }
}

Fungsi width dan height pada skrip di atas masing-masing menyatakan lebar dan tinggi dari Display Window kita. dengan demikian, kita tidak perlu mengetikkan berupa nilai angka secara eksplisit.

Fungsi while

Fungsi while juga merupakan bentuk perulangan, dan memiliki sintaks:

 while (ekspresi) {
  pernyataan
}

Selagi ekspresi bernilai benar, maka pernyataan di dalam kalang while akan dieksesksi terus-menerus. Ilustrasi fungsi while ditunjukkan pada gambar berikut:

size(300, 300);
strokeWeight(2);
int i = 0;

while (i <= 0.4*height){  
  line(0, i, i, i+i*1.5);
  line(i, i+i*1.5, i+i*1.5, 0);
  i = i + 10;
}

Fungsi

Keberadaan fungsi sangat penting terutama ketika terdapat bagian-bagian dari program yang sering dipanggil, misalnya rumus matematika, atau pembuatan suatu objek yang rumit, yang dipanggil berkali-kali.

Sebelum memahami fungsi, kita akan membahas void setup() dan void draw(). Mengapa? Sebab kita akan menuliskan fungsi ini di luar kedua void ini.

void setup()

void setup() adalah fungsi yang akan dieksekusi hanya sekali oleh program. Pada umumnya, skrip yang dimasukkan di dalam void setup() adalah fungsi size() (jika tidak, maka Display Window akan berukuran 100 x 100 piksel), mengatur warna background, mengatur warna garis, atau memuati gambar maupun huruf. Jika berkomunikasi secara serial dengan peralatan lain di luar komputer, kita dapat mengatur kecepatan serial di dalam fungsi ini.

void draw()

void draw() adalah fungsi yang akan dieksekusi berkali-kali oleh program, dan baru akan berhenti ketika Display Window ditutup atau tombol Stop ditekan. Program akan diesekusi dari skrip paling atas, melewati void setup() dan selanjutnya menuju void draw(). Di dalam void draw(), program akan berulang. Satu perjalanan dalam mengeksekusi program di dalam void draw dikenal dengan istilah frame. Secara default, Processing akan mengeksekusi 60 frame perdetik. Namun, kecepatan ini dapat diatur.

Amatilah contoh program berikut:

void setup(){
 println("Ini dieksekusi hanya sekali"); 
}

void draw(){
 print("Ini dieksekusi berkali-kali: ");
 println(frameCount);
}

Lihatlah hasilnya pada jendela Console:

Ini dieksekusi hanya sekali
Ini dieksekusi berkali-kali: 1
Ini dieksekusi berkali-kali: 2
Ini dieksekusi berkali-kali: 3
Ini dieksekusi berkali-kali: 4
Ini dieksekusi berkali-kali: 5
Ini dieksekusi berkali-kali: 6
Ini dieksekusi berkali-kali: 7

Fungsi print dan println digunakan untuk pengiriman data secara serial. Fungsi ini juga berguna untuk menampilkan data melalui jendela Console. Fungsi print dan println adalah serupa, namun println akan menghasilkan baris baru.

Komputer mengeksekusi setiap baris program yang ditulis. Ketika menemui bagian yang memiliki fungsi, maka komputer akan mencari bagian yang mendefinisikan fungsi tersebut, dan selanjutnya akan kembali lagi ke bagian sebelumnya.

Amatilah contoh berikut. Pada contoh ini, kita akan mencari nilai dari diameter lingkaran jika yang diketahui adalah luas dari lingkaran tersebut. Rumus luas lingkaran adalah L=(1/4)*pi*(D^2). Dengan demikian, diameter lingkaran dapat dicari dengan rumus D = 2*akar(L/pi).

void setup(){
  println("Mencari nilai diameter dari input luas...");
  cariDiameter(100);
  cariDiameter(200);
}


void cariDiameter(int luasLingkaran){
  float d = 2*sqrt(luasLingkaran/3.14);
  println("Diameter lingkaran = " + d);
}

Amatilah hasilnya pada jendela Console, seperti berikut ini:

Mencari nilai diameter dari input luas...
Diameter lingkaran = 11.286653
Diameter lingkaran = 15.961738

Adakalanya kita menginginkan agar fungsi kita memiliki nilai output tertentu. Fungsi void adalah fungsi yang tidak memiliki nilai balik. Dengan kata lain, fungsi void tidak memiliki nilai output yang dapat disimpan dalam suatu variabel tertentu. Mari kita modifikasi program kita agar nilai dari diameter lingkaran dapat kita simpan, dan selanjutnya dapat kita pergunakan untuk menggambar lingkaran. Amatilah contoh berikut:

float diameter;

void setup(){
  size(300, 200);  

  diameter =  cariDiameter(5000);
  ellipse(80, 100, diameter, diameter);

  diameter =  cariDiameter(10000);
  ellipse(200, 100, diameter, diameter);
}

float cariDiameter(int luasLingkaran){
  float d = 2*sqrt(luasLingkaran/3.14);
  return d;
}

Pada contoh di atas, kita menggunakan fungsi return untuk mendapatkan nilai balik dari fungsi kita, pada kasus ini adalah nilai d (diameter lingkaran). Kata void kita hilangkan, dan diganti dengan tipe data apa yang kita inginkan (dalam hal ini float).

float diameter = 0;
int luas = 0;

void setup(){
  size(400, 300);
  strokeWeight(3);    
}

void draw(){
  background(204);
  luas = luas + 2000;
  diameter = cariDiameter(luas);
  if (luas >= 40000){
    luas = 0;
  }
  ellipse(200, 150, diameter, diameter);
  delay(200);
}

float cariDiameter(int luasLingkaran){
  float d = 2*sqrt(luasLingkaran/3.14);
  return d;
}

void setup(){
 size(580, 360); 
}

void draw(){
 background(204);
 ulat(0, 0);
 ulat(100, 150);
 ulat(300, 40);
}

void ulat(int x, int y){
  pushMatrix();
  translate(x, y);
 
  //segmen badan 1
  fill (#03480F);
  ellipse(200, 80, 70, 30);
  
  //segmen badan 2
  fill (#109026);
  ellipse(180, 80, 70, 60);
  
  //segmen badan 3
  fill (#20B239);
  ellipse(160, 100, 70, 100);
  
  //segmen badan 4
  fill (#109026);
  ellipse(120, 120, 80, 80);
  
  // segmen badan 5
  fill (#20B239);
  ellipse(100, 100, 100, 120);
  
  //muka
  fill (#3AD627);
  ellipse(90, 75, 110, 80);
  
  //mata kanan
  fill(0);
  ellipse(100, 70, 15, 20);
  
  //mata kiri
  ellipse(70, 65, 15, 20);
  popMatrix();
}

Pada program di atas, karakter ulat dimunculkan sebanyak tiga kali dengan posisi yang berbeda-beda. Jika kita mengetikkan program yang sama berkali-kali untuk membuat karakter ulat, maka skrip program kita menjadi sangat panjang. Hal ini tentulah tidak efisien. Oleh karena itu, penggunaan fungsi menjadi sangat penting untuk kasus ini.

Fungsi translate() pada program di atas digunakan untuk menggeser objek relatif terhadap posisi (0, 0) pada Display Window. Dengan menggunakan fungsi ini, kita dapat menggeser-geser posisi karakter yang kita buat secara utuh.

Pada pemrograman berikutnya, kita akan menggunakan fungsi scale(). Dengan menggunakan fungsi ini, kita dapat memperbesar atau memperkecil karakter yang kita buat. Kita lakukan modifikasi pada input fungsi, yaitu dari dua input menjadi tiga input. Amatilah program berikut:

void setup(){
 size(580, 360); 
}

void draw(){
 background(204);
 ulat(0, 0, 1.0);
 ulat(100, 150, 1.2);
 ulat(300, 40, 0.5);
 ulat(350, 90, 0.7);
}

void ulat(int x, int y, float s){
  pushMatrix();
  translate(x, y);
  scale(s);
 
  //segmen badan 1
  fill (#03480F);
  ellipse(200, 80, 70, 30);
  
  //segmen badan 2
  fill (#109026);
  ellipse(180, 80, 70, 60);
  
  //segmen badan 3
  fill (#20B239);
  ellipse(160, 100, 70, 100);
  
  //segmen badan 4
  fill (#109026);
  ellipse(120, 120, 80, 80);
  
  // segmen badan 5
  fill (#20B239);
  ellipse(100, 100, 100, 120);
  
  //muka
  fill (#3AD627);
  ellipse(90, 75, 110, 80);
  
  //mata kanan
  fill(0);
  ellipse(100, 70, 15, 20);
  
  //mata kiri
  ellipse(70, 65, 15, 20);
  popMatrix();
}

Demikian tutorial Processing untuk kesempatan kali ini. Selanjutnya, kita akan bahas bagaimana memasukkan media gambar dan tulisan (Bersambung.....)