p5.jsで、インタラクティブなサウンドビジュアライザーを作ってみた。
本記事は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で試しに公開してみたので、触ってみていただけると嬉しいです!
基本操作は、スマホにも対応しています。
基本操作
画面をタップ(クリック)して、色彩とビジュアライザーを変更
キーボード操作
↑ サウンドの変更
↓ 色彩の変更
→ ビジュアライザーの変更(1つ進む)
← ビジュアライザーの変更(1つ戻る)
s スクリーンショットを保存する
タップすると、グラフィックと色彩が変わります。
作品テーマを決めるまで
クリスマスだしなぁということで・・・
着想
クリスマスっぽいものなんだろう?
クリスマスカードって、かわいいデザイン多いよね
そういえば昔、チップみたいなの押すと音が流れるカードあったよね
クリスマスっぽくてprocessingで音が流れる・・・おっ?
・・・みたいな、わりと安易な感じで。それに加えて、
・自分の個人テーマ(シンプルで見映えのするもの)
・ジェネラティブ、インタラクティブといった、MediaArtらしさ
・初学者でも、作ることに挑戦できるレベル感に対応できる柔軟性
といったことも表現できそうだったので、今回の形にたどり着きました。
目新しくはないですが、作ったことなかったので良い機会ということで。
アイディアを広げてカタチにするまで
アレンジできそうという余白を残す
すごく曖昧なのですが、カタチが見えてくると
「もっとこうしたら、どうかな?」という気持ちが沸いてくる状態があるような気がしていて、その程よさが大事かもと思っています。
それがきっかけで、いろいろ調べて、
「こう書けばできるんだ、なるほどね」となったりもします。
今回の場合は、1画面、1グラフィック、1カラー。もうちょっと欲張りたい気持ちもでてきて、自分の中では程よい状態な気がしています。
派生しながら、試行錯誤してみる
コードを1行変えたり、パラメーターを少し調整するだけで、違った印象になるのが、MediaArtの面白いところです。なので、まずは似たり寄ったりでも全く問題なし。(としている)
図形の塗りあり/なし、図形の角丸あり/なし、透明度あり/なし、
rectMode, ellipseModeのあり/なし、サイズの大小、図形の数、
回転させるか/させないか・・・etc
結果として、バランスと色合いがとれていれば、
「なんかいい感じ」を表現することはできそうです。
この「なんか」というフワッとした部分も、自分の中では程よさのひとつであったりします。
コードの可読性
今回、リファクタは全然しきれていないのですが・・・
最後はなるべく、コードにコメントをつけるようにしています。
コメントつけながらリファクタすると、頭の中も整理される(気がする)
素敵な作品、いいなぁと思うデザインにたくさん出会う
作りたいものはシンプルといいつつも、沢山インプットしないと、何がシンプルで、何が良い感じなのか・・・結局わからないのが現実です。
そもそも正解はないので、最適解に近づくためにも、知ることは大事だなぁと実感しています。まだまだ足りない。
ちなみに、ビジュアライズしたデータ
今回ビジュアライズしたのは、この3種類。基本的なやつです。
// 周波数スペクトル全体の振幅値(0〜255の値が返ってくる配列)
spectrum = fft.analyze();
// 波形の値(-1.0〜1.0の値が返ってくる配列)
waveform = fft.waveform();
// 音の大きさの値(0.0〜1.0)
volume = amplitude.getLevel();
それぞれ返ってくる値が異なるので、
どんな風に動きをつけたいかによって、使う関数が変わります。
spectrumとwaveformはどちらもFFT解析をした結果として
返ってくるデータですが、違いをイメージにすると多分こんな感じ。
もうちょっと作るとしたら
・アイディア集的な感じで、パターンを増やしたい
・はたまた、1画面にいろんな要素を詰め込んで作品として作り込みたい
・他のデータもビジュアライズしてみたい
・他のライブラリも組み合わせて使ってみたい
・サウンドのパターンを増やしたい、もしくは、自作したい
・sound APIを使ってみたい
・3Dのビジュアライザーも作りたい(こちらはのんびり制作中)
・画面タップの位置で、処理を変えたい
・隠しコマンド的な要素も入れてみたい
・もうちょっとポップな色合いも作ってみたい
・それぞれのグラフィックにわかりやすいネーミングつけたい
・機能系や設定をわりと削ぎ落としてしまったので、ちょっとずつ加えたい
・リファクタしたい
さいごに
ここまでご覧いただき、ありがとうございました。
今回作ったものは、上記の通りやってみたいことが沢山でてきたので、
のんびりコツコツ続きを作ります!
それから、思いの外noteが使いやすてびっくりしたので(笑)、
また機会があれば何か書こうと思います。
ではまた!
この記事が気に入ったらサポートをしてみませんか?