刻一刻と変化する色彩とアニメーションが美しい WebGL デモ! その名も Audiograph
シンプルでしかしそれが美しい
今回ご紹介するのは、音をテーマにした WebGL デモ作品です。
テーマは確かに音なのだろうと思うのですが、ちょっと見た感じだとサウンドビジュアライザというわけでもなさそうです。しかしその押し寄せるような多彩な色とアニメーションは見るものを惹きつける確かな魅力があるように思います。
シンプルで幾何学的な図形だけを使い、マウスインタラクションすら備えていない作品ですが、とても不思議な世界観が見事に表現されています。
スペースキーを使った画面遷移が面白い
こちらのサイトはまず最初に訪れたときはモノクロのシーンからスタートします。
ノイズに混じってかすかに飛び交うポリゴンが見えるような感じですが、画面の案内にあるとおり、スペースキーを押すことでシーンが一変する仕掛けになっています。
画面上にはスペースキーをホールドするように促す文言が出ていますが、実際には長押ししなくてもスペースキーに反応してシーンが変化します。
ひとたびシーンが切り替わると、白く味気ない印象だった最初のシーンとは打って変わって、非常にビビットな色遣いのシーンへと変化します。
同時に曲の再生もスタートし、あとは勝手に画面がどんどん切り替わっていきます。
ランダムで色を変化させているのだとは思いますが、どの組み合わせも不思議と不快な感じがしない色の組み合わせになっていますね。
なにかのアルゴリズムを使っているのだろうか……
シーンをよく観察していると、ライン、矩形、そして波打つ曲線のモデルなど、非常にたくさんのオブジェクトが同時に描画されているのがわかります。
また微妙に影なども落ちるようになっており、不思議な立体感というか、奥行きを感じる出来栄えになっています。
先にも書いたとおり、マウスで操作したりすることは一切できず、スペースキーのみがシーンに影響を与えます。非常にシンプルなのに、とても多彩な表情を持っているデモですね。
WebGL で作品を作ってみたい、と思っていても、なかなかどう作品にしたらいいのかがわからないということは多いと思います。
しかし、今回のデモなんかもそうですが、非常にシンプルで基本的な技術を組み合わせるだけでも、見せ方ひとつで作品は劇的に雰囲気を変えますね。
今回の作品は three.js などを使わなくても比較的簡単に実現できるテクニックを中心にした作品ですが、そのセンスや配色の美しさなど、光るものを持っていると思います。
ぜひ参考にしてみてください。