![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/5fc2134b-42d4-453f-b813-ffbf07bcde38_rw_1200.jpg?h=c823d3abef16f0a8c227cf8f8fd552a4)
1. オーディオリアクティブ表現とは
音に反応してビジュアルをリアルタイムに生成する表現手法であり、古くからMacやWindowsのメディアプレイヤーにサウンドビジュアライザーとして搭載されていることが多い。オーディオリアクティブなコンテンツを制作するツールとしては、After Effects、VJ系ソフト、Cycling’74 Max、Unity、近年ではウェブサービス(一例:https://musicvid.org/)も存在する。
オーディオリアクティブ表現は、広い意味ではオーディオビジュアルアートの中にも含まれるが、オーディオリアクティブはリアルタイムに音データを解析してビジュアル化するものであり、編集によってオーディオビジュアルとしての相乗効果を生んでいるものとは仕組みが異なる。作品制作の上ではこれらの手法を組み合わせて制作しているものも多く、近年では照明やロボット技術との連動など、多様な表現手法が生まれている。
2. 今回の演習
TouchDesignerを利用したAudio Reactive表現に関する演習を行う。
下映像の楽曲は演習とは異なる。
下映像の楽曲は演習とは異なる。
参考)その他のチュートリアル
画像を疑似3D化した上でHeight Mapの変化量に音の大きさを適用したもの。
他にも、YouTubeで「audio reactive touchdesigner」で検索すれば、様々なチュートリアルを見つけることができる。
Stable Diffusionを利用したAudio Reactiveの事例もある。
3. 準備
3.1 実験用画像データの準備
実験段階で東京都立大学のロゴを利用する。都立大学生はダウンロード可能。授業内で指示する。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/b82e3627-2d25-4ce0-b5a7-4a0ab47cf3b4_rw_1200.jpg?h=b029d8d76f14050bdfdead4b312ae48d)
3.2 楽曲データの準備
YouTube Studioのオーディオライブラリからダウンロードする。今回は音の大きさのみを解析するため、音の大きさのメリハリのあるもの(静かな部分とリズムが入るくらい)が合いやすい。
今回はアンビエントジャンルのBeyond(下図)を利用する。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/b3e7fcbd-8c5d-4917-96b2-a674c377930f_rw_1200.jpg?h=42fb5b71b5756f3b8459bee7c68d6e4f)
3.3 作業フォルダの作成
下図のように任意の名前のフォルダを作成して、楽曲データ、画像データ、TOEファイル(TouchDesigner Environment file)を整理する。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/82f8ea63-7c1b-4340-862a-5220c089a271_rw_600.jpg?h=0c7400385fdf1b7a435c8cbfcc96757b)
3.4. TouchDesignerの起動
TouchDesignerを起動後、サンプルデータの削除、左のパレットを閉じる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/c6b0e23c-2e17-43f2-a9b2-cec3a45922f1_rw_1200.jpg?h=a638d322cca6e48414f902c90687dc07)
Fileメニュー > Saveから、作業フォルダにtoeファイルを保存する。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/cd21d977-6878-4ba1-b27a-ff9a3d9ff20d_rw_600.jpg?h=4abd27d9249bb80ff5af39bb34cba698)
4. 画像へのオーディオリアクティブ
4.1 都立大ロゴ画像の表示
・Movie File In TOP
Fileからバナナ画像(Banana.tif)をtmu_logo.pngに変更する
・Transform TOP
Background Colorを1, 1, 1, 1で白に変更する
Comp Over Background ColorをONにする
・Out TOP
必要に応じてDisplayボタン(Background表示)をONにする
Fileからバナナ画像(Banana.tif)をtmu_logo.pngに変更する
・Transform TOP
Background Colorを1, 1, 1, 1で白に変更する
Comp Over Background ColorをONにする
・Out TOP
必要に応じてDisplayボタン(Background表示)をONにする
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/06bd39a2-b86e-4f75-b856-2358f3b2c21e_rw_1200.jpg?h=14901a863bd10522b511d68b4135fe83)
4.2 回転実験(任意)
※実験後、削除する
・LFO CHOP
Type: Ramp
・Math CHOP
To Range: 0〜360
・Null CHOP
Transform TOPのRotateにパラメータリンク(CHOP Reference)
Type: Ramp
・Math CHOP
To Range: 0〜360
・Null CHOP
Transform TOPのRotateにパラメータリンク(CHOP Reference)
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/c6a5b746-82b0-4e78-b702-80bb3f7de675_rw_1200.jpg?h=09a4cf4963b7447b9bc30fd85ed0ff0d)
パラメータリンク元を含むオペレータを削除する場合は、リンク先のオペレータのスクリプトを表示させて削除する必要がある。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/f987cabb-3315-4a3b-b8e5-074edcf8746b_rw_1200.jpg?h=1d944c2fd26cb8b7b6f0db331a71324e)
4.3 音の大きさの解析
・Audio File In CHOP
Mono: ON
・Audio Device Out CHOP
再生したままミュートにしたい場合はBypass(矢印アイコン)をクリック
・Analyze CHOP
Function: RMS Power
・Trail CHOP
数値変化の確認用
Mono: ON
・Audio Device Out CHOP
再生したままミュートにしたい場合はBypass(矢印アイコン)をクリック
・Analyze CHOP
Function: RMS Power
・Trail CHOP
数値変化の確認用
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/ddb736ec-37d7-4281-aead-9a8d5e2552b1_rw_1200.jpg?h=85e8af2df1b66fdc905c810cec39eac2)
4.4 音の大きさをロゴのスケールへ反映
・Math CHOP
To Range: 0.9〜1.2程度に変更
・Null CHOP
Transform TOPのScaleへパラメータリンク
To Range: 0.9〜1.2程度に変更
・Null CHOP
Transform TOPのScaleへパラメータリンク
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/c95b164a-535c-4f23-847c-4ec59c8a155a_rw_1200.jpg?h=146d5f9c6be291e48e60d2fcb9572a5c)