Looping

Yuk, kita buat 3 lingkaran yang bersampingan.

function draw() {
  background(220);

  circle(10, 100, 10);
  circle(20, 100, 10);
  circle(30, 100, 10);
}

Task 1 📝: Ten Circles

Sekarang buatlah 10 lingkaran yang bersampingan.

Repot kan ya :D, bagaimana kalau kita membuat 100 lingkaran? Tentu sangat repot.

`for` loop

function draw() {
  background(220);

  for (let i = 1; i <= 10; i++) {
    circle(i * 10, 100, 10);
  }
}

Nah, bisa jauh lebih simple kan?

Mari kita pahami isi for loop di atas.

for (let i = 1; artinya kita membuat variabel i yang nilainya dimulai dari 1.
i <= 10; artinya kita akan melakukan looping selama nilai i kurang dari atau sama dengan 10.
i++ artinya setiap kali looping, nilai i akan bertambah 1.

i	i <= 10	Penjelasan
1	true	i dimulai dari 1
2	true	Nilai i bertambah 1 karena `i++`
3	true	Idem
4	true	Idem
5	true	Idem
6	true	Idem
7	true	Idem
8	true	Idem
9	true	Idem
10	true	Idem
11	false	Karena `i <= 10` bernilai `false`, maka looping berhenti

circle(i * 10, 100, 10); -> kita mengalikan nilai i dengan 10, sehingga lingkaran akan tergambar di posisi i * 10. Jadi lingkaran pertama akan tergambar di posisi 10, kedua di posisi 20, ketiga di posisi 30, dan seterusnya.

Task 2 📝: 20 Circles

Buatlah 20 lingkaran yang bersampingan.

Task 3 📝: Shift to Right

Geser semua lingkaran 10 pixel ke kanan, i.e. lingkaran dimulai dari posisi 20 (bukan 10) dan berakhir di posisi 210.

Task 4 📝: Add Space

Letakkan lingkaran di posisi 10, 30, 50, 70, 90, 110, 130, 150, 170, 190.

Bonus: Modulo Operator

% adalah operator modulo, sisa pembagian dari dua bilangan.

5 % 2 = 1 (karena 5 dibagi 2 sisa 1)
6 % 2 = 0 (karena 6 dibagi 2 sisa 0)
7 % 2 = 1 (karena 7 dibagi 2 sisa 1)
7 % 3 = 1 (karena 7 dibagi 3 sisa 1)

Nah, modulo operator bisa digunakan untuk membuat pola yang menarik.

function draw() {
  background(220);

  for (let i = 1; i <= 10; i++) {
    if (i % 2 == 0) {
      fill("red");
    } else {
      fill("blue");
    }
    circle(i * 20, 100, 10);
  }
}

i	i % 2
1	1
2	0
3	1
4	0
5	1

Perhatikan bahwa nilai modulo-nya bergantian antara 0 dan 1, sehingga bisa digunakan untuk membuat pola warna yang menarik.

Task 5 📝: Alternating Colors

Buatlah 10 lingkaran dengan pola warna merah - hijau - biru

Repeating `for` loop

Bagaimana jika kita ingin membuat 2 baris lingkaran seperti di atas?

Mudah, tinggal copy paste saja for loopnya, dan ganti posisi y-nya.

function draw() {
  background(220);

  for (let i = 1; i <= 10; i++) {
    if (i % 2 == 0) {
      fill("red");
    } else {
      fill("blue");
    }
    circle(i * 20, 100, 10);
  }
  for (let i = 1; i <= 10; i++) {
    if (i % 2 == 0) {
      fill("red");
    } else {
      fill("blue");
    }
    circle(i * 20, 120, 10); // perhatikan nilai y-nya berbeda
  }
}

Bagaimana untuk 4 baris?

function draw() {
  background(220);

  for (let i = 1; i <= 10; i++) {
    if (i % 2 == 0) {
      fill("red");
    } else {
      fill("blue");
    }
    circle(i * 20, 100, 10);
  }
  for (let i = 1; i <= 10; i++) {
    if (i % 2 == 0) {
      fill("red");
    } else {
      fill("blue");
    }
    circle(i * 20, 120, 10); // perhatikan nilai y-nya berbeda
  }
  for (let i = 1; i <= 10; i++) {
    if (i % 2 == 0) {
      fill("red");
    } else {
      fill("blue");
    }
    circle(i * 20, 140, 10); // perhatikan nilai y-nya berbeda
  }
}

Wah repot ya, dejavu :D

Nested `for` loop

Solusinya adalah wrap for loop di atas di dalam for loop baru

function draw() {
  background(220);
  for (let j = 0; j < 3; j++) {
    for (let i = 1; i <= 10; i++) {
      if (i % 2 == 0) {
        fill("red");
      } else {
        fill("blue");
      }
      circle(i * 20, 100 + j * 20, 10);
    }
  }
}

Perhatikan adalah j yang bertugas menggeser posisi y-nya.

Bonus: i, j, k Counter

Pada umumnya, loop counter dinamai i, j, k, dst. Ini adalah konvensi yang umum digunakan di dunia programming. Code di atas tidak sesuai konvensi, karena kita menggunakan j di foor yang paling luar, dan i di for yang paling dalam.

Mari kita ubah agar sesuai konvensi.

function draw() {
  background(220);
  for (let i = 0; i < 3; i++) {
    for (let j = 1; j <= 10; j++) {
      if (j % 2 == 0) {
        fill("red");
      } else {
        fill("blue");
      }
      circle(j * 20, 100 + i * 20, 10);
    }
  }
}

Task 6 📝: Three Colors

Buatlah 10 baris pola di atas

Pola Segitiga

Nilai i dan j bisa dibandingkan untuk membuat pola menarik

for (let i = 0; i < 10; i++) {
  for (let j = 1; j <= 10; j++) {
    if (j <= i + 1) {
      if (j % 2 == 0) {
        fill("red");
      } else {
        fill("blue");
      }
      circle(j * 20, 100 + i * 20, 10);
    }
  }
}

Task 7 📝: Triangle Shape

Buatlah pola segitiga terbalik

Animasikan

Kita bisa membuat animasi dengan mengubah nilai variabel di dalam draw loop.

function draw() {
  background(220);

  for (let i = 0; i < 10; i++) {
    for (let j = 1; j <= 10; j++) {
      if (j % 2 == 0) {
        fill("red");
      } else {
        fill("blue");
      }
      circle(j * 20 + random(5), 100 + i * 20 + random(5), 10);
    }
  }
}

Task 8 📝: Animated

Buatlah agar lingkaran bergerak ke kanan dan ke kiri saja

Task 9 📝: Chess Board

Buatlah papan catur seperti ini:

`mouseX` dan `mouseY`

Yuk sekarang kita buat interaktif dengan menggunakan mouseX dan mouseY.

https://p5js.org/reference/#/p5/mouseX

mouseX adalah variable yang menyimpan posisi x dari mouse, dan mouseY adalah variable yang menyimpan posisi y dari mouse.

function draw() {
  background(220);

  circle(mouseX, mouseY, 100);
}

Perhatikan bahwa lingkaran akan mengikuti posisi mouse.

Oh, ya apa yang terjadi jika background(220) dihapus?

Task 10 📝: Without `background`

Hapus background(220) dan lihat apa yang terjadi.

Task 11 📝: Mouse Following

Buatlah animasi seperti ini

Task 12 📝: Enlarge

Buat agar ketika mouse-nya diclick, lingkaran akan membesar. Dan ketika keyboard-nya ditekan, lingkaran akan mengecil.

Bonus: Cool Pattern

Pertama-tama, yuk bikin persegi 20x20

function draw() {
  background(220);
  noLoop();

  for (let i = 0; i < 20; i++) {
    for (let j = 0; j < 20; j++) {
      square(j * 20, i * 20, 20);
    }
  }
}

Kemudian, kita buat garis diagonal dari kiri atas ke kanan bawah

function draw() {
  background(220);
  noLoop();

  for (let i = 0; i < 20; i++) {
    for (let j = 0; j < 20; j++) {
      square(j * 20, i * 20, 20);

      let topLeftX = j * 20;
      let topLeftY = i * 20;
      let bottomRightX = j * 20 + 20;
      let bottomRightY = i * 20 + 20;

      line(topLeftX, topLeftY, bottomRightX, bottomRightY);
    }
  }
}

Satu lagi diagonal dari kanan atas ke kiri bawah

function draw() {
  background(220);
  noLoop();

  for (let i = 0; i < 20; i++) {
    for (let j = 0; j < 20; j++) {
      square(j * 20, i * 20, 20);

      let topLeftX = j * 20;
      let topLeftY = i * 20;
      let bottomRightX = j * 20 + 20;
      let bottomRightY = i * 20 + 20;

      let topRightX = j * 20 + 20;
      let topRightY = i * 20;
      let bottomLeftX = j * 20;
      let bottomLeftY = i * 20 + 20;

      line(topLeftX, topLeftY, bottomRightX, bottomRightY);
      line(topRightX, topRightY, bottomLeftX, bottomLeftY);
    }
  }
}

Sekarang kita hapus persegi dan biarkan garisnya saja

Terakhir, decision untuk membuat diagonal-nya kita randomize. Kadang kita buat diagonal dari kiri atas ke kanan bawah, kadang kita buat diagonal dari kanan atas ke kiri bawah.

function draw() {
  background(220);
  noLoop();

  for (let i = 0; i < 20; i++) {
    for (let j = 0; j < 20; j++) {
      let topLeftX = j * 20;
      let topLeftY = i * 20;
      let bottomRightX = j * 20 + 20;
      let bottomRightY = i * 20 + 20;

      let topRightX = j * 20 + 20;
      let topRightY = i * 20;
      let bottomLeftX = j * 20;
      let bottomLeftY = i * 20 + 20;

      let rnd = random(2);

      if (rnd < 1) {
        line(topLeftX, topLeftY, bottomRightX, bottomRightY);
      } else {
        line(topRightX, topRightY, bottomLeftX, bottomLeftY);
      }
    }
  }
}

Task 13 📝 Cool Pattern

Buatlah pattern seperti ini