二重ループを学ぼう

チャプター1このレッスンのゴール

このレッスンで完成させるものを確認しよう

チャプター2連続した楕円形を表示しよう

2. 1 はじめに

for文の重要な使い方として、for文の中にfor文を使う手法があるよ。2回ループするという意味で、「二重ループ」と呼ばれたりもするよ。まずは二重ループが分かりやすい、図形を縦横に並べる方法について学ぼう

2. 2 写してみよう

//最初に一回だけ呼び出される初期設定
function setup() {
  createCanvas(400, 400);
  noStroke();
}

//繰り返し呼び出される処理
function draw() {
  background(0);
  for (var y = 0; y <= height; y += 40) {
    for (var x = 0; x <= width; x += 40) {
      fill(255, 140, y);
      ellipse(x, y, 40, 40);
    }
  }
}

コードが書けたら実行してみよう。円がキャンバスいっぱいに敷き詰められて描かれて入ればOKだよ。

2. 3 コードの解説

• 10行目〜15行目
  • for文を2つ使っています。11行目のfor文ではxが使われており、13行目のellipseのX座標を40ずつ増やしていることになります。つまり横方向に円を並べています。また10行目のfor文ではyが使われており、13行目のellipseのY座標を40ずつ増やしていることになります。つまり縦方向に円を並べています。

チャプター3forの表示の順番の仕組みを理解しよう

ここまでの見本40

3. 1 変更してみよう

   //繰り返し呼び出される処理
   function draw() {
     background(0);
-    for (var y = 0; y <= height; y += 40) {
-      for (var x = 0; x <= width; x += 40) {
         fill(255, 140, y);
         ellipse(x, y, 40, 40);
       }
     }

   //繰り返し呼び出される処理
   function draw() {
     background(0);
+    for (var y = 0; y <= 20; y += 40) {
+      for (var x = 0; x <= 400; x += 40) {
         fill(255, 140, y);
         ellipse(x, y, 40, 40);
       }
     }

コードを変更できたら実行してみよう。

3. 2 コードの解説

• 10行目,11行目
  • 10行目はfor文が0から始まり40ずつ増え、20を超えたら繰り返しをやめる命令です。つまり、横一列が描かれたら繰り返しは終了です。11行目はxが400になるまで増え続けるので、横幅いっぱい（このキャンバスの大きさは400）まで描かれます。

チャプター4チャレンジしよう

ここまでの見本41

くり返しの仕組みが理解できているか確認のために、図形を余りを使って描き分けてみよう。

4. 1 完成形

次の完成形を参考に自分でコードを変更してみよう。

ヒント

• 縦3列置きに円の大きさを変えているので、わり算の余り%を活用しよう
• 1箇所の円だけ赤くなっていることに注意しよう
  • 赤くするところがi列目のj番目と指定できるようにしよう