気持ちのいい動き

インタラクションの時に気持ちのいい動きをしているアプリって、使っていて気持ちがいい。そのアニメーション冗長だーとかは脇に置いておく。

気持ちのいい動きをコードで表現する知識（ノウハウ的な）って全然ないなぁ。と思っていた時にある１つのワードに出会った。

「コクのある乱数」乱数にコクを出す方法について-togetter-

・・・・？

昨年(2016)末に話題になっていた。巷ではインタラクティブ・コーディング勉強会なるものも開催されているらしい。全然知らない世界。。。その内容（レジュメ）が公開されていたので、今回は自分なりに解釈しながら実際にやってみる。

参考にさせていただいたサイト

• インタラクティブ・プログラミング勉強会 第1回 乱数 -fladdict-

ありがとうございます。

”コクのある乱数”がキモらしい

気持ちのいい動きには乱数が欠かせない。さらに言うとコクのある乱数が。

自分も何度かJavaScriptのMath.random()などを使ってランダムな値を作った経験がある。何度かだけだ。乱数を常日頃から使うイメージがないので、どんな時に使うのか少しわからなかった。

1. 初期値をばらけさせる
2. 一定確率で挙動を変える
3. 自然をシミュレートする

などのケースで使われるようだ。

コク=正規分布=自然

乱数にも種類がある。（この表現はあまり正しくないかも）

1. Math.random()
2. (Math.random() + Math.random() + Math.random() + Math.random() + Math.random()) / 5

1は均一な乱数（＝本当のランダム）。コクのある乱数と呼ばれるものが2の乱数である。2は中央の値に確率が偏った乱数だ。2から得られる確率分布は正規分布に対応する。

 

正規分布は自然の中で見られる確率で、

• 雨粒の大きさ
• 人間の身長

などなど、身の回の自然現象は正規分布に近い確率で起こっている。なので、2の乱数を使うことでコクのある（＝自然な）動きであったり変化を作ることができる。

コクのある乱数を実際に使ってみる

p5.jsのリファレンスを見ながら、今回は2つにチャレンジしてみる。

1. ランダムに震える物体
2. ランダムに移動する物体（ランダムウォーク）

ランダムに震える物体

rotate()関数に渡す値を乱数を使って変化させてみた。

まずは通常のrandom()を使う。

ふむ。普通にカクカクブルブルしている。次にコクのある乱数を使用してみる。

マイルドな動きになった。2つを並べてみる。

 

ソースコード

ランダムに移動する物体（ランダムウォーク）

コクのある乱数を移動の方向と速度に対して適用して、ランダムに動きが変わるようにしてみた。

これもrandom()と比較してみる。

どちらもランダムな動きをしているが、コクのある乱数を使用した方が動きに生物めいたものがある気がする。

ソースコード

まとめ

コクとは「自然な」という意味。人間は本当のランダムに違和感を感じるもの。自分の中ですごい面白い気づきでした。気持ちの良さや楽しさが大切になってくる際に使ったりできそう。また、アニメーション用のコードっていつも書くコードのタイプと違って色々と勉強になった。

JSFiddleに今回の２つのソースコードが置いてあり、動いています。興味のある方はいじってみてください。（もし、「ここをこうしたら….」などありましたら是非！！）

ランダムに震える-JSFiddle-

ランダムに移動する-JSFiddle-

それではまた来月に！（今年も1/6が終わろうとしている。。。）

参考URL

• 乱数にコクを出す方法について-togetter-
• インタラクティブ・プログラミング勉強会 第1回 乱数 -fladdict-