Processing はじめました
どうも、AETA(イータ)です！
いよいよ待ちに待った GW ですが、皆様いかがお過ごしでしょうか？
アタクシは足の指の骨折で何処にもお出かけ出来ないことがとうの昔に確定しております・・・
悲すぃ・・・('A`)
さて、実はここ最近、新しいことを勉強することに喜びを覚えるようになりまして、その流れからインタラクティブ系アートに興味がむくむくと湧いております。
と言いますのも、音楽や動画を作ることにも多少慣れてきたところで、新しく学んだことを活かしてちょっとこれまでとは違ったアプローチで接してみたいと思うようになりまして。
前々から興味のあった CG 関係を勉強しつつ何か面白いことが出来ないかなぁと。
でも、単純に音楽と動画をそれぞれ作り込んで足し合わせただけじゃ面白くない。
せっかくなら音楽に連動した映像でさらに即興性を兼ね備えた作品を・・・
ということで Audio Visualizer を作ることにしました！（唐突）
普通は CG 制作っていったらそういった制作系のソフトを使うと思うんですが、音楽やこちら側の操作に合わせて動的に動かすとなると、ちょっと勝手が違うわけで。
知識 0mm の状態から手探りで始めてみました。まずは開発環境の調査からスタート！
■Google Chrome + JavaScript
Google Chrome さえあればブラウザ上で何でも出来るんじゃい！といわんばかりに最新のHTML への対応が最も充実している Chrome。
JavaScript の知識が必要ですが、Web Audio や Web MIDI でオーディオや MIDI を扱えるだけでなく、WebGL を使えば GPU（画像処理専用プロセッサ）を使った高速なグラフィック描画も出来る！
しかも無料！
もうこれ一択じゃない？ってことでちょっと触ってみました。
100行程度のソースコード（HTML ファイル）なのにブラウザの中でマウスで動かしたり音に合わせて回転させたり出来るってのが驚きですね！どっひゃー！
WebGL そのものは非常にシンプルな機能しか持ってないので、3D 描画などに必要な行列計算を行うライブラリと組み合わせて使うのが一般的だそうです。
ざっと調べたところ個人的には情報量が多いこともあって Three.js がおすすめ。複雑な処理を一旦 Three.js が窓口となって受け取り、単純作業に分解した後で WebGL に任せる、といった感じですかね。
こういう風に解釈の仲立ちを行う部分をラッパー（Wrapper）といいます。音楽用語のラッパーとは綴りも意味も異なるのでお間違えなくｗ
ということでこれを使って本格的に始めようとしたのですが、どうやってもローカルのオーディオファイルをオープン出来ない・・・ぐぬぬ。
URL だと指定出来るんですけどねー。そもそもが Web サーバーに置かれたファイルをアクセスすることを目的としているので、ローカル PC で実行するには不向きなのかも。
思わぬ所で挫折し他の手段を探すことに。
■Max
こういった少し実験的なことをやろうとした時に真っ先に上がってくるのが Max だと思います。
リンク先をご覧いただければ分かると思いますが、部品を画面上に配置して線をつなげていく、いわゆるビジュアルプログラミングですね。
このデザインを見た時に既視感を感じた方もいらっしゃるかもしれませんが、そうです。
Ableton Live はこの Max がベースとなって作られています。2017年6月に Ableton が Max の開発元である Cycling '74 を買収したのは記憶に新しいところ。
以前にも少し遊びで触ったことがあったので、久しぶりに触ろうとしたんですが・・・試用期間が切れてました・・・（泣）
音だけでなく映像も簡単に扱うことが出来るというところがミソでして、ライセンスを買うかサブスクリプションということで、かなり本気で購入を考えました。
しかし、自分の環境で映像を扱った際にどの程度のパフォーマンスが得られるか不安でしたし、それなりのお値段なのでもう少し調査してみることに。
■openFrameworks
openFrameworks という名前の通り、これはオープンソースなんですが、あくまでもフレームワークということで C++のソースコード一式が提供されているだけでして、開発環境は自分で用意してね、ってやつです。
開発環境の構築には多少時間を要します（インストールして終わり、とかではない）が、一からコンパイル、ビルドして実行ファイルを作る（コンパイルとビルドの解説はこちら）ので、高速動作が期待出来ます！
というわけで開発環境を整えて、サンプルコードをビルドして実行・・・！
" The driver does not appear to support OpenGL"
うがぁ！
ちなみにアタクシの PC 環境は Intel HD Graphics といいまして、CPU に GPU の機能が内蔵されたものなんですね。どうもこのグラフィックドライバが OpenGL（汎用のグラフィック描画ライブラリ）に対応していない、というのがエラーの言い分らしいです。
一応、PCメーカーサイトの最新版のグラフィックドライバをダウンロードしたり、Intel 本家のサイトにもアクセスして最新版を試したりしてみたんですが、エラーは変わらず・・・
本当に対応してないのか怪しかったので以下のツールでチェック。
対応してんじゃん！
Rendering tests もバッチリ動いてパスしてるし！どういうことなの？！
その後も色々と調べてみたんですが、どうやら最新に近いバージョンの openFrameworks、Windows 10、Intel HD Graphics だとこの問題が起きるようなことがフォーラムに書かれていました。
そもそも Intel HD Graphics というのがドライバの対応も含めてあまりよろしくないようですね・・・
次行ってみよ！次！
■Processing
インストールも簡単でビルドやデバッグも可能な統合環境も含まれており、しかも無料！（ダウンロードはこちらから）
Java ベースで動作するので Java のインストールが別途必要ですが、何かの拍子に気づかずインストールしてしまっている場合のほうが多いかも？（Java と JavaScript の違いについてはこちらの解説が秀逸なので是非ご一読を）
ということで早速試してみました！（twitter によるモノラル音声への再圧縮で音質悪くてすみません・・・）
FFT といって音声の周波数成分の強さを調べる方法があるのですが、関数ですでに用意されているので、描画するタイミングでこれを呼び出し、左右の周波数成分の大きさに合わせて楕円の色を変えています。中央付近が低音、両端が高音です。
80行程度でこんなに簡単に出来るって凄い！
Java に比べるとコーディングに必要な手続き部分を殆ど書かず、純粋に描画処理だけに集中して記述出来るのがとにかく素晴らしいですね！
ここから一旦 Java に変換されて実行されるわけですが、Java なので実行までさほど待たされることもなく動作も軽快！
最初は GPU を使わないモードで走らせてみました。で、もう少し凝った演出にしたかったので高速描画させるために GPU を動作させる指示を加えて再度実行！
" Framebuffer objects are not supported"
またまた OpenGL 系のエラーのようです。
Processing よ・・・お前もか・・・
回避策がないかフォーラム内で情報を求め探し回ったんですが、なかなか有力な情報にたどり着けないまま一週間・・・
ふと、Processing が Java ベースで動作していることを思い出し、Java のキーワードを頼りに検索を続けていると・・・
"Clone or download" のボタンを押して "Download ZIP" を選択。
解凍したら " java-runtime-environment.cmd" をダブルクリックして実行！
これで Windows 10 の Intel HD Graphics 環境でも Processing から内蔵 GPU が使えるようになりました！
長かったぁ・・・（泣）
というわけで早速作ってみたインタラクティブな Audio Visualizer のデモがこちらになります。
作品名は "burner" です。起動時に好きな音楽を選ぶと、再生音に合わせて変化する光（バーナー）をマウスで形状を変化させたりキーボードで様々な表示に変化させ、これを保存して呼び出すことも出来ます。
ちょっとした VJ ソフトみたいな感じですね。
作品名でもあるバーナーのようにぼんやり光らせる手法はこちらを参考にさせていただきました！ありがとうございます！
オリジナルでは中心からの距離に合わせてピクセルの色の濃さを変化させていたのですが、背景に色を付けたかったので透明度のほうを変化させるようにしました。
また、バーナーの光の部分を大きく目立たせつつ端周辺では透明度をしっかり上げたかったので、直線カーブではなく二乗カーブで変化させています。
YouTube のコメント欄にも主な操作方法を書いていますが、こちらでもう少し解説します。
起動させると再生する音楽ファイルを選択するフォルダが表示されます。WAV/AIFF/AU/SND/MP3 といったファイル形式に対応しています。
ファイルを選んで「開く」をクリックするとこのような画面になります。
ここでキーボードのスペースを押すと再生が開始されます。再び押すと停止。
音楽に合わせて炎のような表示が変化します。静止画だと分かりにくいですが、各周波数成分の音量レベルで最も高いピークの音量変化に合わせて拡大表示することにより、キックなどのタイミングに合わせて前に迫ってくるような表現にしています。
キーボード（テンキーがある場合はそちら）で [0] から [9] を押すと、プリセットとして用意されたバーナーの形状や表示タイプを呼び出すことが出来ます（以下は [3] を押した様子）。ちなみに同じキーを押したときでも色が変わる、対称性が変わる、といった変化が起こるようにしています。[.] キーで表示色のみを変えることも可能です。
この形状はマウス操作と左クリック（またはドラッグ）によって変化させることが可能です。変化させるモードはキーボードによって 2種類指定することが出来ます。なお、マウスでクリックする度に前景の描画色がランダムに変わるようにしています。
[q]：x軸方向で大きさ、y軸方向で上下のずれ（他のキーとの組み合わせで線対称と点対称が可能）
[w]：x軸方向で角の面取り、y軸方向で輝度の広がり
これらの動きはマウスの代わりとしてカーソルキーでも代用可能です。
これ以外にマウス中央のホイールで以下の調整が可能です。音楽ソースや好みに合わせて調整してください。
[e]：バーナーが表示される感度
[r]：音量ピークに合わせた拡大表示の感度（最小にすると音量による変化無し）
横方向に並んでいる周波数の間隔を以下の 2種類から選ぶことが出来ます。
[a]：直線
[s]：対数
ここまでの例は以下の表示モードです。
[d]：水平表示
これに加えて以下の表示をさせることが出来ます。
[f]：円形表示
また、背景色を変化させたりクリアすることも出来ます。
[z]：背景色の変更
[x]：背景色のクリア
[c]：背景色と前景色のネガポジ反転
左右の音に合わせて中央から表示領域を分けていますが、マウス操作で上下方向にずらしたときの左右の表示の仕方も以下の種類を用意しています。ここまでの例は以下の表示です。
[-]：線対称その1
[*]：線対称その2（ずれ値：0.0）
これに加えて
[/]：点対称その1
[+]：点対称その2（ずれ値：1.0）
ちなみに十字カーソル表示を消したい場合は ON/OFF を [o] で切り替えられます。
ですが、カーソルが消えてしまったときにカーソルを表示させること無く位置を画面で確認したいことがあると思います。
そんなときのために、マウスの右クリックを押し続けるとカーソルの代わりに円形のリングが大きくなりながら表示されるモードを付けました。
形状の変化や表示タイプについては新たにプリセットとして保存、呼び出すことが可能です。
[p]：現在選択されているプリセット番号に一時的に保存
[P]：上記に加え、プリセットファイルを出力
プリセットへの書き込みは起動中のみ有効で、次の起動時では元に戻りますが、[SHIFT] キーを押しながらの大文字の [P] の場合、以下のような作成日時の情報がファイル名に追加されたプリセットファイルを新たに作成します。
プリセットを書き換えてしまって良い場合は、既存のプリセットファイルを削除するか別のディレクトリに移動し、 代わりにここで新たに出来上がったプリセットファイルの名前を "preset数字.txt" に書き換えれば次の起動時から有効になります。
今回、色に関してはランダム性を持たせているため、保存するパラメータからは外しています。
・・・とこんな感じで初めての Processing で見よう見まねで作ってみたのですがいかがでしょうか？
JavaScript や Web Audio、Web MIDI の勉強を初めたときもそうでしたが、やっぱり最終的な目的意識があって新しいことを学ぼうとするとスピードが格段に違いますね！
さて、今回は映像作品というかアプリに合わせて後からデモンストレーション用の曲を作るという、これまであまりやったことがないアプローチでしたので、曲の作り方も従来とはガラッと変えてみました。
コードが入っていない曲を作ったのってもしかして初めてかも？
映像の方にはコード感たっぷりなんですけどねｗ
ちなみに、曲名の「Escaper」っていうのは最近起こった事件に触発されて作りました。
「脱走、ダメ、ゼッタイ！」
