オリジナル Blob を作ってシェアすることも可能！ 14islands が公開している技術デモ Blobmixer がすごい

doxas : 2021-04-08 13:38:18

まるでマテリアルと形状の展覧会

今回ご紹介するのは、スウェーデンの制作会社 14islands が公開している Blobmixer です。

プログラミングの文脈、特に JavaScript の世界では Blob というとバイナリデータを表すオブジェクトのことですが、英語での Blob には他にもいくつか意味があり、柔らかな半固体状の塊、といったニュアンスでも使われる単語ですね。

今回のサイトでは、まさにそんな Blob がたくさん用意されており、それらを鑑賞することはもちろんオリジナルの設定を加えたバージョンを作ることもできるようになっています。

プリセットで用意されているものを見ているだけでもめちゃくちゃ楽しめます。

今回のサイトでは、ロードが完了するとまず最初にこの記事のトップ画像にあるようなカラフルな Blob が登場します。

Blob の手前にはやや大きめのフォントで、その Blob に付けられているタイトルが表示されるようになっており、たとえばデフォルトで表示されるカラフルな Blob には Discobrain という名前がつけられていますね。

Disco カラーの脳（のような形状）ということなんでしょうが、なんともセンスのあるネーミングですね……

スクロール操作を加えることで、画面は横方向にスライドスクロールします。

このとき、描画される Blob のタイトルがねじれるように変形したり……

CG の部分も、形状や色が全く別の質感へとなめらかに変化したりするんですが、すごく心地よいトランジションに仕上がっています。

3D シーンとして描かれるグラフィックスのトランジションと、DOM 側で行われる CSS によるトランジションとが、見事に連動して動いていますね。

プリセットととして豊富なパターンがあらかじめ用意されており、それぞれに何かしらのタイトルが付いています。

金属のような質感、水のような質感、さらには蝶をイメージしたものなど、単なる質感だけでなく Blob 全体の印象に対してタイトルが付けられているものもありますね。

また、画面の下に用意されている Mixer と書かれた大きめの矢印アイコンをクリックすると、オリジナルの Blob をデザインすることができるミキサーモードに移行します。

操作できるパラメータの量が多く、また設定可能な値の上限下限もかなり幅広く設定されているので、いろいろな表現を模索することができますね。

今回のサイトのミキサー実装、操作できるパラメータの数が多くて本当にすごいのですが……

実は個人的に一番感心したのは、そのパラメータを変化させた際の「変化量に対するトランジション効果」です。なにかしらの値を、たとえば 1 から 10 に変化させた際に、その変化が一瞬にして画面に反映されるのではなく、徐々になめらかに状態が変化していくんですよね。（もちろんパラメータの種類によります）

また、ミキサー上ではポストプロセスを有効化させ、グリッチエフェクトが掛かるようにすることができたりと、本当にいろんな意味でビジュアルに干渉することができます。