カメラやマイクからの入力にも反応する三次元ノイズを利用したサウンドビジュアライザがすごい!
ノイズやパーティクルの使い方が見事
今回ご紹介するのは、いわゆる WebGL 製のサウンドビジュアライザ実装のひとつです。
本作の特徴はなんといっても 3D のノイズを利用することで、とても特徴のある表現を行っていること、そしてパーティクルを上手に利用してサウンドデータの可視化を行っていることでしょう。
WebGL 製のサウンドビジュアライザはこれまでにもたくさんありましたが、個人的な感想になってしまい恐縮ながら、今作はかなり上位に位置すると言ってもいいのではないでしょうか。
外部デバイスからの入力も利用
今回のサウンドビジュアライザは、絶えず波打つように動き続けるオブジェクトと、その周囲を漂うパーティクルによってサウンドの可視化が行われます。
そして、サウンドデータには基本的には SoundCloud API を利用して取得した楽曲データが使われるのですが、それ以外の入力として、カメラによって撮影された映像データ、そしてマイクによって収集された音声データを用います。
外部入力からのデータをそのままサウンドビジュアライザとして表現するというのは、実はそれほど珍しい実装ではありません。そういった実装はこれまでにも多くありました。しかし、外部入力のうちマイクだけではなく「カメラからの映像」をサウンドビジュアライザに組み込んでいるという例は少ないですね。
差し支えなければ、ぜひ許可してからデモを実行することをお勧めします。
音声データをマイクから入力したレスポンスは、だいたい想像どおりというか、そのまま音声の大きさがサウンドビジュアライザに反映されます。これは、普通ですね。
それでは外部入力として、カメラから送られてきたデータはいったいなにに使われるのでしょうか。
実は、カメラの前で激しく手を振るなどの動きをするとわかりやすいのですが、前のフレームとの変化量(差分)を係数化して、それを元にパーティクルの動きに反映させているようですね。これは珍しい実装だなと思います。
画面の右上の方に、SoundCloud から取得している楽曲の情報が表示されています。この部分には再生ボタンと、一時停止ボタンがあります。
楽曲が再生されていると、当然ながらサウンドビジュアライザが音に反応して激しく動き続けているので、マイクや、カメラから、どのような影響があったのかわかりにくいです。
一時停止ボタンを押して BGM を止めてみると、マイクからは音声を、そしてカメラからは映像を取得してシーンに影響が出ていることがわかりやすくなると思います。
表示されるオブジェクトも、ノイズを上手に使って波打つような独特な動きをしており、かなり見た目はカッコイイですね。
微妙に光っているかのような、独特な加算合成による色表現が見事に栄えていると思います。ちょっと静止画ではわかりにくいと思いますが、動きも非常に滑らかなので、ぜひ実際に動作するものをご覧になってみてください。
WebRTC を利用して外部入力を使っているだけでなく、非常に軽快に動く見事な表現も見どころです。ぜひチェックしてみてください。