残像のような効果と流れるインクのような効果で初めての視覚体験を生み出した Resn のデモサイトが面白い
実験作としてのチューリップ
今回ご紹介するのは Resn が公開している実験作品です。
Resn は当サイトでそのオフィシャルサイトを紹介したこともあるデジタルエージェンシーで、WebGL の事例も豊富に実績があります。
今回のサイトはドメインから見ても実験作という感じのものだと思うのですが、非常によくできていて視覚体験としてとても有意義だと感じます。
リンク：
じっくり触ってみよう
今回のサイトは実験作的な立ち位置のものだと思うので、特に広告や販促・プロモーションがあるわけではありません。
サイトのロードが終わるとまず最初に表示されるシーンがほぼ全てで、言ってしまえばそれだけのサイトなのですがすごく面白い体験ができるようになっています。
カーソルを動かすと、それに応じてチューリップが動きます。
この上のスクリーンショットを見ると、背景の部分に残像のような模様ができているのがわかると思います。
今回のサイトのチューリップは、カーソルの位置に応じて左右に揺れるように動くのですが、このときカーソルのボタンが押されている（クリックしたままになっている）と、このような残像が同時に発生するようになっています。
この残像部分、毎フレームのチューリップの姿が焼き込まれたような感じなのですが、流体のエフェクトが適用されていてインクが流れるようにして残像がゆったり動きます。
また、今回のサイトのチューリップはカーソルの「スクリーン上の縦方向における位置」によって、揺れ方が変わります。
より具体的には、カーソルが画面の上のほうにあるときはチューリップも上のほう、つまり先端部分しか反応しません。
反対に、カーソルが画面の下のほうにあるときには根本から大きく傾くように揺れるんですよね。
こういった部分って本当に些細なことなんですが、インタラクションの感じ方にいろんな意味で寄与していると思います。
CG の文脈では、モーションブラーみたいなことをやりたいときに毎フレームのレンダリング結果を背景に半透明化しながら残す、みたいなことをすることがあります。
今回のサイトの場合も根本にあるアイデアはそれと同じなのですが、そこに流体エフェクトが組み合わされているのが面白いですね。
あまり粘度の低いサラサラした感じの流体ではなく、インクのような、少し粘性の高い感じに味付けされているのがまたいいかんじです。
ぜひチェックしてみてください。
