Animated SIRDS

canvasに対応していません。

■目の幅　（赤い基準点の幅）
狭い 標準 広い すごく広い

■ドットの密度
低い 標準 高い すごく高い

■アニメーション


■高さ計算式
var dd = x * x + y * y; out = (Math.sin(ms_acc*0.005 + dd*2.0) + 1.0) * 0.5;

■高さ計算式の可視化　（あまり厳密ではないので、参考までに）

説明

これの静止画バージョンはみなさん一度はやったことがあるかと思います。
シングルイメージランダムドットステレオグラムとか呼ばれるものなのですが、
歴史を調べてみると、発明の経緯や、認知学に与えた影響などかなり興味深いです。
それはさておき……

アニメーションさせても立体の認知が連続するのかなぁと思い、つたないWebGLで作ってみました。

画面に顔を近づけて、遠くを見るイメージで赤い２点が３点に見えるように調整してください。
何か模様が浮き出てきますので、画面から顔を遠ざけていきます。
だんだんとピントがあって、クリアに模様が見えるようになってくるはずです。


■目の幅
　狭いほど易しく、広いほど難しくなります。
　赤い２点が実際の両目の幅を超えると、どんなに頑張っても常人には不可能です。

■ドットの密度
　密度が高いほど、模様の詳細がくっきりでますが、処理速度が犠牲になります。

■アニメーション
　アニメーションのON/OFFを切り替えます。

■高さ計算式
　浮き出る模様の高さ（形状）を求める式をJavaScriptで埋め込めるようにしてみました。
　・input
　　x .. -1.0から1.0が入ってくる
　　y .. -1.0から1.0が入ってくる
　　ms_acc .. ページを開いてからの経過時間（ミリ秒）　アニメーションOFFの時は0固定
　・output
　　out .. 浮き上がらせたい量　0.0～1.0の間で返すように調整してください

■高さ計算式の可視化
　このチェックを付けて計算式をいじると直感的かもしれません。