Animated SIRDS

canvasに対応していません。

■目の幅 (赤い基準点の幅)
狭い 標準 広い すごく広い

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

■アニメーション


■高さ計算式


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

説明

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

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

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


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

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

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

■高さ計算式
 浮き出る模様の高さ(形状)を求める式をJavaScriptで埋め込めるようにしてみました。

  x .. -1.0から1.0が入ってくる
  y .. -1.0から1.0が入ってくる
  ms_acc .. ページを開いてからの経過時間(ミリ秒) アニメーションOFFの時は0固定
 ・output
  out .. 浮き上がらせたい量 0.0~1.0の間で返すように調整してください

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


いろいろと見苦しいところだらけですが、
感想など、もしあればtwitterかメールにいただけると嬉しいです!

トップページへ戻る


Follow @yunta_robo