乱数を学ぼう

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

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

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

このレッスンでは、ランダムな数字の扱いについて学びます

2. 1 写してみよう

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

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

  stroke(255, 0, 255);

  line(50, 20, 50, 380);
  line(100, 20, 100, 380);
  line(150, 20, 150, 380);
  line(200, 20, 200, 380);
  line(250, 20, 250, 380);
  line(300, 20, 300, 380);
  line(350, 20, 350, 380);

}

縦線が50の間隔で描かれていればOKです。繰り返しのfor文で描いてもOKです。

チャプター3乱数でぐらぐら動かそう

ここまでの見本44

3. 1 変更しよう

   //繰り返し呼び出される処理
   function draw() {
     background(220);
 
+    var mx = mouseX / 10;
+    var offsetA = random(-mx, mx);
+    var offsetB = random(-mx, mx);
+    
     stroke(255, 0, 255);
+    
+    line(50 + offsetA, 20, 50 - offsetB, 380);
+    line(100 + offsetA, 20, 100 - offsetB, 380);
+    line(150 + offsetA, 20, 150 - offsetB, 380);
+    line(200 + offsetA, 20, 200 - offsetB, 380);
+    line(250 + offsetA, 20, 250 - offsetB, 380);
+    line(300 + offsetA, 20, 300 - offsetB, 380);
+    line(350 + offsetA, 20, 350 - offsetB, 380);
 
   }

3. 2 コードの解説

• 10行目
  • マウスのXと連動して変化する変数mxを宣言します。キャンバスの大きさが400なので、mxは0〜40の値になります。
• 11行目、12行目
  • -mxを最小値、mxを最大値とするランダムな数字を変数offsetAとoffsetBを代入しています。
• 16行目〜22行目
  • offsetAとoffsetBを使って、縦線の上と下を左右に変化させています。

random関数

引数が2つの場合は、2ののあいだの数字をランダムで返します。

チャプター4横線をくり返し文で描いてみよう

ここまでの見本45

4. 1 変更しよう

  line(350 + offsetA, 20, 350 - offsetB, 380);
  
+  //横線はfor文で描く
+  for(i=50;i<=350;i+=50){
+    line(20, i + offsetA, 380, i - offsetB);
+  }
  
}

for文の使い方には慣れてきたかな？繰り返し文を使うことで、縦線を描いたときよりかなりラクだね。

4. 2 コードの解説

これまでと同様にfor文を使っています。iは50から始まり、350になるまで、50ずつ増えています。

チャプター5自然なランダムを実現しよう

次に、自然なランダムを実現します。ランダムな値を返すrandom関数以外にもnoise関数というものがあります。使い方が少し難しいですが、ゲームの敵の動きなどを自然にすることや、色を塗るときに有効なので、頑張って習得しましょう！

5. 1 変更しよう

まずは、noise関数を使うために必要な変数dtを宣言して、値を0としておこう。

var dt = 0;

randomとnoiseを比べるために、円を3つ縦に並べて描きます。

  //横線はfor文で描く
  for(i=50;i<=350;i+=50){
    line(20, i + offsetA, 380, i - offsetB);
  }
  
+  //random関数で円を動かす
+  var offsetC = random(10) * 10;
+  ellipse(200 + offsetC , 100, 50, 50)
  
+  //noise関数で円を動かす
+  var offsetD = noise(dt) * 10;
+  ellipse(200 + offsetD , 200, 50, 50);
+  ellipse(200 + offsetD * 10 , 300, 50, 50);
+  dt += 0.1

}

コードが書けたら実行してみましょう。円が3つランダムに異なる動き方を指定ればOKです。

5. 2 コードの解説

• 31行目、32行目
  • random(10) * 10とすることで、(0〜10の乱数）を10倍しているため、0から100までのランダムな値をoffsetCはとります。結果、最上部の円は、激しくランダムに動いています。
• 34行目以降
  • noise関数の引数が0.1ずつ増えています。全くのランダムではなく、連続したランダムな値が生成されます。noise関数からは0から1の間の連続したランダムな値が生成されるため、10倍してから円のX座標に加えています。真ん中の円は0〜10、最下部の円はさらに10倍しているので、0〜100の範囲の値となります

5. 3 noise関数

ここでは引数が1つのパターンだけ学びましょう。

noise (変化する数字)

変化する数字が少しずつであるほど、連続性のあるランダムな値となります。1ずつだと、random(1)と似たような値になるため、まずは0.1や0.01ずつくらい増やして調整すると良いでしょう。

つまり、dtを変化する数字とした場合

var dt = 0;
...
...
.... noise(dt);
...
...
dt += (0.01や0.1);

が基本の使い方となります。

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

くり返しのfor文とrandom関数,noise関数を使いこなせるようになるためのチャレンジです。

6. 1 完成形

次の完成形をみて、コードを自分で描いてみよう。サイズ感や色は自由に変更してOKです。

6. 2 ヒント

• カラーモードはcolorMode(HSB,100)、彩度（2つめの引数）にrandomとnoiseを用いて色を変化させています。
• 上半分はnoiseの値で線の長さに変化を与え、線の端に円を描いています
• 下半分はrandomの値で線の長さに変化を与え、線の端に円を描いています