ねこでじ(Nekodigi)

Nekodigi’s diary

学習中の気づきをまとめています。応援よろしくお願いします

まるで衝撃波!Audio Visualizerをp5.jsで作る

www.youtube.com

衝撃波のようなAudio Visualizer

音楽を再生するときに表示される棒グラフのようなものがAudio Visualizerで、音の周波数などを視覚化するために使われています。特にNCSのAudio Visualizerはかっこよくて音楽を聴くのが楽しくなりますよね!
Audio Visualizerを作るにはフーリエ変換などの難しい技術が必要になりますが、p5.jsには初めからその機能付いているため簡単に作ることが出来ます。
棒グラフの形で表現される場合が多いですが、波形を円状に表示し、残像を残すことで衝撃波のような美しい見た目にすることが出来ます。
入力に使う音楽の音量や周波数によって見た目が驚くほど変わる所が見どころです!
f:id:Nekodigi:20211127193313p:plain

Webで実行

ダウンロードせずにWebで簡単に使うことが出来ます。
プログラムを変えなくてもCUSTOM VARIABLEの数値を変更すれば、見た目を自由自在に変えることが出来ます。また、マイクの入力を表示することもできるので、ぜひやってみてください!
editor.p5js.org
f:id:Nekodigi:20211127193129p:plain

残像を使おう!

残像はp5.jsの中で最も強力な機能なのではないかと思うほど、うまく使えばとてもきれいな作品を作るのことが出来ます。
一部のプロジェクトでは残像を動かす独自の技術を使っており、立体感のある映像を創り出しています。
残像をうまく使った作品を以前にいくつか紹介しているので、こちらもチェックしてみてください。
コードをコピペするだけで簡単に試せます。
nekodigi.hatenablog.com