プログラムでアニメーションを作る【基礎編ランダム】 #JavaScript

ちょっとしたスケッチなどで何か動くものを作りたいと思った時、ランダムを利用することが多いと思います。
ブラウン運動と呼ばれることもあるようです。

例えばこんな感じのもの。

これはランダムにポジションを設定してラインを描画していますね。

ランダムにxとy座標を生成し、オブジェクトを動かすコードは大体こんな感じでしょうか

var vx = Math.random(-1, 1); // -1 ~ 1 
var vy = Math.random(-1, 1); // -1 ~ 1

obj.x += vx;
obj.y += vy;

確かにこれでランダムに動きます。
しかし先ほどの動画をみると、動きはかなり固い感じがしますね。これはvx、vyの値に連続性がないのが問題です。
もっとなめらかに動くものは作れないのか？
そこでよく利用されているのがnoise(Perlin noise)です。

パーリンノイズ（英: Perlin noise）とは、コンピュータグラフィックスのリアリティを増すために使われるテクスチャ作成技法。

もともとはテクスチャの作成方法の一つでしたが、これをモーションに利用できます。

パーリンノイズを使うと、下記のようなテクスチャ画像が作れます。

これ、よく見るとうねうねしるところと、黒いところありますね。黒以外の箇所は、白からグレーに微妙に明度が変化してますよね。

この微妙に変化しているが重要です。これは緩やかに変化しているのです、つまり連続性があるのです。
確信に近づいていますね。

これをアニメーションに利用するにはどうするのか？やり方はいろいろあります。

今回は上の画像を利用してみます。(これから紹介するコードは完全にダミーですのでご注意ください。)
画像の適当な1pxを選択し、そこから色情報を抜き取ります。
例えばこんな感じ(あくまでもサンプルです)

// サンプルです。
var color = noise(100, 100, 100);
var r = (color >> 16) & 0xff;
var g = (color >> 8) & 0xff;
var b = color & 0xff;

ピンときた人がいるかもしれませんが、このr、g、bを下記のように置き換えたら

// サンプルです。
var color = noise(100, 100, 100);
var vx = (color >> 16) & 0xff;
var vy = (color >> 8) & 0xff;
var vz = color & 0xff;

これは！！そしれこれをこんな感じにすると

// サンプルです。
obj.x += vx;
obj.y += vy;
obj.z += vz

動きを作ることができました！気がついたら3次元のランダムモーションができていました。2次元にするなら、単純にzの値を使用しなければOKです。
objが移動させた場所の1pxを取得し、同じ処理を実行します。
テクスチャマップは緩やかに色が変化しているので、モーションは有機的になります。

こんな感じ

ノイズを使うだけで、Web上でよく見られる有機的な動きを自分で作ることができます。
実際に動くサンプルがあったほうがよいので、後日追記します。おまちください...

動くものをつくるのは楽しいですね。

Advent Calenderは今日で終わりですが、継続して投稿できるように頑張ります！

プログラムでアニメーションを作る【基礎編 ランダム】