WebAudio を活用したサウンド効果もとても面白い！ ハイセンスなクリスマスコンテンツ！
ハイエンドではなくハイセンス！
今回ご紹介するのは、今年のクリスマス用に作られたデモ作品のひとつで、XORXOR というクリエイターチームが作り上げた一作です。
彼らの作品はいずれも小規模なデモとして、主にスケッチという形でこれまでにも多く公開されていたのですが、今回の作品はあまりにも驚きが大きかったので、この年の瀬にご紹介してみようと思いました。
彼らのウェブサイト上からは、それらの作品たちのほか、彼らが手がけてきたオフラインのイベントの様子なども見ることができます。
クリエイティビティに特化した、素晴らしいチームだということがウェブサイトからも伝わってきます。
このサウンド効果には驚きの一言
今回の作品は、ビジュアルだけでなく同時に行われるサウンド関連の処理が非常に面白いですね。
3DCG として描かれるビジュアル部分と、再生されているサウンドが連動することによって描かれる世界観は、なかなか真似のできない、彼らだからこそというオリジナリティを感じさせてくれます。
サイトに訪れると画面に一度クリックの操作を行う必要があるのですが、ひとたび画面をクリックすると、ハイテンポな BGM と共にデモがスタートします。
画像だと縮小してしまっているのでちょっとわかりにくいかと思いますが、画面全体に雪を模した大量のパーティクルが舞っています。
パーティクルは言ってい方向に流れるように、あるいは吹き飛ばされるかのような感じで動いているのですが、そこにひとりのランナーが登場してきます。
かれは全身シマシマ模様で、まるで床がそこにあるかのように、下のほうにも反転した姿が映り込んでいるのがわかりますね。
そして、このランナーが出ている状態では、画面内でマウスのボタンが押されている間だけ、時間の進み方がゆっくりになっていきます。つまりホールドすればするほど、時間がゆっくりになっていく感じです。
このとき、レンダリング結果はどんどんスローモーションになっていくのですが、驚くべきはそのときの BGM です。なんと BGM のほうも連動するようにゆっくりになっていくんです！
これがなんともすごいです。
またスローモーションになっている間は、ランナーさんの体にも変化が現れます。
体の表面を覆っていたシマシマ模様が徐々に溶けるようにして消えてき、なんと内側から青いクリスタルでできたような姿が浮き出してくるんですね。
ランナーの姿が変化しながら、時間がどんどんスローになっていくその様子は、今まで見たこともないような不思議な感覚を見ている人に与えてくれます。
WebAudio と WebGL という、ブラウザ上で動くスクリプトで作られているからこその驚きのインタラクションが本当に素晴らしいですね。
ちなみにホールドし続けて完全にランナーさんの姿が変わるとロゴが出てきます。
ロゴが表示される上の画像の状態は、完全に時間が止まるまでマウスボタンをホールドし続けたときのもの。
ここで、なんと BGM がクリスマスらしいものに自動的に切り替わります。クリスマス用のデモとして作られたものらしく、きちんとそれにまつわる仕込みもされています。
またこのデモは実際にその動作を見て、聞いて、感じてもらわないとうまく伝わらないかと思うのですが、音楽のテンポが通常のスピードからゆっくりになっていくとき、そしてそれがもとに戻っていこうとするときの、どこかアナログな感じの周波数の変化を聴覚から感じ取れるかと思います。
このテープレコーダーがぶっ壊れてしまったみたいな感じ……
すごくいいです……
XORXOR は少人数のデベロッパチームだと思うのですが、彼らの作品はいずれも印象的なものばかりで、見ているだけでもかなり刺激になります。
たぶん、クリエイティブコーディングとかが好きなひとには、たまらないんじゃないかな？
私はあまりデザインとかできないですし、センスも無いに等しいのですが、彼らのような高いセンスが生み出す作品の素晴らしさは、ウェブサイトや Twitter アカウント越しに感じることができます。
今回の作品以外のものは、CodePen などで公開されているものもあります。
ぜひその作品をチェックして、参考にしてみてください。
