Audiovisual表現とは、一般的なミュージックビデオとは異なり、映像と音が要素レベルで密接にかかわる表現手法である。Oskar FischingerやNorman McLarenはその起源ともいえる。セルアニメ時代のディズニーアニメーションは特に音楽との関係を今よりも重視したものが多い。
現代では、デジタル技術をベースに映像と音楽をより高度に融合した作品が登場している。Audiovisualから外れるが、視覚表現だけでなく、照明との融合、ダンス等のパフォーマンスとの融合など、多様な表現生まれている。
今回は、Audiovisualに含まれるテクニックとして、音に反応してビジュアルをリアルタイムに生成するAudio Reactive表現について、ビジュアルプログラミング環境のTouchDesignerを用いて制作する。
Audio Reactive表現は、古くからMacやWindowsのメディアプレイヤーにサウンドビジュアライザーとして搭載されていることが多い。オーディオリアクティブなコンテンツを制作するツールとしては、After Effects、VJ系ソフト、Cycling’74 Max、Unity、近年ではウェブサービス（一例：https://musicvid.org/）も存在する。
下図のように画像を疑似3D化した上でHeight Mapの変化量として、音の大きさを入力する。
カナダのDerivative社が開発、販売しているノードベースのビジュアルプログラミング環境。映像の高速処理、ArduinoやKinect、Oculu等のデバイス連携も可能。プロジェクションマッピングやライブ演出等のリアルタイム演出、メディアアートまで幅広く利用されている。個人利用であれば機能限定（出力解像度1280×1280等）だが無料で使えるNON-COMMERCIAL版がある。
ノードベースプログラミングでは、機能を持ったノード同士を接続していくことでプログラミングを行う。処理の流れが可視化しやすく、処理の流れの変更も信号線の配線を変えるだけで簡単に行うことができる。処理の流れを理解しやすいノードベースツールを利用することで、アーティストやデザイナー自身がプログラミングを行うことが容易になってきている。
TouchDesigner以外にも、vvvv、Max、Notch等、ノードベースのUIを利用したツールは近年増加傾向にある。TouchDesginerのようにメインのEditorとして使うものもあれば、Houdini（下図左：NodeとNetwork、Blender、Unity（下図右：Bolt）のように特定の機能にノードベースツールを利用するものもある。
デスクトップショートカット or アプリ検索により起動する。
Defaultではサンプルプロジェクト（下図）が読み込まれる。
下図が大まかなUI外観（クリックして拡大）。
ネットワークエディタ上でオペレータを追加してワイヤで接続するのが、TouchDesignerの基本的なプログラミング手順。初心者はパレットブラウザやタイムラインを使うことはない。
ここではネットワークエディタのビューの操作のみ説明する。オペレータの操作に関しては後述する。
ビューを縮小しすぎると上の階層に移動するので、ビューを拡大してもとの階層に戻す。
ビュー操作に関わるショートカットキー
TouchDesignerでは様々な機能のオペレータを使うことでプログラミングを行う。オペレータには多数のタイプがあるので、使いながら少しずつ覚えていく。
サンプルプロジェクト（下図、第２階層）には、以下のオペレータがある。
OP Create Dialogを表示して確認する。
TABキーもしくはネットワークエディタの何もないところでダブルクリックする。
タブ（上図）をクリックすると、オペレータのファミリ毎に分類されて、様々なタイプのオペレータが表示される（下図）。色分けされているのでわかりやすい。
以下は、ファミリの特性。
パラメータウィンドウでの確認
オペレータには固有のOperator nameが付けられており（変更可能）、パラメータの呼び出しに用いられる。
「タイプ名＋ファミリ名」で呼ばれる。
NoiseのCHOPの場合は、Noise CHOP。
Nullのように6種類のオペレータにある場合は、Null COMP、Null TOP、Null CHOP・・のようになる。
パレットブラウザは使わないので、下図の×を押して閉じる。
ノードを組んでいく場合は、下図のようにサンプルプロジェクトのオペレータは全て削除してから行う。
Ctrl+Aで全選択（or 右ドラックで囲む）してDeleteキーで削除。
ネットワークエディタをダブルクリック or TABキーでOP Create Dialogを表示する。
OP Create Dialogの検索窓に目的のタイプ名を入力すれば探しやすい。
TOPファミリから、以下の３つのオペレータを追加する。
ワイヤリングしていない場合は下図のようにError表示されるが問題ない。
オペレータには出力を持つもの、入力を持つもの、入出力を持つものがある。
出力と入力を接続（ワイヤリング）することで信号を送ることができるようになる。
下図のようにMovie File TOPの右の穴付近からドラッグして、Transform TOPの左の穴付近に接続する。逆から接続することもできる。
同じ手順でTransform TOPの出力から、Out TOPの入力に接続する。
エラーが消えて、すべてのオペレータにバナナが表示される。
ワイヤ上で右クリックしてDisconnectする。
パラメータウィンドウを利用して、各オペレータのパラメータを設定することができる。
オペレータを選択することで、そのオペレータのパラメータに切り替わる（右上固定表示の場合）。
Pキーを押すことで表示/非表示を切り替えることができる。
Movie File In TOPは、映像データや静止画データを読み込むことができるTOP。
下図のFileフィールドの右の「＋」をクリックして、読み込むデータを変更することができる。
TouchDesignerには最初からいくつかのサンプル画像（下図）が準備されている。NON COMMERCIAL版は1280×1280が上限なので、それ以上の解像度のデータを読み込むとエラー表示されるので注意。
Transform TOPでは、移動（Translate）、Rotate（回転）、Scale（拡大・縮小）等を行うことができる。
下図のフィールドに値を入力すれば変更できる。
Rotateのスライダーはマウスの左ドラックで値を変更可能。
TouchDesignerのマウスによる値変更方法は独特で慣れが必要。
まず、特定の数値フィールド上（下図ではRotateフィールド）でマウスのスクロールホイール（真ん中ボタン）を押す。
上図のようなメニューが表示されるので、スクロールホイールを押し続けたまま、単位（10毎、1毎、0.1毎、0.01毎、0.001毎）の上に移動して、横方向にドラッグすることで数値を操作することができる。
TouchDesginerでは基本的に同じファミリ同士のオペレータしかワイヤリングできない（COMPは構成により異なる）。ここではCHOPからTOPヘ値を受け渡す方法を説明する。この方法はリンク or パラメータリンクと呼ばれる。
前述の３つのオペレータに加えて、LFO CHOPを追加する。
LFO CHOPは一定周期で変化する値を出力する。最初はTypeがsineに設定されているがここではramp（下図）に変更する。
Math CHOPを追加して、下図のように接続する。
Math CHOPは複数の値（チャンネル）の演算やレンジ変換等を行う。
ここでは下図のように、RangeタブのTo Rangeの最大値を360に変更する。
Math CHOPの右下の＋をクリックしてアクティブにする。
Transform TOPを選択して、パラメータをTransform TOPに切り替える。
LFO CHOP上でドラックして、パラメータのRotate文字にドラックする。
下図のメニューが表示されるので、CHOP Referenceを選択する。
バナナが回転するアニメーションを作成することができた。リンク状態は点線で表示される。
回転スピードが速い場合は、LFO CHOPのFreqency（周波数）を下げる。
Network EditorのBackdrop（背景）に各オペレータの状態を表示することができる。
オペレータの右下（下図）にある青いボタンを押すことでBackdropに表示される。
これにより、処理過程を比較/確認しながら試行錯誤できる。
複数のオペレータの状態を表示することもできる。その場合は、背景が自動分割されて表示される。
最終処理結果にはOut TOPを用いる。前述のようにOut TOPをBackdropに表示することで確認できるが、別ウィンドウとして表示したり、フルスクリーン表示することもできる。
Network Editor左上（下図）のOpen Viewer（白四角アイコン）をクリックする。
別ウィンドウにOut TOPの処理結果が表示される。ウィンドウは拡大・縮小可能。
TouchDesignerではサウンド解析するオペレターが複数用意されている。
今回はAnalyze CHOPを利用して、音の大きさ（音量）に反応する数値を取得する。
Audio File In CHOPとAudio Device Out CHOPを追加してワイヤリングする。
通常はこれだけでサンプルミュージックが再生される。もし、音が出ない場合はAudio Device Out CHOPのパラメータ（下図）のDriverやDeviceを変更してみる。
今回は単純にするためにAudio File In CHOPのパラメータでモノラル音声（下図）に設定しておく。
プログラム中は音を停止させておきたいことも多い。音の再生/停止はスペースキーを押すことでも可能だが、この方法ではプログラム全体が停止する。Audio Device Out CHOPのActiveをOFF（下図）にする方法であれば、音は出力されないだけで解析処理はプレビューできる。
下図のようにAudio File In CHOPからAnalyze CHOPをワイヤリングする。
Analyze CHOPは、平均値や最大値等、様々な値を取得可能なオペレータ。
Analyze CHOPのパラメータのFunctionには多数の設定があるが、RMS Power（下図）に変更する。RMS（二乗平均平方根）による解析値が、人間が感じる音量に近いと言われている。他の設定も試して見ると違いがわかりやすい。
Analyze CHOPの前にAudio Filter CHOPを入れることで特定の周波数の音量を取り出せるが、どの周波数帯が適しているかは音楽によって異なるので今回は利用していない。また、音量だけではビジュアライズの表現としては限界がある。その場合はAudio Spectrum CHOPを利用して解析する手法（下映像）もある。
Height Map（高さマップ）とNormal Map（法線マップ）を利用すれば、疑似的な3D表現を作り出すことが可能。この仕組みを理解するためにはComputer Graphics技術の広範囲な知識が必要となる。ここでは、すでに組み上げたプロジェクトファイルを配布して、オーディオリアクティブに使える部分のみ解説していく。
以下URLからダウンロードする。
下映像のように左上のスライダーを動かすことで、Height MapのDisplacement Scaleを変化させて凹凸を変化させることができる。Movie File In TOPの読み込み画像をいろいろ変更してみよう。
Height Mapは地形データの生成にも使われる手法。ここからダウンロードした画像を読み込めば、下図のように地形のような表現が可能。
下図の点線部分を追加する。
Slider CHOPの流れで接続されているNull CHOP（null1）にAnalyze CHOPをワイヤリングする。
Movie File In TOPの画像をいろいろ入れ替えて試してみよう。
File > SaveもしくはSave As（別名で保存）から行う。
プロジェクトファイルは.toe（A TouchDesigner Environment file）という拡張子が付与される。
File > Quit TouchDesignerをクリックするか、ウィンドウ右上の×をクリックする。
