見出し画像

P5.jsでつくるオーディオビジュアルスケッチ2022

Taito Otani | 大谷泰斗

第12回Processing Advent Calendar 2022の12日目の記事になります。
参加させていただきありがとうございます👏　Taito Otani です。

あっという間に2022年12月です。ぷぅ〜早いすなぁ。今年も悲しい話題もありましたが、イベントが復活してきて、家にいる時間が減った気がするのと、デジタルアートに関する色々な話題が盛り上がった１年になったように思います。そして、Processingのコミュニティーの皆さんの活動には、日々勇気づけられているばかりですが、

そして、今年一番の衝撃ニュースの一つは、子供の頃にあれだけ『ゲームは、1日1時間』だの『パソコンやりすぎ』などと言っていた母親が、そろそろ定年だし、パソコンを買ってNFTでも売ろうかしらなどと言ってきたことです（笑）

そのくらい、デジタルアートやNFT、メタバースといった話題がテレビ等のニュースで流れて色んな人に、この辺の話題が認知された1年間になったのかなと思います。それと同時に色々な誤解や課題が浮き彫りになったということでもあるのかもしれません。

P5jsでDAW画面を飾る

processingのコミュニティーは色々なバックグラウンドの方が多様に活動しているのがとても素晴らしいなと思っているのですが、僕はもともと音楽を作るというところから出発して、オーディオとビジュアルに興味を持って、気がついたらp5jsをいじり始めていました。

そんな中、ちょうどコロナ禍というのもあって、ライブイベントやクラブでの活動ができなくなったタイミングが重なって、Ableton Liveとp5.jsを組み合わせたオーディオビジュアルデバイスを紹介したのがきっかけで、たくさんの素晴らしい方との出会いで自分の活動のモチベーションが支えられています。

その時に紹介したデバイスがこちらです。

オーディオビジュアルの本質的なものは何かといえば、演奏そのものであるはずで、LAPTOPを使って音を作るのであればDAW画面そのものが演奏であり、それ自体を提示してオーディオビジュアルとして鑑賞に耐えうる芸術性を持てば、それこそが本質的なオーディオビジュアルなんじゃないかということで作り始めているのが、これらのシリーズです。

実際問題は、技術的な制約やAbelton Live上のパラメータ全てを可視化して鑑賞に耐えうるものにまで到達できていないので、まだまだ伸び代がありますが、個人的にもまだまだやっていきたいトピックの一つになっていますし、未来の音楽づくりという文脈でもライブコーディングと並んで興味のあるトピックになっています。ここまでが2020年の話です。

昨年やっていたことは、2021年のAdvent Calenderで振り返っていますのでぜひ合わせてご覧ください。

P5.jsで作るオーディオビジュアルシステム

ここからが今年の話です。
今年はイベントが復活してきてコンピュータ上だけの活動から、会場や箱でのDJやライブパフォーマンスをやる機会がグッと増えました。

そんな中でもやはりせっかくなので、p5.jsを活用したシステムを組めないかということをやってみていました。

このシステムは、Ableton Liveで音を作って、P5.jsで映像を作っています。
具体的にはP5.JSとビデオエフェクトを埋め込んだウェブブラウザへ、Max for LiveからオーディオやMIDIの信号を送信できるような仕組みを作って、Ableton Live上のシンセサイザーやドラムサンプラーにマッピングして音から映像を生成するサウンドビジュアライザーようなシステムを作ってそれを演奏してパフォーマンスしている様子です。

システムとしては新規性みたいなものはほとんどないかと思うのですが、、やりたいことで言えば、映像を使って自分の楽曲拡張して提示するということに加えて、p5.jsのストックを再利用してオーディオビジュアルな表現を作っていくという取り組みです。

ここからは、今年制作したオーディオビジュアル作品を少し紹介していければと思います。

Shi-Ki-So-Ku-Ze-Ku(2022)
Ableton LiveとMaxで作ったジェネレティブミュージックにP5.JSでビジュアルを載せた作品になります。こちらの作品は、メディアアーティストで東京藝術大学の教授である後藤英先生が主催しているMax Summer Schoolでもご紹介させていただきました。

曲の展開とフレージング、ビートが時間経過とともに変化し続けるオーディオビジュアル作品で、音楽のパラメータに合わせて、レイヤーやエフェクト、円のポジションや色などが変化していくというものです。こちらはその作品をビデオキャプチャーしたものです。


Miles(2022)

こちらは作品は、P5.soundライブラリーを使って、マイクからのオーディオの音量を取得して映像に入れ込むというものです。

openprocessingでは、画面右上のマイクアイコンをアクティブにするとマイク入力を受け付けるようになる仕様のようです。

クラブ等でプロジェクションすることを考えて、背景色は基本黒色にしています。画面全体の映像の白色の度合いと、音量をマッピングするように、いくつか描画用関数をレイヤーのように準備しておき、音量レベルごとに、Switch文で出し分けることでオーディオリアクティブな仕組みを作っています。

Endles(2022)

こちらも、P5.Soundのライブラリーを使って、マイクからの入力を受け付けて、strokeに単純に音量を代入しています。

人形の３Dモデルが逆さに落ちていくながら浮遊感のある世界観のインスピレーションは、大ヒット映画「スパイダーバース」のポスターから得ました。

人物が映像の中にあると、不思議と構図が分かりやすくなるので、非常に面白いなという発見がありました。抽象的なビジュアルとインタラクティブな要素のバランス感を整えつつ、オーディオビジュアライザーとしての機能が十分に果たせるそんな作品になったかなと思っています。

オーディオビジュアルスケッチの継続

イベントやクラブでのパフォーマンスシステムの試行錯誤に加えて、
昨年に引き続いて、日々の練習という立ち位置で、オーディオリアクティブ小さなスケッチを作っていく活動は合間に続けていました。

そんな作品たちを紹介させてください。

基本は、スケッチと言う軽いノリで、作っているのもので、思いついた世界観から、曲とビジュアルを作っていくというものです。

今年は特に、短いサウンドループを作って、それにビジュアルを載せるタイプの作品を多く作りました。

その一部紹介したいと思います。

今年は特に、テンプレートを作ったところから始めるのを試してみて、個人的にも書きながら考えるような感覚で、取り組めて楽しかったですし、言葉にしない日記のような感覚もあり、非常にエキサイティングな活動になってるなと思いました。大体、残業がなく帰って来れた日の夜中とかに思い立って作り始めて、翌朝寝坊するというサイクルになっています（ダメじゃん）笑。

今年一番の進化としては、配色の仕組みを取り入れたことです。自分の色味を探して作れたことです。 といった配色ツールを使った技ですが、配色にランダム要素を入れるのに重宝する方法です。

let colors1 = "f8fcda-e3e9c2-f9fbb2-7c6354-a5abaf"
  .split("-")
  .map((a) => "#" + a);

let colors2 = "642ca9-ff36ab-ff74d4-ffb8de-ffdde1"
  .split("-")
  .map((a) => "#" + a);

color_setup1 = random([colors1, colors2]);

function draw() {
    background(random(color_setup1));
}

NEAGE

この作品はカメラの視点をぐるぐる回して、アグレッシブな音との相性をテストしたスケッチです。画面で見るのとプロジェクションして大きな画面で見るのとでは、体験が違うのですが、明滅とミニマルなボックスの連なりで空間や流れを表現することはできるのだなと感じたスケッチになります。

Aki no Tombo

このトンボのスケッチは結構気に入っていて、10月に作ったのですが、秋らしい世界観を作りながら、哀愁感のあるサウンドを載せた世界観を作れたかなと思っています。群集シミュレーションを使ったトンボの動きですが、意外と可愛くできました。ベル系の音をフェージングさせることで、秋と夏の終わりの虫や草のサワサワとした音の響きを作りました。

ツイッターに音と映像を載せようとすると、映像がジャギジャギになっちゃうのですが、こういうパッキりしたコントラストの映像だとよりそれが顕著になるなと言うのがわかった投稿です。コンテンツと言うものがあくまでプラットフォームに支配されているなと言うのをよく考えるきっかけになった
気がしています。

Yen-Yasu

こちらの作品は、最近、日本の楽器と電子音楽に興味があり、そのサウンドデザイン感でオーディオループを作って、そのゆったりとした音の響きの中で、高周波のデジタルっぽさを表現するサイン波のグリッチ感を表現してみるという習作スケッチになります。和風過ぎてもなんかダサいし、電子音楽感のあるトロンのような世界観も飽きられていると思うので、そうではない世界観を探しています。

Curious Tick

こちらは、オーディオスペクトラムとパーティクルクラスを使ったスケッチで、アコースティックなドラムループをビジュアライズするときの、特にスネアの左右へのステレオ感のある響きを表現できないかにチャレンジしてみたものです。結果としてはあまりうまく表現できていないのですが、アイディアとしては、枠線があり、そこをパーティングが飛び出す時とドラムスネアの響きをマッピングしてみるという試みです。

これらのスケッチ制作を通して共通して発見したのは、オーディオリアクティブなパラメータデザインの段階をつけることで、表現の幅が広がること、
そして、オーディオリアクティブに頼らずに動かすパラメータも用意することで気持ちよさが変わります。

KUMALEONオーディオジュアルスケッチ
ちょっと話題がそれますが、今年の大きな思い出の一つとしてKUMALEONちゃんのNFTプロジェクトに作品を提供できたことです。

Kumaleonちゃんのファンやコミュニティーの皆さんにオーディオビジュアルの世界を知ってもらえて色々なコメントをもらえたことも非常に嬉しかったです。普段は届かない方々に自分の作品を楽しんでもらえるのは、何よりもアーティストとしてのモチベーションにもつながっています。

おわりに
今回は、今年の取り組みについてのご紹介という風になりました。今年は特に、イベントでのライブパフォーマンスの機会が増えて、画面上でのオーディオビジュアル作品づくりにフォーカスしていたところから、ライブパフォーマンスセットに組み込み、オーディオビジュアルパフォーマンスをするためのシステムを組む試行錯誤を多くやったように思えます。

その中でオーディオビジュアルの本質を考えると、クオリティーを上げるために作りこんだ楽曲に対して、作りこんだ映像を提示すれば、クオリティーは自然と上がる。つまり、2mixやプリレンダーで提示するのが一番安全だし、出音も見た目も演出も良くなるわけです。僕自身も、いわゆる職業クリエイターとしての仕事の8割はそういう活動だったりする。

しかし、そんな中で個人ワークとして取り組んでいるオーディオビジュアルの探求の活動を通して、P5.jsで作る意義はどこにあるかと言えば、ブラウザで簡単に拡散可能であるという点以上に、アルゴリズムによって生成されているという点だと思います。つまりは、かっこいいオーディオビジュアルアートを作るっていうのももちろん価値があることだとは思いますが、かっこいいオーディオビジュアルアートを作るアルゴリズムを明らかにして、それをp5.jsという比較的フレンドリーな開発環境を通して、オープンソースとしてコミュニティーに提供してしまうという所に一連の活動の意味があるように最近は思い始めています。
ぜひ公開しているスケッチや楽曲はどんどんいろんな人に使ってほしいなと思ったりしています。

最後に、諸問題はあるにしても、こうしたオープンなカルチャーとクリエイティブコーディングの素晴らしさと、それを支えているコントリビュータやアーティスト、コミュニティーを支える全ての人をリスペクトしたいと思います。

#p5js  #creativecoding #processing #ableton #audiovisuals #visualdesign #music #technology #adventcalendar

この記事が気に入ったらサポートをしてみませんか？