P5JSで作るオーディオビジュアルスケッチ、そして2021年の振り返り。
第11回目Processing Advent Calendar 2021の18日目の記事になります。
Advent Calenderに参加させていただきありがとうございます。
p5jsとは、3年くらい前にウェブエディターを見つけてからよく遊んでもらってる、大好きなライブラリーのひとつです。最近は、機械学習を簡単に試せるml5jsもお気に入りです。
そして何よりも、ユーザーコミュニティーの皆様が、ほんとに素敵で、多様なバックグラウンドを持つ方々が、それぞれ個性を光らせていることに、いつも刺激をいただいています。
僕自身は、サウンドデザインや音響を専攻して、音響工学の研究室に進みながらもメディアアートに興味があったので、映像を作ったりをはじめたという感じです。その時にprocessingやopenFrameworksに出会い、今はリアルタイムCGやインタラクションデザインといった分野の仕事をしながら、曲を作ったり、メディア技術で音表現を拡張をしようということで、トライアンドエラー・エラー・エラーの日々を送っています。
2年前にPCD2020に参加させていただいた時は『動きを音に変える』というアプローチで、視覚的な情報から音楽的なインスピレーション得られるバーチャル楽器を作るというを紹介させていただきました。こちらは、個人的なプロジェクトとして、思いついたアイディアを実装するためにP5JSを使ってみたという内容でした。
Ableton Liveというイカした音楽制作ソフトに、Max for Liveというこれまたイカした開発環境があり、ここのグラフィックスを、最高にイカしたP5JSを使って作ったというものです。
自作M4Lデバイスのプレイリストです。簡単なマウスジェスチャを使って、打ち込みや楽器の入力とは違ったサウンドデザインしていくデバイス。
最近やっていること
この一年は、相変わらずのステイホームが、個人的なプロジェクトに取り組む時間をくれるので、これまでやっていた『動きを音に変える』の逆で『音から動きを作る』というところにフォーカスしてやってみようということで、オーディオビジュアルスケッチと題して、いわゆるデッサン・スケッチのような感覚で、その事象をよく観察しながら作るをはじめました。
作り方としては、まず曲を作って、その後で、P5JSで図形をコーディングしていくというのをやってみています。
p5.jsでは、p5.sound.jsというWeb Audioを簡単に取り扱えるようにしたライブラリがあるのが、素晴らしいです。実質３行ぐらいで音声を取り込めるのがすごい(マイク入力サンプル)。
p5.sound.jsでは、音声の録音、再生はもちろんのこと、音量の解析やスペクトラム解析をすることができるようです。
そこで古典手法ではありますが、『音を解析してその音の動きをどういう視覚的な動きに代入したら気持ちよくなるか』というのを作りながら体感するためにはじめてみました。
ここからは、オーディオビジュアルスケッチと題して、マイク入力からの音声にインタラクションするスケッチを紹介していきたいと思います。
a/v サンプル１
こちらは、音量解析を使用したオーディオビジュアルスケッチです。こちらは、曲の音量に合わせて複数のPolygon関数の角数を動かすというものです。
アイディアとしてはそれだけですが、音と一緒に聞いてもらうと、音に反応しているのがわかっていただけると思います。リズムを刻むドラムがフィルターを開けながら入ってきますが、小刻みなリフに自然と耳がいく感じがすると思います。音のどの要素を映像のどこに反映させるようにするかで、どこを聞くべきかを強化できることがわかります。
そのため、小刻みなシンセリフ以外のおかず的な音に対しては、映像がついて来ないため、ちょっと物足りない印象を持つかもしれません。
あとは、楽曲の展開に合わせて映像にも展開がないと物足りない感じはでてしまいますね。なので、その辺は工夫が必要そうです。
a/v サンプル2
次も音量解析を使用したサンプルです。音量解析をした結果を、三角関数で制御された円のスケールに代入してみました。
ベースとキックの音量変化と視覚的な動きをマッチさせてみました。
ずっとみていると、ベースとキックがくるのを自然と期待するような効果が得られます。音数を減らし、音楽の展開のダイナミクスもないので、シンプルな構成の映像とマッチする感じはあるかなと思います。
低く図太いシンセベースの音が鳴る頻度は少ないわけですが、映像によって強化されることによって印象のある音として聴こえてくるようになります。
a/v サンプル3
次のサンプルも音量解析を使用したサンプルです。P5JSの公式サイトにあるFlockingというサンプルをWEBGLモードで3D空間で動くように改造して、
それにマイク入力からの音量のパラメータを対応させたサンプルです。
こちらは、音量パラメータを小さい、中くらい、大きい分類して、それぞれに発動する映像的な変化を用意しました。小さい時は、飛び行く３dオブジェクトの大きさが変化し、中くらいの時は、ワイヤーフレーム表示のボックスにグリッチぽく動きが加わり、音量が大きい時はボックスがピカッとフラッシュするようにしました。音量のパラメータでも、値の大きさに応じて分類し、視覚的な刺激というか変化具合に対応させるだけで、音楽的な展開に対して、映像も少し展開をつけることができました。
単純な音量変化をif文で3分割するだけで、大きな効果が得られました。
a/v サンプル4
次のサンプルも音量解析を使ったものです。こちら、指揮者が拍子をとるようなイメージで、イージングの効いた連なった円が動き回る感じとビートを合わせるというのをやってみました。音量解析とプログラムだけできっちり合わせるのは難しいので、この辺ももっと深堀していきたいなと思いました。スムージングが入ることで、音響データをそのまま、ビクビクと動かすよりは、視覚的な気持ちよさが増している気はしますが、目合わせでキーフレーム打った方が気持ちいいよねという感じでしょうか。
またこちらも音量の大きさによって展開をつけることで、視覚的な展開をつけるようにしてみました。
a/v サンプル5
次のサンプルは、音響解析の種類を増やしてみました。これまで使っていた音量解析に加えて、スペクトル分析を取り入れたものです。
p5.sound.jsでは音の周波数を解析できるようにFFTというクラスが用意されていて、簡単にオーディオ信号をバッファーサイズごとのスペクトルに変換することができます。
このスケッチでは、スペクトル分析の値を気泡のような円の大きさと周波数を対応させてみました。音が高くなればなるほど小さな気泡になるようにしてみました。加えて、先ほど同様、音量が大きめの時はグリッチような演出が加えられるようにしてみました。
音が解析されてビジュアライズされている感じはよく出ていて、展開に合わせて、映像も展開するような印象を受けますが、スペクトル分析の結果をうまく生かせきれていないかなとも思いました。
a/v サンプル6
最後は、シンプルに音量だけを使ったサンプルです。
シンプルにパーティクルを飛ばして、灯籠のろうそくの光がふらふらと動くようなイメージで、音量を代入してみたのがこちら。音量によって、移動スピードと真ん中の円が大きくなるようにして、光っているような感じしてみました。何かイメージを持って、それに沿った動きを作れるといいなぁと思います。
最後に
今回は、音と映像をどのように合わせるかというところにフォーカスして作ったオーディオビジュアルスケッチをご紹介をしました。
実際には、作りながら得るものが多く、結果だけだとあまり伝わらない部分もたくさんあるかなと思います。
しかし、このP5JSでオーディオビジュアルスケッチは、ミュージックビデオや映像領域でのMA工程とはまた違った深みがあるなと感じていますし、
すごくリッチなことはできないけれど、手軽に実験して結果をすぐに共有できる環境というのは、非常に魅力的だなと改めて思いました。
また、音量解析という一番シンプルな方法で音解析をして、映像に対応させるだけでは、かなり限界があるなとは思いつつも、音量に応じて演出を出し分けるなど、ちょっとした展開をつけることができることがわかりました。
今後も、個人的な興味が続く限り続けていこうかなと思います。
例えば、ジェネラティブな要素を取り入れてみるとか、midi情報を抜き出せるようにしてみるとか。
以上、p5jsの技術的な話というよりも、活動日記みたいな内容になってしまいましたが、ここまで読んでいただきありがとうございました。
P.S Audio Visual スケッチのためにつくっているサウンドトラックは、全てAudius上で無料でダウンロードで配布しています。商用利用以外の目的であれば、相談なしに自由に使っていただいて結構です。
もし作品などに使われた場合は、@taito_otaniでお知らせくださると喜びます。
それではハッピーコーディング！！