前橋工科大学 – クリエイティブコーディング2024
TouchDesigner中級編 3 – オーディオビジュアル 1
![](https://i0.wp.com/yoppa.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-204536.png?resize=1024%2C575&ssl=1)
今日の内容
- オーディオと映像が融合した「オーディオビジュアル」を探求
- 波形 (音量) ベースのオーディオビジュアル
- スペクトル (周波数) ベースのオーディオビジュアル
前回の復習
- 前回は主に波形 (音量) を元に音響の視覚化を考えていった
- 例えばフィルターを用いた解析 (ダウンロード)
![](https://i0.wp.com/yoppa.org/wp-content/uploads/2024/05/Screenshot-2024-05-22-145025.png?resize=1024%2C557&ssl=1)
前回の補足: audioAnalysys COMPを使う
- 前回のフィルターによる音域別の音量の取得
- audioAnalysis COMPを使用するととっても楽!
- Palette > Derivative > Tools > audioAnalysis
![](https://i0.wp.com/yoppa.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-202604.png?ssl=1)
audioAnalysis COMPの導入
- 前回のパッチがここまでシンプルに!
- 詳細は実際にコーディングしながら
![](https://i0.wp.com/yoppa.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-202755.png?resize=1024%2C568&ssl=1)
さらに応用
- 周波数帯域ごとの音量によってノイズをコントロール
- 詳細はコードで
![](https://i0.wp.com/yoppa.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-204536.png?resize=1024%2C575&ssl=1)
FFT解析
なぜ周波数解析が必要なのか?
- FFT (高速フーリエ変換) : 音を周波数の成分に分解する → そもそも何故この操作が必要なのか?
- 耳が音を聴いている仕組みを考える
つまり私たちは音を周波数成分の分解して聴いている!
![](https://i0.wp.com/uncommondescent.com/wp-content/uploads/2019/02/cochlea.gif?ssl=1)
FFTとIFFT
- FFT (高速フーリエ変換) : 波形を周波数成分へ
- IFFT (高速フーリエ逆変換): 周波数成分を波形へ
![](https://upload.wikimedia.org/wikipedia/commons/2/20/Convolution_FFT_and_IFFT.jpg)
STFT (短時間フーリエ変換)
実際に解析する際には、一定の時間で信号を切り取って解析していく
- 切り取る信号の時間 → FFT Length (2の累乗のサンプル数)
- 窓関数 (Windowing)
![](https://i0.wp.com/jp.mathworks.com/help/dsp/ref/stft_output.png?ssl=1)
このFFT解析結果をプロットしたのがスペクトログラム (Spectrogram)
![](https://upload.wikimedia.org/wikipedia/commons/c/c5/Spectrogram-19thC.png)
TouchDesignerでFFT基本
- Audio Device in CHOPで入力した信号を、AudioSpectrum CHOPでFFT解析
- その結果をCHOP to TOPでテクスチャーに
![](https://i0.wp.com/yoppa.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-205738-e1717675133312-1024x544.png?resize=1024%2C544&ssl=1)
ちょっと工夫
- 左右のチャンネルで別々にFFT
- Rampで着色
- 左右線対称になるように配置
![](https://i0.wp.com/yoppa.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-211006.png?resize=1024%2C454&ssl=1)
さらに工夫
- 座標を変換して波紋のようなパターンに!
![](https://i0.wp.com/yoppa.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-211811.png?resize=1024%2C464&ssl=1)
応用
- 波紋のパターンを3D化
![](https://i0.wp.com/yoppa.org/wp-content/uploads/2024/06/image-1.png?resize=1024%2C568&ssl=1)
いろいろ詰めあわせ
いろいろ詰めあわせセットを作ってきました!
![](https://i0.wp.com/yoppa.org/wp-content/uploads/2024/06/Screenshot-2024-06-07-055236.png?resize=1024%2C563&ssl=1)
アンケート
本日の講義に参加した方は以下のアンケートに答えてください