このたびは、私たちツクロアに興味を持っていただきありがとうございます。
当サイトでは、ユーザーの同意を得た場合に限り、当サイトの訪問・離脱、訪問中の行動に関する統計情報の分析のため、Cookieを使用します。
詳しくはプライバシーポリシーを参照ください。
インタラクションの時に気持ちのいい動きをしているアプリって、使っていて気持ちがいい。そのアニメーション冗長だーとかは脇に置いておく。
気持ちのいい動きをコードで表現する知識(ノウハウ的な)って全然ないなぁ。と思っていた時にある1つのワードに出会った。
「コクのある乱数」乱数にコクを出す方法について-togetter-
・・・・?
昨年(2016)末に話題になっていた。巷ではインタラクティブ・コーディング勉強会なるものも開催されているらしい。全然知らない世界。。。その内容(レジュメ)が公開されていたので、今回は自分なりに解釈しながら実際にやってみる。
ありがとうございます。
気持ちのいい動きには乱数が欠かせない。さらに言うとコクのある乱数が。
自分も何度かJavaScriptのMath.random()などを使ってランダムな値を作った経験がある。何度かだけだ。乱数を常日頃から使うイメージがないので、どんな時に使うのか少しわからなかった。
などのケースで使われるようだ。
乱数にも種類がある。(この表現はあまり正しくないかも)
1は均一な乱数(=本当のランダム)。コクのある乱数と呼ばれるものが2の乱数である。2は中央の値に確率が偏った乱数だ。2から得られる確率分布は正規分布に対応する。
正規分布は自然の中で見られる確率で、
などなど、身の回の自然現象は正規分布に近い確率で起こっている。なので、2の乱数を使うことでコクのある(=自然な)動きであったり変化を作ることができる。
p5.jsのリファレンスを見ながら、今回は2つにチャレンジしてみる。
rotate()関数に渡す値を乱数を使って変化させてみた。
まずは通常のrandom()を使う。
ふむ。普通にカクカクブルブルしている。次にコクのある乱数を使用してみる。
マイルドな動きになった。2つを並べてみる。
コクのある乱数を移動の方向と速度に対して適用して、ランダムに動きが変わるようにしてみた。
これもrandom()と比較してみる。
どちらもランダムな動きをしているが、コクのある乱数を使用した方が動きに生物めいたものがある気がする。
コクとは「自然な」という意味。人間は本当のランダムに違和感を感じるもの。自分の中ですごい面白い気づきでした。気持ちの良さや楽しさが大切になってくる際に使ったりできそう。また、アニメーション用のコードっていつも書くコードのタイプと違って色々と勉強になった。
JSFiddleに今回の2つのソースコードが置いてあり、動いています。興味のある方はいじってみてください。(もし、「ここをこうしたら….」などありましたら是非!!)
それではまた来月に!(今年も1/6が終わろうとしている。。。)