マイクからの音声入力と連携して動作するオーディオビジュアライザ！ Beat Painter！
周囲の音を取得して可視化するペイントアプリケーション
今回ご紹介するのは、WebGL の高速な描画処理を利用して、マイクから入力された音声データをもとに派手なペイント処理が行えるオンラインアプリケーションです。
ユーザーがマウスでスラスラとペイントするのではなく、あくまでも音声データのみを元にレンダリングが行われる点がユニークな作品だと思います。
必然、実行するにはマイクデバイスを備えた端末が必要です。ラップトップとかだと、組み込みのマイクがあったりするので実行しやすいかもしれません。
まずはマイクへのアクセスを許可！ あとは放置！
今回の作品は、他の WebGL 作品とは異なり、ユーザーがマウス操作などで干渉することは基本的にできません。
あくまでも、マイクから収集された音声データのみに反応するようになっています。
ウェブページを開くとマイクデバイスへのアクセス許可を求められるので、これをまずは許可してやる必要があります。端末情報等は外部サーバ等には一切キャッシュされず、どこにも収集されないとのことですので、安心して許可してやりましょう。
コンクリートの壁のような模様は、ウェブサイトの背景に最初からある模様ですが、その上になんだか小さなインクの飛沫みたいなものが見えると思います。
これが、マイクへのアクセスを許可した直後、数秒ほど放置していた状態です。
私自身が何の声も発していなくても、自然と集音されるノイズだけで、こんなふうに細かい模様がついていきます。これはマイクの性能によっては、もっと反応が鈍くなったり、あるいは集音効果に優れるものであれば、もっと顕著に効果が出るかもしれません。
実際、マイクのそばで手を叩いたり、なにかを話をして声を発したりすると、次々と賑やかなペインティングが自動的に行われていきます。
このアプリケーションは、最初にも書いたようにマウス等でのインタラクションは一切ありません。
ただ、画面の下の方にあるメニューからは、ペイントされる際のパラメータを変更することができるようになっていて、それでちょっと違った表情のペイント結果になるように調整することができます。
ブラシのサイズや、使われる色の種類、あるいはストロークの長さなどを任意に指定することができるようになっています。
色数を少なくしてやると、一番少ない状態だと白黒の二色のみになりますが、これはこれでなんとなく味わいが異なっており面白いですね。
サイト内には「Artists」と書かれたリンク文字があって、ここをクリックするとリストが出てきます。たぶん、今後さらに開発が進んでいくと、ストロークパターンが異なる別のアルゴリズムがここに加えられていくのだと思います。
この記事の執筆時は、デフォルトで使われているアルゴリズム以外が選択できない状態ですが、これは今後が楽しみですね。
今回のサイトのように、音楽や音声を可視化するアプリケーションでも、やはり描画に関する負荷が大きくなると CSS や Canvas2D では若干荷が重くなります。
その点、今回のサイトは Pixi.js を使って WebGL で高速に描画処理を行うことで、ダイナミックでインタラクティブ性の高いコンテンツを実現しています。
マイクが無いと楽しめないので環境を選ぶタイプのコンテンツではありますが、気になる方はぜひチェックしてみてください。
