yoppa.org


芸大 – メディアアート・プログラミング I 2025

TouchDesigner実践 6 – プロジェクトの構造化とGUI、Container COMP、Widget COMP

TouchDesignerのプロジェクトは階層構造を持っています。作成しているプロジェクトの中に複数のオペレーターをまとめた「サブパッチ」のような構造を作ることが可能です。複数のオペレータをまとめるにはContainer COMPを使用します。Container COMPは、複数の入力と出力を設定したり、他のオペレータの値を参照することが可能です。さらに、このContainerの仕組みを応用してGUI (グラフィクスユーザーインターフェイス) が作成できます。Widgetというユーザーインターフェイスに特化したCOMPを使用してボタンやスライダーといった様々なパーツを組合せて独自のGUIを構築して画面上に配置したり、別ウィンドウで表示することが可能です。

スライド資料

サンプルファイル

プロジェクトの構造化

複数のシーン(画面)を切り替えるには?

  • 前回作成したオーディオビジュアルのプロジェクト
    • 一つだけで長時間持たせるのは難しい
    • 複数のシーン(モード?)を切り替えていくと飽きられない
  • しかし、全ての機能を一様にネットワーク化していくと巨大なものに…
    • どのように整理していくか?
    • Base COMPを利用して構造化していくと便利!

複数のオブジェクトを1つにまとめる

  • 前回の音の高・中・低域それぞれに反応する球を題材に

ダウンロード

オペレーターをまとめる手順

  1. まとめたいオペレーターを全て選択
  2. 画面を右クリックしてメニュー表示
  3. 「Collapse Sellected」を選択
  4. 選択した部分が1つのBase COMPに
  • 1つのCOMPにまとまった状態に!
  • 名前をつけてあげると、さらに分かりやすい

まとめたBase COMPをtoxファイルに保存して再活用

toxに保存

  1. 1つにまとめたBase COMPをミギクリック
  2. メニューから「Save content .tox …」を選択
  3. .tox 形式でファイル保存

保存したtoxを別のプロジェクトで使用

  1. 新規にプロジェクト作成
  2. toxファイルをドラッグ&ドロップ

TOXのサンプル

以下から5種類ダウンロード

tox1tox2tox3tox4tox5

In と Out

ダブルクリックして保存したBase COMPの内部を表示

  • 入出力
    • In 外部からの入力
    • Out 外部への出力
  • TOP、SOP、CHOPそれぞれに存在
  • 複数のInやOutを配置することも可能

複数のBase COMPを組合せ

詳細はパッチを作成しながら解説!

ダウンロード

複数のBase COMPの切り替え

手動版 (keyType In CHOP + switch TOP)

ダウンロード

複数のBase COMPの切り替え

自動版 (Auidoa Analysis COMPを使用して自動スイッチング)

ダウンロード

デザイナーモードとパフォームモード

例: フルスクリーンで表示しながら操作するGUIを別ウィンドウで表示

参考: Widget Tutorials