セーターの編み目や質感がとてもリアルに再現された Christmas Experience! Ugly sweater generator がおもしろい!
リアリティだけでなく遊び心にも溢れた楽しいコンテンツ
今回ご紹介するのは、バルセロナを拠点に活動しているデジタル・デザインスタジオ CocoBongo 提供のクリスマスにちなんだコンテンツです。
オリジナルのメッセージ(テキスト)を添えて、自由に柄やレイアウトをカスタマイズしたセーター生地の GIF が生成できるジェネレーターとなっていて、その模様のバリエーションなども含めてとてもおもしろい内容になっています。
とても遊び心溢れる、楽しいサイトです。
ふたつのモードで明暗が分かれる
今回のサイトは、WebGL を使っていますがバリバリの 3D コンテンツ的な内容のものではありません。
ページを開いた直後のローディング中のアイコンからも、既にセーター生地を連想させるような雰囲気が漂ってきます。
ページのロードが完了したあと表示されるトップページからは、ふたつのモードを選択することができます。
ここでどちらのモードを選択したかによって、最終的にどのようなセーター柄になるのか、だいぶ印象が違ったものになります。
上の画像を見ると、画面の下のところにふたつの異なる表情をしたサンタクロースのボタンがあるのがわかると思います。
左側は、いわゆる普通の「楽しいクリスマス」の雰囲気ですが、右側のほうはもう最初に表示される柄を見てもいろいろヤバイですね(笑)
とても遊び心に富んだ、面白いコンセプトだと思います。
そして、どちらのモードを選んだ場合でも、次のシーンに進むとなんとオリジナルのメッセージを入力することができるのですが……
はい、ご覧の通り、入力欄がそのままセーターの生地のような見た目のまま登場します。
入力中の文字も、編み目のような見た目のまま表示されるので、とてもリアルな質感です。
その他にも、セーターの上に描かれる模様を様々なパターンに変更したり、あるいは使われている毛糸の色を変更したりといったことが行えるようになっていて、そのパターンはかなり多彩です。
これはすごい……
技術的なところを少しだけ解説すると、縫い目のひとつひとつは、よく観察すると V の文字のような形をしていますよね。これを、WebGL で敷き詰めるようにレンダリングしつつ、ノイズを使って色を微妙に揺らがせているのだと思います。
画像のようなビットマップデータがあれば、それを縫い目のひとつひとつに割り当てるだけで確かにこのような描画結果は得られるのですが、それでもこれだけ高い質感を再現しているのは、本当にすごいです。
雰囲気の異なるふたつのモードのメリハリも面白いですし、とても楽しいコンテンツになっていると思います。
ぜひチェックしてみてください。