こんにちは。櫻井です。
GSAPのrandomってJSのrandomと何が違うんだろうと思い少し調べてみました。
GSAPのrandom
まずはそれぞれGSAPのドキュメントとMDNの説明を見ていこうと思います。
GSAPの場合はいくつか機能があり、引数を含めることができます。
一つ目が最小値と最大値を指定する使い方です。
random(minimum, maximum[, snapIncrement, returnFunction])
minimum – 最小値を指定
maximum- 最大値を指定
二つ目が最小値と最大値、そして倍数を指定して値を丸める使い方です。
random(minimum, maximum[, snapIncrement, returnFunction])
minimum – 最小値を指定
maximum- 最大値を指定
snapIncrement – 倍数を指定
returnFunction – trueにすると関数として呼び出せるようになる
三つ目が配列を引数に入れて配列内の値をランダムに表示させる使い方です。
random(array[, returnFunction])
array – ランダムに選択する値の配列が入る
returnFunction – trueにすると関数として呼び出せるようになる
randomにこれだけ色んな機能詰まってるのすごいですね。
JSのrandom
JSのrandomはGSAPと比べるとかなりシンプルです。0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返します。
GSAPもJSでできているし、きっとJSのrandomはしようしています。
せっかくなのでJSでGSAPの機能をそれぞれ実装しつつ比べてみます。
範囲を指定してランダムな数値を返す
See the Pen range_specified by knap_develp (@knap_develp) on CodePen.
この辺はまだJSのままでもシンプルですね。
ここで初めて気づきましたがGSAPは少し数値丸めているんですね。
範囲を指定してスナップさせる
See the Pen random_multiple by knap_develp (@knap_develp) on CodePen.
範囲を指定するだけに比べてちょっと複雑になりましたが範囲の値をスナップさせる値で割って四捨五入して今度はスナップさせる値を掛けてるだけです。
配列からランダムに選ぶ
See the Pen array_random by knap_develp (@knap_develp) on CodePen.
配列からランダムに選ぶには前章の「範囲を指定してスナップさせる」で作った関数を使って最小値を0、最大値を配列の数から1引いた数にしてスナップさせる数値を1にすればできました。
少し複雑になりましたがなんとか全ての機能ができました。
これを一つの関数でできるようにするってGSAPすごいな！
