見出し画像

p5.jsで、インタラクティブなサウンドビジュアライザーを作ってみた。

nasana

本記事はProcessing Advent Calendar 2019の11日目の記事です。

ごあいさつ

はじめまして！ナサナと申します。
普段はTwitterで、p5.jsやshaderを使ったMediaArt作品をのんびりアウトプットしています。

のんびりすぎて、daily ならぬ weekly coding になっちゃってるんですけど、
一応、個人テーマとしては
「シンプルで見映えのするもの、作ってみたくなるものって、何だろう？」
を心の片隅において、作品づくりをしています。

なので、技術習得ももちろんですが、技術整理の方がウェイト高めです。

さて、今回はProcessingのアドベントカレンダーに向けてp5.jsで作ったMediaArt作品をシェアできればと思っております。
なお、技術解説は皆無です、ご了承ください！

作ったもの

p5.jsとp5.soundを使って、インタラクティブなサウンドビジュアライザーを作りました。

Webで公開するのが楽チンなのも、p5.jsのいいところです。
netlifyで試しに公開してみたので、触ってみていただけると嬉しいです！


基本操作は、スマホにも対応しています。

画像3

基本操作
画面をタップ（クリック）して、色彩とビジュアライザーを変更

キーボード操作
↑　サウンドの変更
↓　色彩の変更
→　ビジュアライザーの変更（1つ進む）
←　ビジュアライザーの変更（1つ戻る）
ｓ　スクリーンショットを保存する

タップすると、グラフィックと色彩が変わります。

画像2

作品テーマを決めるまで

クリスマスだしなぁということで・・・

着想
クリスマスっぽいものなんだろう？
クリスマスカードって、かわいいデザイン多いよね
そういえば昔、チップみたいなの押すと音が流れるカードあったよね
クリスマスっぽくてprocessingで音が流れる・・・おっ？

・・・みたいな、わりと安易な感じで。それに加えて、

・自分の個人テーマ（シンプルで見映えのするもの）
・ジェネラティブ、インタラクティブといった、MediaArtらしさ
・初学者でも、作ることに挑戦できるレベル感に対応できる柔軟性

といったことも表現できそうだったので、今回の形にたどり着きました。
目新しくはないですが、作ったことなかったので良い機会ということで。

アイディアを広げてカタチにするまで

アレンジできそうという余白を残す
すごく曖昧なのですが、カタチが見えてくると
「もっとこうしたら、どうかな？」という気持ちが沸いてくる状態があるような気がしていて、その程よさが大事かもと思っています。

それがきっかけで、いろいろ調べて、
「こう書けばできるんだ、なるほどね」となったりもします。

今回の場合は、1画面、1グラフィック、1カラー。もうちょっと欲張りたい気持ちもでてきて、自分の中では程よい状態な気がしています。
派生しながら、試行錯誤してみる
コードを1行変えたり、パラメーターを少し調整するだけで、違った印象になるのが、MediaArtの面白いところです。なので、まずは似たり寄ったりでも全く問題なし。（としている）

図形の塗りあり/なし、図形の角丸あり/なし、透明度あり/なし、
rectMode, ellipseModeのあり/なし、サイズの大小、図形の数、
回転させるか/させないか・・・etc

結果として、バランスと色合いがとれていれば、
「なんかいい感じ」を表現することはできそうです。
この「なんか」というフワッとした部分も、自分の中では程よさのひとつであったりします。
コードの可読性
今回、リファクタは全然しきれていないのですが・・・
最後はなるべく、コードにコメントをつけるようにしています。
コメントつけながらリファクタすると、頭の中も整理される（気がする）
素敵な作品、いいなぁと思うデザインにたくさん出会う
作りたいものはシンプルといいつつも、沢山インプットしないと、何がシンプルで、何が良い感じなのか・・・結局わからないのが現実です。
そもそも正解はないので、最適解に近づくためにも、知ることは大事だなぁと実感しています。まだまだ足りない。

ちなみに、ビジュアライズしたデータ

今回ビジュアライズしたのは、この３種類。基本的なやつです。

    // 周波数スペクトル全体の振幅値（0〜255の値が返ってくる配列）
   spectrum = fft.analyze();

   // 波形の値（-1.0〜1.0の値が返ってくる配列）
   waveform = fft.waveform();

    // 音の大きさの値(0.0〜1.0)
   volume = amplitude.getLevel();

それぞれ返ってくる値が異なるので、
どんな風に動きをつけたいかによって、使う関数が変わります。

spectrumとwaveformはどちらもFFT解析をした結果として
返ってくるデータですが、違いをイメージにすると多分こんな感じ。

画像3

もうちょっと作るとしたら

・アイディア集的な感じで、パターンを増やしたい
・はたまた、1画面にいろんな要素を詰め込んで作品として作り込みたい
・他のデータもビジュアライズしてみたい
・他のライブラリも組み合わせて使ってみたい
・サウンドのパターンを増やしたい、もしくは、自作したい
・sound APIを使ってみたい
・3Dのビジュアライザーも作りたい（こちらはのんびり制作中）
・画面タップの位置で、処理を変えたい
・隠しコマンド的な要素も入れてみたい
・もうちょっとポップな色合いも作ってみたい
・それぞれのグラフィックにわかりやすいネーミングつけたい
・機能系や設定をわりと削ぎ落としてしまったので、ちょっとずつ加えたい
・リファクタしたい

さいごに

ここまでご覧いただき、ありがとうございました。
今回作ったものは、上記の通りやってみたいことが沢山でてきたので、
のんびりコツコツ続きを作ります！

それから、思いの外noteが使いやすてびっくりしたので（笑）、
また機会があれば何か書こうと思います。

ではまた！

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