Search form

Menggambar barisan objek

Kumpulan objek yang jaraknya teratur.

Audiens

Setelah puas dengan menggambar lingkaran, kita akan mencoba menggambar sejumlah lingkaran. Tentu saja kita bisa membuat seperti ini.

size(400, 100);

ellipse( 50, 50, 80, 80);
ellipse(150, 50, 80, 80);
ellipse(250, 50, 80, 80);
ellipse(350, 50, 80, 80);

Perhatikan dalam kode tersebut, ada empat kali perintah ellipse dijalankan. Masing-masing hanya berbeda di koordinat x-nya, tetapi koordinat y-nya sama, juga ukurannya sama.

Menggunakan For

Kalau kamu hendak menggambar beberapa objek sekaligus secara teratur, kamu bisa menggunakan for. Kode di bawah ini akan membuat gambar yang persis sama dengan sebelumnya.

size(400, 100);

for (int x = 50; x <= 350; x += 100) {
  ellipse(x, 50, 80, 80);
}

Apakah yang dilakukan oleh for di atas? Perintah for membutuhkan 3 bagian. Mari kita perhatikan.

for (int x = 50; x <= 350; x += 100)

Hitung mulai dari berapa?

Bagian pertama memberitahu komputer, ia harus menghitung dari berapa. Dalam gambar kita, koordinat X-nya mulai dari 50, maka kita mulai saja dari 50. Dalam pemrograman, kita memerlukan sebuah variabel untuk mengingat perhitungan kita sudah sampai di mana. Dalam sketch kita di atas, variabel penghitungnya adalah x. Karena x pastilah merupakan bilangan bulat (50, 51, 52, dan seterusnya), maka kita perlu memberitahu Processing bahwa x ini adalah bilangan bulat, yang disimbolkan sebagai int, singkatan dari integer. Maka kita menuliskan:

int x = 50;

Selama apa menghitungnya?

Bagian kedua memberitahu komputer selama apa ia harus menghitung. Komputer tidak harus menghitung selama-lamanya, tetapi ia harus menghitung selama x-nya kurang dari atau sama dengan 350. Maka kita berikan bagian kedua ini:

x <= 350;

Hitung dengan selisih berapa?

Kemudian, kita ingin menghitung x-nya sebagai 50, 150, 250, 350. Berarti ada selisih atau jarak 100 di antara tiap bilangan. Maka kita berikan dalam bagian ketiga:

x += 100

Apa yang dilakukan?

Setelah itu, dalam setiap perulangan, kita harus menggambar elips yang koordinat X-nya menyesuaikan diri dengan perhitungan komputer. Maka kita perlu memberitahu perintah elipsnya mengenai hal ini.

ellipse(x, 50, 80, 80);

Agar lebih jelas, saya ubah sedikit format penulisan program di atas, dengan dibubuhi komentar.

size(400, 100);

for (
  int x = 50; // hitung mulai dari 50, penghitungnya x bilangan bulat
  x <= 350;   // hitung selama belum mencapai atau sama dengan 350
  x += 100    // menghitungnya lompat 100
  ) {
  
  ellipse(
    x,   // Koordinat X-nya menggunakan nilai x hasil perhitungan
    50,  // Koordinat Y-nya selalu 50
    80,  // Diameternya selalu 80
    80
  );
}

Langkah demi langkah

Sekarang mari kita lihat proses yang dilakukan oleh komputer ketika menjalankan program kita.

Pertama, x = 50. Apakah x <= 350? Tentu saja. Maka kerjakan yang diperintahkan, yaitu ellipse(50, 50, 80, 80).

Selesai kerjakan perintah, tambahkan x dengan 100. Jadi, berikutnya x = 150. Apakah x <= 350? Masih. Maka kerjakan yang diperintahkan, yaitu ellipse(150, 50, 80, 80).

Berikutnya, tambahkan x dengan 100 lagi, sehingga x = 250. Apakah x <= 350? Masih. Maka kerjakan yang diperintahkan lagi, yaitu ellipse(250, 50, 80, 80).

Tambahkan x dengan 100 lagi, sehingga x = 350. Apakah x <= 350? Masih. Maka kerjakan yang diperintahkan lagi, yaitu ellipse(350, 50, 80, 80).

Tambahkan x dengan 100 lagi, sehingga x = 450. Apakah x <= 350? Wah, sudah melampaui! Maka komputer harus stop.

Demikianlah langkah-langkah yang dilakukan komputer dalam menjalankan for di atas.

For yang lebih baik

Kalau kita perhatikan, for di atas langsung memakai koordinat X yang akan dipakai, yaitu 50, 150, 250, dan 350. Tetapi cara seperti ini kurang bijaksana. Dalam program yang lebih kompleks kita bukan hanya akan mengubah koordinat X saja, tetapi juga yang lain. Lebih bijaksana kalau kita menggunakan barisan bilangan yang lebih sederhana, yaitu 0, 1, 2, 3, dan seterusnya.

Maka sekarang kita akan mengubah for-nya sehingga perhitungannya menggunakan 0, 1, 2, 3, dan seterusnya. Sebelum meneruskan membaca, cobalah memikirkan sendiri seperti apa bentuk for-nya.

Hitung mulai dari berapa?

Pertama, kita akan menghitung mulai dari 0. Anggap kita menghitung dengan variabel i. Maka penulisannya adalah:

int i = 0;

Selama apa menghitungnya?

Karena kita perlu empat lingkaran, berarti untuk menghitungnya cukup dengan 0, 1, 2, 3. Karena itu, kita bisa menuliskan

i <= 3;

Namun, alih-alih mengatakan i<=3, adalah lebih bijaksana jika kita memakai i < 4.

i < 4;

Mengapa demikian? Karena dengan mengatakan i<4, kita dapat langsung mengetahui bahwa lingkaran yang hendak kita gambar adalah 4.

Hitung dengan selisih berapa?

Berikutnya, lompatan perhitungan. Karena 0, 1, 2, 3 berjarak 1 tiap kali perhitungan, maka kita dapat menuliskan.

i += 1

Namun, sekali lagi ada cara yang lebih bijaksana untuk melakukan hal ini. Processing (juga Java, PHP, C++) memiliki cara penulisan khusus untuk menambah satu. Yaitu dengan menggunakan simbol ++.

i ++

Dengan demikian for lengkap kita berbentuk:

for(int i = 0; i < 4; i++)

Apa yang dilakukan?

Sekarang bagian yang sedikit rumit, yaitu menerjemahkan perhitungan 0, 1, 2, 3 menjadi yang kita mau, yaitu 50, 150, 250, dan 350.

Perhatikan bahwa ini tidak lain adalah barisan aritmatika yang dimulai dari 50 dengan selisih 100. Hanya saja, sementara di sekolah kita belajar barisan aritmatika dengan indeks mulai dari 1, kita sekarang akan memakai indeks mulai dari 0.

  • 50 = 50 + 0 = 50 + 100×0
  • 150 = 50 + 100 = 50 + 100×1
  • 250 = 150 + 100 = 50 + 100×2
  • 250 = 250 + 100 = 50 + 100×3

Setiap bilangan tersebut bisa diubah menjadi bentuk 100×sekian. Dalam for kita di atas, sekian-nya adalah variabel i. Maka koordinat X-nya menjadi:

Koordinat X = 50 + 100×i

Tanda kali di Processing menggunakan asterisk *. Jadi perintah elipsnya bisa ditulis:

ellipse(50 + 100 * i, 50, 80, 80);

Kode lengkapnya ada di bawah ini.

size(400, 100);

for (int i = 0; i < 4; i ++) {
  ellipse(50 + 100 * i, 50, 80, 80);
}

Hasilnya? Tepat sama seperti sebelum-sebelumnya. Lalu untuk apa kita menempuh kesulitan ini? Apakah ini semua tidak ada gunanya? Sekilas memang tidak ada gunanya, tetapi kamu telah bertambah sedikit bijaksana. Pola yang barusan kamu pelajari akan terus menerus muncul dalam pemrograman.

Beri tanggapan