3D Audio Visualizer
新型コロナウィルスの影響で家にいる時間が多くなり、たまたまネットでThree.js (*1)という3D(に見える)コンテンツを作れるjavascriptライブラリの存在を知り、試しに簡単なサンプルをコピーして張り付けてみたら動いた。
3D表示は、コンテンツそのものも箱型、球体、ドーナツ形など様々な形が用意されており当然自分でも好きなようにも作れる。コンテンツの色だけではなく画像を張り付けれる。仮想のカメラがありカメラの位置や角度、縦横比、コンテンツを照らす照明の角度や色、全体の環境色などが自由に設定でき、いじっていると際限がなくなる。
最初は単純にメッシュ状の球体を回していたが、すぐに飽きてくるので音楽をbgmにしてみた。そのうち曲によって3Dコンテンツの動きが合わなくなり次のステップとして音楽の強弱によって動きをコントロールしてみた。
それも物足りなくなって、色々なサンプルを試しているうちにオーデイォデータを高速フーリエ変換(FFT)し画面に音の波を表示するのがあった。
直感的にFFTで音源を分解して個々のコンテンツを制御(動かす)してみるとよさそうと思った。
ということでthree.js 、XML(*2)にのめり込んでしまった。
色々なサンプルをconsoleログをとりながらトレースしてようやく動いた。よく分からないままでとりあえずよしとしたが、自分の思い通りにしようとなると個々の記述の意味を理解しなくてはならない。
3D Audio Visualizerとは勝手につけたネーミングだが、音楽を視覚的に表示することではハズれてはいないと解釈した。
| タイトル | 仕様 | link(click) |
|---|---|---|
| ⑱ 「野津田公園 新ばら広場 (町田市)」 | 写真画像をコンテナー上に配置、2021年春バラ最終版 | LINK |
| ⑰ Audioデータに同期した3D球体を制御 | 背景ボール、4スポットライト、64に球体追加 | LINK |
| ⑯ 「野津田公園 新ばら広場 (町田市)」 | 写真画像をコンテナー上に配置、中央に関連する楽器など画像、内部コーディング整理 | LINK |
| ⑮ 「3D クラシック音楽選集 ver.5」 | Audioデータに同期した写真画像表示、写真画像をコンテナー上に配置し中央に関連する楽器など画像 | LINK |
| ⑭ 「3D クラシック音楽選集 ver.4 (パソコン用)」 | Audioデータに同期した3D画像表示、球体に画像をmapping 、重いのでパソコン専用 | LINK |
| ⑬ 「3D クラシック音楽選集③」 | Audioデータに同期した3D画像表示、中央に関連する楽器など画像 | LINK |
| ⑪ 「身近な野鳥 (町田市薬師池公園)」 | Audioデータを変換(FFT : Fast Fourier Transform)野鳥写真(30個)と音楽を同期 | LINK |
| ⑩ 「3D クラシック音楽選集②」 | Audioデータを変換(FFT : Fast Fourier Transform)し個別に3D球体などを制御。球体を32個に増やしある程度同期させた。 | LINK |
| ⑨ 「2021年 桜 30選」 | Audioデータを変換(FFT : Fast Fourier Transform)し個別に3D球体などを制御。 桜の画像を球体に張り付けた(texture map) | LINK |
| ⑧「3D クラシック音楽選集」 | Audioデータを変換(FFT : Fast Fourier Transform)し個別に3D球体などを制御。 カメラの回転やスポットライトを試した。 | LINK |
| ⑦ 3D球体をAudioデータで個別に動かす。 | 全くランダムに動かすのは多分出来るが、音楽に合った動きにしたい。 | LINK |
| ⑥ 3D球体をAudioデータで円周上に配置し動かす。 | XML、曲目選択、マウスでカメラ回転 | LINK |
| ⑤ 3D球体をAudioデータで動かす。 | XML | LINK |
| * 「演歌など別ジャンル 音楽 | 著作権に配慮 id , password付き ==> abc/abc | LINK |
～以下プログラミング メモ～
(*1)Three.jsは、ウェブブラウザで3次元コンピュータグラフィックスを表示させるWebGLを使いやすくしたもの。
(*2)XMLはExtensible Markup Languageのこと。通常のウエブブラウザ表示はhtmlという言語で書くが、映像や音データの在り処は表示するが処理はしない。XMLは一歩進んでウェブ上でデータそのものを処理する。今回は音楽データの処理にこれを使った。
XMLHttpRequestオブジェクトによってサーバーから受けた音データを、createAnalyser()メソッドで高速フーリエ変換(FFT)した配列(array)データにして受け取る。配列の長さは1024個で中身は0～256の数値。これでデジタル処理が出来る。
最初16個の球体に配列を割り当て動きをコントロールする。全部を同じ方向に回転させるとおもしろくないので反転や角度に変化を持たせる。
元の音データを変換したものを使うので、これまでとは違った動きで音楽に同期した3D映像を表現できるようになった。
実際には音声データは非常に細かいのでそのまま可視化すると単に震えたり見た目には留まって見えたりするので、他にも様々な見映えをよくする工夫をした。
フーリエ変換は学生時代に習った記憶があったが、半世紀以上を経てリマインドしてみて良い資料があったのでメモしておく。角周波数とは物が回転するときに1秒間に進む角度で「回転の速さ」のこと。
参考: ロボット・IT雑食日記