一見すると地味だけど…… たくさんのイラストとそのストローク情報を使った edding Wall of Fame がすごい
思わずヤバすぎと呟いた
今回ご紹介するのは、edding というマーカー(文房具)を扱っているメーカーのウェブサイトです。日本でも一応代理店みたいなのがあって同社の販売している製品を購入することはできるようですが、海外の、主にマーカーを扱っている文房具メーカーですね。
最初にこのサイトを見つけたとき、いわゆる一般公募かなにかで集めた、同社の製品を使ったイラスト(静止画)をシンプルに掲載しているだけなのかなとおもったのですが……
実際に蓋を開けてみたらとんでもないコンテンツでした。
リンク:
ストロークの再生は見ていて本当に楽しい
今回のサイトは、文房具メーカーのサイトであり、また同社の主力製品がマーカーということもあって、それをイメージさせるようなトップページからまずは始まります。
このトップページ部分では、イラストの欠けている部分をマーカーが自動的に動いて補完していくようなアニメーションが再生されます。
このアニメーションもかなり控えめな感じで、まったく派手な感じはありません。どちらかというと、この時点での印象はむしろ地味にさえ感じます。
Accept のボタンを押すと、本編へと進みます。
このサイトの企画名である Wall of Fame がどういうプロジェクトなのか詳細はちょっとわからないのですが、同社のマーカーで描かれたと思われるたくさんのイラストが登場します。
企画名にもあるとおり、壁にイラストや文字が描かれたようなテイストになっていて、3D 的に壁が配置されています。
壁に投影されるイラストはその都度読み込まれるようになっているため、最初は一瞬だけ真っ白な壁が表示されてしまいます。このあたり読み込みにラグがあるようで体験を損ねている感じがするため、もう少し改善してもよかったのではないかと最初は思ったのですが……
よくよくサイト内をくまなく見ていくと、あまりにも用意されているイラストの点数が多いため、おそらくまとめてロードすることが難しいのだと思います。
そして個人的にものすごく驚いたのが、これらのイラスト、なんとすべてのストロークが記録されています。
イラストが完成していくまでの、そのすべてのストロークを最初から最後まで再生することができるようになっているんですよね。これが本当にすごい……
対象のイラストをクリックして選択した状態にし、カーソル付近に表示されている再生アイコンを押して再生メニューを出すと、そこからストロークが重ねられていく様子を見ることができます。
実際にマーカーが動いた軌跡がすべて記録されていて本当にすごいですねこれ……
ストロークの再現スピードを変えるなどの細かい調整も、右下のメニュー部分から操作可能。
裏は取っていないので推測ですが、これウェブサイトかなにかで一般のユーザーが自由にイラストを描いていいよという体裁になっていたとか…… そういうやつなんですかね?
ウェブアプリなら、ストロークを記録することももちろん可能だったと思いますが、それにしてもこれだけの大量のデータを溜め込んだこともすごいですし、それがこうして一堂に会しているというのも本当にすごいです。
イラストは素人っぽいものから絵心のある人が描いたっぽいものまで様々で、それらがガリガリと描かれていくその過程を数倍速の再生速度で眺められるというのは本当にめちゃくちゃ楽しいですね。
WebGL の使われ方としても結構珍しいケースで、すごく面白いです。
ぜひチェックしてみてください。