動くスケッチ・ソースコード

今日紹介するのは、同じようなコードを繰り返して実行するときに書きやすく・読みやすくする概念です。forループです。

コードの繰り返し

例えば丸を並べて書きたいとすると、どう書きますか？

ellipse(20, 20, 20, 20);
ellipse(40, 20, 20, 20);
ellipse(60, 20, 20, 20);
ellipse(80, 20, 20, 20);
ellipse(100, 20, 20, 20);
ellipse(120, 20, 20, 20);
ellipse(140, 20, 20, 20);

ellipseに渡すx座標だけが20コずつ増えていますね。ここは変数を使うことで便利にならないでしょうか？

let x = 20;
ellipse(x, 20, 20, 20);
x += 20;
ellipse(x, 20, 20, 20);
x += 20;
ellipse(x, 20, 20, 20);
x += 20;
ellipse(x, 20, 20, 20);
x += 20;
ellipse(x, 20, 20, 20);
x += 20;
ellipse(x, 20, 20, 20);
x += 20;
ellipse(x, 20, 20, 20);

これで二行ずつ、本当に同じコードの繰り返しになりました。

コードで表現できる繰り返しはプログラミングで効率化できる

上の例では、20から140まで、20コずつ増やしたx座標に丸を書いていますね。それをforループに任せましょう。

for (x = 20; x <= 140; x += 20) {
  ellipse(x, 20, 20, 20);  
}

forの()に入れる3つの要素は:

forは関数ではないので、この3つの要素は,ではなくて;でくぎります。

二次元ループ

ループの中にループを入れることで、例えばx座標だけではなくてy座標も回って2次元を渡って画面を丸でいっぱいにすることができます。

for (i = 0; i < 21; i++) {
  for (j = 0; j < 21; j++) {
    ellipse(20 * i, 20 * j, 20, 20);  
  }
}

ifとの組み合わせ

さらに、繰り返しの中は全て同じではなくてもいいです。例えば画面を丸で埋めたところを、左半分だけ黒い丸にしてみましょう。

for (i = 0; i < 21; i++) {
  for (j = 0; j < 21; j++) {
    if (i < 10) {
      fill(0);
    } else {
      fill(255);
    }
    ellipse(20 * i, 20 * j, 20, 20);  
  }
}

このように、ループをプログラミング言語の他の要素と組み合わせることで、色々が可能になります！