レッスン 15

繰り返し処理を学ぼう

繰り返し処理について学びます

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

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

チャプター2線を複数表示しよう

2. 1 写してみよう

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

//繰り返し呼び出される処理
function draw() {
  background(220);
  stroke(255, 0, 0);

  line(20, 40, 80, 80);
  line(80, 40, 140, 80);
  line(140, 40, 200, 80);
  line(200, 40, 260, 80);
  line(260, 40, 320, 80);
  line(320, 40, 380, 80);
  line(380, 40, 440, 80);
}

赤線が連続して7本描かれていればOKだよ。

2. 2 コードの解説

lineは線を描くための関数です。指定した4つの数字の最初の2つと、後ろの2つがx,y座標の組となり、それらを結んだ線が描かれます。

チャプター3for文で繰り返し表示しよう

ここまでの見本31

1つ1つ座標を指定するのは大変です。
このチャプタでは、繰り返し文forを使って、1つずつ座標を指定するのではなく、同じ模様を描いてみよう。

3. 1 変更してみよう

   function draw() {
     background(220);
     stroke(255,0,0);
-    line(20, 40, 80, 80);
-    line(80, 40, 140, 80);
-    line(140, 40, 200, 80);
-    line(200, 40, 260, 80);
-    line(260, 40, 320, 80);
-    line(320, 40, 380, 80);
-    line(380, 40, 440, 80);
   }

   function draw() {
     background(220);
     stroke(255,0,0);
+    for (var i = 20; i < 400; i += 60) {
+      line(i, 40, i + 60, 80);
+    }
    }

3. 2 コードの解説

繰り返しの処理をfor文を使って、描いています。

for (var i = 20; i < 400; i += 60) は、次のような意味になります。

最初はiに20を代入
iが400より小さい間は繰り返す
繰り返すたびに60ずつふやす

繰り返したい処理は、line(i, 40, i + 60, 80);なので、次の処理が実行されていることになります。繰り返しのfor文を使うことで、なんども同じことを書かなくてよくなりました。

line(20, 40, 80, 80);
line(80, 40, 140, 80);
line(140, 40, 200, 80);
line(200, 40, 260, 80);
line(260, 40, 320, 80);
line(320, 40, 380, 80);
line(380, 40, 440, 80);

for文の書き方

for文は次のように書きます。

for(繰り返す方法){
    繰り返す処理
}

繰り返す方法の書き方は、次の通りです。3つ指定し、セミコロン;で区切ります。

for（カウンタの変数の初期値;繰り返す条件;カウンタ変数の変化のさせ方）{
    繰り返す処理
}

チャプター4単純な繰り返し文を練習しよう

4. 1 変更しよう

ここまでの見本32

16行目以降を変更して繰り返しの応用を学びます。まずは上部1/3に4ずつずらす縦線を引きます。

  //単純な繰り返し
  stroke(0);
  for(i=0;i<=480;i+=4){
    line(i,0,i,40);
  }
 
 }

実行した結果、画面の上に4ずつずらした縦線が描かれていればOKです。

4. 2 コードの解説

iを0から初めて4ずつ増やし、ながら縦線を書いています。480になるまでなので、

0×4,1×4,2×4,3×4,4×4,・・・,120x4の合計121本の線が描かれることになります。（0も入っています）

チャプター5規則正しく色分けをしよう

このレッスンでは、単純な繰り返しではなく、規則正しい繰り返しの方法について学びます

5. 1 変更しよう

  //単純な繰り返し
  stroke(0);
  for(i=0;i<=480;i+=4){
    line(i,0,i,40);
  }
  
  //3本おきに色を変える
  for(i=0;i<=480;i+=8){
    if(i%24 == 0){
      stroke('black');
    }else{
      stroke('red');
    }
    line(i,40,i,80);  
  }

 }

実行して、3本おきに色が変化した線がかけていればOKだよ

5. 2 コードの解説

8ずつずらして線を。if文を使ってi%24 == 0を条件式に入れることにより、iが24や48の場合にだけ黒色blackで線を描き、それ以外の場合は赤色を描く処理となっています。

余りと繰り返し

整数の割り算のあまりは、規則正しい場合分けに用いることが可能です。例えば1から100の数字を7で割ったあまりで分類する場合、必ずあまりは1〜6になります。この性質を使えば、7色に分けることも可能です。

あまりが1：1,8,15,22,29,...,99
あまりが2：2,9,16,23,30,...,93
あまりが3：3,10,17,24,31,...,94
あまりが4：4,11,18,25,32,...,95
あまりが5：5,12,19,26,33,...,96
あまりが6：6,13,20,27,34,...,97
あまりが0：7,14,21,28,35,...,98

チャプター6ランダムに色分けをしよう

このチャプタではランダムに色を分けてみましょう。

  //単純な繰り返し
  stroke(0);
  for(i=0;i<=480;i+=4){
    line(i,0,i,40);
  }
  
  //3本おきに色を変える
  for(i=0;i<=480;i+=8){
    if(i%24 == 0){
      stroke('black');
    }else{
      stroke('red');
    }
    line(i,40,i,80);  
  }

  //単純な繰り返し
  stroke(0);
  for(i=0;i<=480;i+=4){
    var randomNum = random(100);
    if(randomNum <= 50){
      stroke('black');
    }else{
      stroke('red');
    }
    line(i,80,i,120);
  }
  noLoop();
 }

実行した結果、次のように下半分の4ずつずらして縦線が描かれ、その色がランダムに変わっていればOKです。