Di contoh-contoh dalam bab-bab sebelumnya, kita telah berlatih bagaimana menggambar sebuah bentuk dan menganimasikannya. Kita juga telah mengaplikasikan teknik menggambar bentuk dengan Processing untuk membuat beberapa bentuk sekaligus dengan jalan kira-kira seperti ini:
rect (10, 10, 40, 40);
ellipse (20, 20, 20, 20);
rect (30, 30, 50, 50);
Ketika potongan source code tadi dijalankan, maka di layar akan nampak 3 bentuk berbeda, yakni 2 bujur sangkar dan 1 lingkaran. Namun, bagaimana kalau kita ingin membuat 100 bujur sangkar sekaligus? Apakah kita harus menulis fungsi rect() sebanyak 100 kali? Jawabannya tentu tidak. Ada jalan lebih efisien untuk melakukan tugas tersebut, yakni dengan menggunakan loop atau iterasi atau pengulangan.
Loop bisa diartikan sebagai sesuatu yang dilakukan berkali-kali untuk rentang waktu tertentu. Dengan demikian, kita bisa melakukan sesuatu yang sama sebanyak 10 kali, 100 kali, atau berapapun sesuai keinginan kita. Kita juga bisa melakukan sesuatu selamanya, sehingga loop ini tidak akan berhenti.
Dalam membuat loop, maka berdasarkan definisi tadi, ada 3 hal yang harus ada ketika di awal loop:
Sehingga, katakan kita ingin membuat loop yang berjalan 100 kali, maka bisa jadi pengaturan loopnya adalah sebagai berikut:
Ketiga parameter ini kemudian yang mengatur bagaimana kita bisa mengulang sebuah perintah sebanyak berapapun yang kita butuhkan. Ini adalah cara sistematis yang dimengerti oleh komputer, karena tentu saja kita tidak bisa langsung menyuruh komputer "hei, gambarkan 100 lingkaran". Dengan menuliskan loop menggunakan parameter-parameter tadi, barulah komputer mengerti bahwa ia perlu melakukan sesuatu sebanyak 100 kali.
Dalam Processing, penulisan loop ini bisa dilakukan dengan 2 struktur, yakni struktur for dan while. Mari kita tengok struktur while terlebih dahulu.
Penulisan loop menggunakan struktur while dalam Processing memiliki format seperti ini:
while(titik_akhir_loop) {
pernyataan;
}
Struktur ini kira-kira bisa diartikan sebagai "selama belum sampai ke titik akhir, maka lakukan pernyataan ini". Perhatikan bahwa loop akan berjalan selama titik akhir loop belum ditemui. Lalu bagaimana menentukan titik akhir dan iterasi dari loop ini? Kita bisa menentukan keduanya di luar struktur while ini. Bentuknya bisa seperti ini:
titik_awal_loop;
while (titik_akhir_loop) {
pernyataan;
iterasi;
}
Sekarang, mari kita aplikasikan 100 loop tadi untuk membuat 100 bujur sangkar
Contoh 5-1 Membuat 100 Bujur Sangkar dengan Loop While
void setup() {
size (1000, 400);
smooth();
noStroke();
}
void draw() {
background (100);
fill (200, 0, 0);
// i adalah titik loop
// titik awal loop adalah i = 0
int i = 0;
// titik akhir loop adalah i = 100
// pengulangan baru terjadi selama i lebih kecil dari 100
while (i < 100) {
rect (i*8, height/2, 4, 4);
i++;
}
}
Pada program tadi, kita menggunakan sebuah variabel, i untuk mengantongi data titik loop. Titik awalnya adalah ketika i=0 dan titik akhirnya adalah ketika i = 100. Titik akhir ini kita ekspresikan di dalam kondisi while, yang mana loop dalam while baru berjalan selama nilai i lebih kecil dari 100. Agar nilai i bisa bertambah dari 0 sampai 100, maka di dalam loop while, kita tuliskan operasi i++, yang artinya setiap 1 loop selesai, maka nilai i akan bertambah 1. Dengan demikian maka pelan-pelan nilai i bertambah. Ketika nilai i sudah mencapai 100, artinya nilai i sudah tidak memenuhi kondisi untuk menjalankan loop tadi, maka loop dengan sendirinya akan berhenti dan kita punya 100 bujur sangkar di dalam layar.
Perhatikan juga posisi tempat kita menggambar bujur sangkar-bujur sangkar ini. Kita menuliskan perintah menggambarnya dengan
rect (i*8, height/2, 4, 4);
Untuk nilai i yang bertambah terus dari 0 sampai 99. Maka dengan demikian, posisi setiap bujur sangkar yang digambar akan saling berdampingan secara horizontal di tengah layar. Ini karena posisi koordinat X bujur sangkar akan terus bertambah, dari i=0, i=1, i=2, dst. Sementara posisi koordinat Y bujur sangkar tetap di tengah layar, atau height/2. Di sini, variabel i tidak hanya digunakan untuk mengatur loop, tapi nilai yang terkandung di dalamnya juga kita gunakan untuk menentukan posisi bujur sangkar.
Dalam loop, kita kenal juga istilah iterasi, yang mana ini merujuk pada langkah keberapa dalam loop yang sedang berjalan. Kita ambil contoh, untuk contoh 4-1 tadi, maka iterasi ke-24 akan melakukan pernyataan berikut:
// i = 24
rect (24*8, height/2, 4, 4) // menjalankan perintah rect (i*8, height/2, 4, 4)
Tentu saja, program tadi berisi 100 iterasi. Istilah ini penting untuk dipahami karena ketika kita menggunakan loop maka kita perlu mengetahui apa yang terjadi dalam setiap iterasi. Ketika ada kebingungan apa yang muncul di layar, kita bisa melacak apa yang terjadi dengan menelusuri apa yang sebenarnya dilakukan program dalam setiap iterasi.
Terlihat dengan menggunakan loop, maka source code bisa ditulis lebih ringkas untuk melakukan hal yang sama berulang kali. Penghematan dalam penulisan ini akan sangat membantu untuk menghindari program tidak bisa berjalan karena ada salah ketik source code. Tentu saja, penulisan source code pun bisa dilakukan jauh lebih cepat.
Latihan 5-1
Cara kedua untuk menggambar dengan loop adalah dengan menggunakan struktur for. Cara kerja struktur ini pada dasarnya sama dengan while, hanya bedanya, ketiga parameter loop dituliskan dalam 1 baris yang sama.
Format penulisan struktur ini adalah sebagai berikut:
for (titik awal; titik akhir; iterasi) {
pernyataan;
}
Ketiga parameter ini kemudian bisa dituliskan seperti ketika kita membuat loop dengan struktur while. Sehingga, contoh 4-1 bisa kita ubah dalam bentuk struktur for sebagai berikut:
Contoh 5-2 Menggambar 100 Bujur Sangkar dengal Loop For
void setup() {
size (1000, 400);
smooth();
noStroke();
}
void draw() {
background (100);
fill (200, 0, 0);
// i adalah titik loop
// titik awal loop adalah i = 0
// titik akhir loop adalah i = 100
// pengulangan baru terjadi selama i lebih kecil dari 100
// iterasi terjadi dengan pertambahan 1 pada variabel i
for (int i = 0; i < 100; i++) {
rect (i*8, height/2, 4, 4);
}
}
Bisa kita lihat perbedaan mendasar antara while dan for terletak pada bagaimana menuliskan ketiga parameter loop. Kalau pada struktur while kita menuliskan ketiga parameter seperti ini:
int i = 0;
while (i < 100) {
rect (i*8, height/2, 4, 4);
i++;
}
Maka dalam struktur for, loop ini bisa dituliskan menjadi:
for (int i = 0; i < 100; i++) {
rect (i*8, height/2, 4, 4);
}
Penulisan for lebih ringkas dibandingkan while, karena ketiga parameter loop dituliskan sebagai argumen untuk for(). Bisa dilihat bagaimana perpindahan penulisan ketiganya di while, yang ditulis dalam baris terpisah, kini digabungkan dalam 3 pernyataan berbeda di dalam for. Inilah perbedaan mendasar antara keduanya. Selain itu, tidak ada yang membuat memilih for lebih baik daripada while, atau sebaliknya. Semua kembali pada preferensi masing-masing.
Latihan 5-2
Ubahlah program yang sudah Anda buat dalam Latihan 5-1 ke dalam bentuk loop for
Loop yang telah kita buat, bisa juga dituliskan di dalam loop yang lain. Istilah ini kemudian dikenal dengan nama nested loop atau secara bebas bisa diartikan sebagai loop di dalam loop.
Penulisan nested loop ini sesuai namanya, jadi kita tuliskan baik loop while ataupun for di dalam loop while atau for yang lain. Format nested loop while adalah sebagai berikut:
while (kondisi_berhenti) {
while (kondisi_berhenti) {
pernyataan;
}
}
Sementara nested for bisa ditulis sebagai berikut:
for (titik_awal;titik_akhir;iterasi) {
for (titik_awal;titik_akhir;iterasi) {
pernyataan;
}
}
Keduanya bisa diartikan kira-kira "lakukan pengulangan kedua sebanyak sekian kali setiap 1 kali iterasi pengulangan kedua" Tentu saja, pengulangan kedua pun akan dilakukan sebanyak sekian kali juga.
Dengan menggunakan teknik ini, maka kita bisa menggambar bentuk dalam 2 dimensi baris dengan mudah. Kalau sebelumnya kita bisa menggambar 1 baris bujur sangkar saja, maka teknik ini memudahkan kita untuk menggambar beberapa baris bujur sangkar. Mari kita contohkan aplikasi nested loop tadi:
Contoh 5-3 Aplikasi Nested Loop
void setup() {
size (1000, 400);
smooth();
noStroke();
}
void draw() {
background (100);
fill (200, 0, 0);
for (int i = 0; i < 100; i++) {
for (int j=0; j < 40; j++) {
rect (i*8, j*8, 4, 4);
}
}
}
Dari contoh tadi, bisa kita lihat bagaimana menggunakan nested loop memungkinkan kita untuk membuat bujur sangkar kecil yang berbaris membentuk barisan dua dimensi (ada kolom dan baris). Tentu saja, ada banyak sekali aplikasi dari nested loop ini. Contoh tadi hanyalah untuk menunjukkan secara gamblang bagaimana menggunakan nested loop.
Latihan 5-3
Aplikasi loop juga akan nampak lebih berguna saat kita menggunakan array. Array adalah kumpulan data dengan tipe sama yang digabungkan menjadi satu himpunan. Ketika beberapa nilai digabungkan menjadi satu array, maka kita bisa dengan mudah mengakses kesemuanya ataupun hanya mengakses setiap elemen satu-persatu.
Untuk membuat array, caranya sedikit mirip dengan membuat variabel, hanya penulisannya sedikit diubah untuk menandakan bahwa kita sedang membuat array. Format deklarasi array adalah sebagai berikut:
tipe_data[] nama_variabel