この記事は Qiita p5js アドベントカレンダー7日目の記事です。
これはなに
p5.jsが用意している関数について理解を深める記事です。
今回はMath、Random系に位置するrandomSeed()とrandom()について。
random()
乱数を返す関数です。
今後幾度となく使用していくであろう関数だと思います。
ランダム大好き。
リファレンスより
ランダムな浮動小数点数を返します。
0、1、2のいずれかの引数を取ります。
引数が与えられていない場合は、0から1まで（ただし1を含まない）の乱数を返します。
1つの引数が与えられ、それが数値である場合、0からその数値まで（ただし含まない）の乱数を返します。
1つの引数が与えられ、それが配列の場合、その配列からランダムな要素を返します。
2つの引数が与えられた場合、第1引数から第2引数まで（ただし含まない）の乱数を返します。
（DeepL翻訳）
いろいろとルールがありますね。
まず返るのは浮動小数点なので、ランダムな整数を扱いたい場合はint()を併用します。
また注意すべき点としては数値を指定した場合、その数値は含まれないこと。
昨日書いた記事、p5.jsの関数まとめ part.5 constrain()で
const count = random(0, constrain(frameCount, 0, 500))
というコードを書きました。
差し込んだ画像をみてもらうと分かるのですが、最大が499です。
私はこれをみて「500おしい〜」とか思っていたのですがそうではありませんでした。
random()が返す数値に500は含まれていなかったのです。
Type
数値を渡す場合のTypeはこちら
random(min?: number, max?: number): number;
引数
- min はじまりの数値
- max 返る乱数の最大範囲（maxの数値は返らない）
- 0から始める場合、引数は一つで良い
そして引数に配列を渡す場合がこちら
random(choices: any[]): any;
any[]なのか。
例えば[1, 'hoge', 2, 'huga']みたいなのはどうなるんでしょうか。
function draw() {
const ary = [1, 'hoge', 2, 'huga']
console.log(random(ary))
}
=>
1
2
huga
2
hoge
1
2
2
うん、ちゃんと全部返してくれる。
どんな時に使えそうか
もはやどんな時にだって使えるのがこの関数！だと思っています。
ちゃちゃっとこんな感じのコードを書いてみました。
function setup() {
createCanvas(600, 600);
frameRate(10)
noStroke()
}
function draw() {
background(0)
const x = random(-200, 200)
const y = random(-200, 200)
let fillColor = x > 150 ? 'red' : 'blue'
fill(fillColor)
for(let val=0; val < 100; val++) {
rect(300, 300, x, y)
}
}
幅が(300, 300)の位置から200以上伸びた時だけ赤、それ以外は青色の矩形を1秒間に10種類、次々と表示します。
randomを使うことによって簡単に表現の幅を持たせることができるし、使っていれば予期しない描写に出会えること間違いなしです。
randomSeed()
上記、random()のシード値を設定するものです。
リファレンスより
random()のシード値を設定します。
デフォルトでは、random()はプログラムを実行するたびに異なる結果を返します。ソフトウェアを実行するたびに同じ擬似乱数を返すには、seedパラメータを定数に設定します。（DeepL翻訳）
よくシード値ってきくけど説明できないなと思ったので調べました。
こちらの記事より
コンピュータで乱数を生成する場合、ある数値をシード値（seed：種）として用い、その値を基にして特定の演算により乱数を生成していく。このため同じシード値を使用した場合、発生する乱数はまったく同じものとなる。
理解しました。
ちなみに私にとって一番身近なシード値はrspecでテストを回すときのシード値です。
Type
randomSeed(seed: number): void;
引数
- seed シード値となる整数
どんな時に使えそうか
背景などの固定したいものを描画したい時に使えそう。
random()はシード値を指定しないと毎回バラバラな乱数を生成するため、randomかつ固定したい時はシード値を設定する。
またrandom()を使用する場合は動作の検証にも使えそうです。
参考
p5.js reference | constrain()
『Generative Design with p5.js』P_1_2_3_01