カナダのDerivative社が開発、販売しいるノードベースのビジュアルプログラミング環境。映像の高速処理、Arduino、Kinect、Oculus、照明機器等、各種デバイスとの連携も可能でインタラクティブなコンテンツの作成に適している。プロジェクションマッピングやライブ演出等のリアルタイム演出、メディアアートまで幅広く使われている。個人利用であれば機能限定（出力解像度1280×1280等）だが無料で使えるNON-COMMERCIAL版がある。

ノードベースプログラミングでは、下図のようにある機能を持ったノード同士を接続していくことでプログラミングを行う。処理の流れを理解しやすいノードベースツールを利用することで、アーティストやデザイナー自身がプログラミングを行うことが容易になってきている。

ノードベースツールは、TouchDesigner以外にも、vvvv、Max、Notch等、近年増加傾向にある。TouchDesginerのように、メインのEditorとして使うものもあれば、Houdini（下図左：NodeとNetwork）、Blender、Unity（下図右：Bolt）のように特定の機能に対してノードベースツールを利用するものもある。

ノードベースツールは、ツール毎に用語が異なる。
以下、TouchDesignerとMaxの呼び方を整理する。個人調べ。信号線は個人的呼び方。

TouchDesigner

• ノード：Node、Operator
• 信号線：Wire

Cycling’74 Max

• ノード：Object
• 信号線：Patch Cord

特に、TouchDesignerでは、OperatorをWireで接続していくことを「パッチング」「ワイヤリング」と呼んだり、「ノードを組む」という言い方をする場合がある。

TouchDesignerが使われている作品を、ここではほんの一部紹介する。
DerivativeサイトのShowcaseに数多くのプロジェクトが紹介されている。

＜ウェブ教材＞

ここではあえて紹介しないが、「touchdesigner」で検索すると多数の記事が見つかる。
Touch Designerはビジュアルクリエイターの中では広く普及しており、日本語情報も多数あるので、YouTubeの動画教材と合わせてウェブだけでも習得可能。

＜動画教材＞

TDSW（Tokyo Developers Study Weekend）では、Touch Designer、Houdini、Notchを含めてビジュアルクリエイター向けのチュートリアルが多数公開されている。
初心者でも順を追って習得していくことが可能で、凝ったテクニックも多数公開されている。

https://www.youtube.com/channel/UCKwb_ZPHs-DEzK9TdVl3_Ew

＜関連書籍＞

日本語書籍は2021年時点で以下の２冊だが、両書籍のみでも基礎から応用まで習得可能。

ビジュアルクリエイターのためのTOUCHDESIGNERバイブル

Visual Thinking with TouchDesigner　プロが選ぶリアルタイムレンダリング＆プロトタイピングの極意

TouchDesignerのNON-COMMERCIAL LICENSE版のインストール方法を解説する。詳しい手順は、デジタルクリエーション入門のオンデマンド映像参照。

①Derivativeアカウント作成

上記サイトにアクセスして、MY ACCOUNT > CREATE NEW ACCOUNTをクリックしてREGISTERページ（下図）に進み、必要な情報を入力する。USERNAMEは既に取得されているものは使えないので注意。

上図一番下のCREATE NEW ACCOUNTボタンをクリックしても、まだ登録は完了していないので、Account detailsの件名で届く確認メールのリンクをクリックして登録完了。

②ソフトウェアダウンロードとインストール

Derivativeサイトの右上のGET IT NOWをクリックして、DOWLOADページのWINDOWS DOWNLOADをクリックする。1.4GB程度あるので、時間を要する。

ダウンロードできたらインストーラを起動して、手順通りにインストールする。

③キーの作成（NON-COMMERCIAL LICENSE）

TouchDesginerを起動するとKey Managerが表示される。

UsernameとPassword（下図）を入力してSign Inをクリックする。

Non-Commercialライセンス（下図）をクリックして、Create Keyをクリックする。この作業は一度だけなので、次回起動からは表示されない。

Keyは1アカウントにつき10個まで作成可能。PCを変更したりした場合はKeyを増やして対応する。Non-Commercialライセンスでは一度作ったKeyは削除できない。

※アプリ起動時のキー作成がうまくいかない場合は、Machine nameとSystem Codeを利用してDerivativeサイトでキーを作成する方法でうまくいく場合がある。詳細は以下のサイトを確認。
https://docs.derivative.ca/Creating_a_Key

①起動

デスクトップショートカット or アプリ検索により起動する。

Defaultではサンプルプロジェクト（上図）が読み込まれるが、Edit > Preferences（下図）を変更することでBlank（空の）プロジェクトで起動できる。

②終了

File > Quit TouchDesignerをクリックするか、ウィンドウ右上の×をクリックする。

下図が大まかなUI外観（クリックして拡大）。

ネットワークエディタ上でオペレータを追加してワイヤで接続するのが、TouchDesignerの基本的なプログラミング手順。初心者はパレットブラウザやタイムラインを使うことはない。

ここではネットワークエディタのビューの操作のみ説明する。オペレータの操作に関しては後述する。
ビューを縮小しすぎると上の階層に移動するので、ビューを拡大してもとの階層に戻す。

ビュー操作に関わるショートカットキー

• Hキー：ネットワークエディタの全体表示
• SHIFT+H：選択オペレータを拡大表示

TouchDesignerでは様々な機能のオペレータを使うことでプログラミングを行う。オペレータには多数のタイプがあるので、使いながら少しずつ覚えていく。

サンプルプロジェクト（下図、第２階層）には、以下のオペレータがある。

• Movir File In TOP
• CHOP to TOP
• Noise CHOP
• Displace TOP
• Geometry COMP
• Out TOP

＜オペレータのファミリ（種類）とタイプ＞

OP Create Dialogを表示して確認する。
TABキーもしくはネットワークエディタの何もないところでダブルクリックする。

タブ（上図）をクリックすると、オペレータのファミリ毎に分類されて、様々なタイプのオペレータが表示される（下図）。色分けされているのでわかりやすい。

以下は、ファミリの特性。

• COMPs（Compornents）：UI、プログラムの構造構築、3Dシステム構築
• TOPs（Texture Operator）：静止画、映像データを含めた2D画像処理用
• CHOPs（Channel Operator）：数値処理、演算、デバイス入出力
• SOPs（Surface Operator）：3Dオブジェクト処理
• MATs（Material）：3Dのマテリアルとシェーダー処理、SOPと共に使用
• DATs（Data Operator）：スクリプト処理、データ格納、デバイス入出力
• Custom：独自開発のオペレータの登録、エキスパートレベルでないと利用しない

＜オペレータタイプの確認＞

パラメータウィンドウでの確認

オペレータには固有のOperator nameが付けられており（変更可能）、パラメータの呼び出しに用いられる。

Info表示での確認

オペレータ上でマウスのホイール（真ん中ボタン）を押して、Infoを表示する。

＜オペレータの呼び方＞

「タイプ名＋ファミリ名」で呼ばれる。

NoiseのCHOPの場合は、Noise CHOP。
Nullのように6種類のオペレータにある場合は、Null COMP、Null TOP、Null CHOP・・のようになる。

＜アクティブ/非アクティブ＞

オペレータにはアクティブな状態と非アクティブな状態がある。
サンプルプロジェクトのGeometry COMPは最初からアクティブ状態。

オペレータの右下の＋キーをクリックすることで切り替えることができる。

オペレータ毎にアクティブ状態でできることは異なる。

TouchDesginerのネットワークエディタには階層があり、階層構造を持つことで複雑なノードの組み合わせを単純化することができる。プロジェクトの構成やオペレータの種類によって階層数は変動する。

現在位置の階層はメニューの下図で確認することができる。

「/（スラッシュ）」で階層が表記されている。
「>>」が表示されている場合は、さらに下の階層があることを示している。

＜階層の移動＞

マウスホイールの場合

• 上の階層への移動：Network Editorを縮小し続ける
• 下の階層への移動：階層の存在するオペレータを選択した状態で拡大し続ける

キーボードショートカットの場合

• 上の階層への移動：uキー
• 下の階層への移動：階層の存在するオペレータを選択した状態でiキーもしくはenterキー

＜サンプルプロジェクトの階層＞

サンプルプロジェクトには3階層が存在する。

ルート（最上位位置）の第一階層には、以下の３つのオペレータが存在する。

• Container COMP（名称：project1）
• Window COMP（名称：perform）
• Base COMP（名称：local）

第２階層が最初に開かれていた階層であり、第１階層のContainer COMPの中身であることがわかる。

第２階層にはTOPとCHOPがあるが、これらに内部階層は存在しない。
Geometry COMPにのみ階層が存在するので、オペレータの右下＋をクリックして非アクティブにする。オペレータを選択した上でiキーをクリックする。

第３階層のアドレスには「>>」がないので、これより下には階層がないことがわかる。

第３階層（Geometry COMPの中）には下図のようにSOP、TOP、MATが存在する。
Geometry COMPには様々な使い方ができるので、常に同じ構成とは限らない。

パラメータウィンドウを利用して、各オペレータのパラメータを設定することができる。

＜固定位置に表示＞

サンプルプロジェクトでは右上に表示されており、オペレータを選択することで、そのオペレータのパラメータに切り替わる。
Pキーを押すことで表示/非表示を切り替えることができる。

＜任意位置に表示＞

オペレータ（非アクティブ）上で右クリックしたメニューからParametersを選択することで、任意の位置にパラメータウィンドウを表示可能。

下図のように複数表示することもできる。
任意位置のパラメータウィンドウは、オペレータの選択を変えても元のオペレータのパラメータ表示のままで切り替わらない。

①パレットブラウザを閉じる

パレットブラウザは使わないので、下図の×を押して閉じる。

②ネットワークエディタを空にする

ノードを組んでいく場合は、下図のようにサンプルプロジェクトのオペレータは全て削除してから行う。
Ctrl+Aで全選択（or 右ドラックで囲む）してDeleteキーで削除。

③オペレータの追加

ネットワークエディタをダブルクリック or TABキーでOP Create Dialogを表示する。

OP Create Dialogの検索窓に目的のタイプ名を入力すれば探しやすい。

TOPファミリから、以下の３つのオペレータを追加する。

• Movie File In TOP　外部の画像や映像の入力
• Transform TOP　移動/回転/スケール等
• Out TOP　最終出力先であるWindow COMPへの出力

ワイヤリングしていない場合は下図のようにError表示されるが問題ない。

④オペレータの選択/移動/削除

• 選択：マウスの左クリック
• 複数選択：SHIFTキーを押しながら左クリックするか、右ドラックで囲む。
• 移動：マウスの左ドラック
• 削除：選択した状態でDeleteキー

⑤ワイヤリング

オペレータには出力を持つもの、入力を持つもの、入出力を持つものがある。
出力と入力を接続（ワイヤリング）することで信号を送ることができるようになる。

下図のようにMovie File TOPの右の穴付近からドラッグして、Transform TOPの左の穴付近に接続する。逆から接続することもできる。

同じ手順でTransform TOPの出力から、Out TOPの入力に接続する。
エラーが消えて、すべてのオペレータにバナナが表示される。

⑥ワイヤの削除

ワイヤ上で右クリックしてDisconnectする。

⑦オペレータのインサート

ワイヤ上で右クリックしてInsert Operatorからオペレータを追加した場合は、ワイヤの途中でインサートされる。

下図ではMonochrome TOPをインサートしている。

⑧オペレータ追加と同時にワイヤリング

オペレータの出力部分で右クリックするとその場でOP Create Dialogが表示される。
この方法でオペレータを追加した場合は自動的にワイヤリングされる。既にワイヤリングしていた場合はInsertになる。

①Movie File In TOP

Movie File In TOPは、映像データや静止画データを読み込むことができるTOP。
下図のFileフィールドの右の「＋」をクリックして、読み込むデータを変更することができる。

TouchDesignerには最初からいくつかのサンプル画像（下図）が準備されている。NON COMMERCIAL版は1280×1280が上限なので、それ以上の解像度のデータを読み込むとエラー表示されるので注意。

②Transform TOP

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を追加する。

LFO CHOPは一定周期で変化する値を出力する。最初はTypeがsineに設定されているがここではramp（下図）に変更する。

②Math CHOPの追加

Math CHOPを追加して、LFO CHOPの出力とMath CHOPの入力を接続する。

Math CHOPは複数の値（チャンネル）の演算やレンジ変換等を行う。
ここでは下図のように、RangeタブのTo Rangeの最大値を360に変更する。

③Math CHOPからTransform TOPのRotateへリンク

Math CHOPの右下の＋をクリックしてアクティブにする。

Transform TOPを選択して、パラメータをTransform TOPに切り替える。
LFO CHOP上でドラックして、パラメータのRotate文字にドラックする。

下図のメニューが表示されるので、CHOP Referenceを選択する。

バナナが回転するアニメーションを作成することができた。リンク状態は点線で表示される。

回転スピードが速い場合は、LFO CHOPのFreqency（周波数）を下げる。

Customを除いた6種類のオペレータにはすべてNullオペレータが存在する。Nullはそれだけでは機能はなく、受け取った値をそのまま出力するだけのオペレータである。

例えば、異なる種類のオペレータに値を受け渡す場合、一つのフローの最後にNullを使うことで、フローの中で変更があった場合でも値の参照等には影響を及ぼさない。Nullを活用してノードを組んでいく方が効率的にプログラミングを行うことができる。

Network EditorのBackdrop（背景）に各オペレータの状態を表示することができる。
これにより、処理過程を比較/確認しながら試行錯誤できる。

オペレータの右下（下図）にある青いボタンを押すことでBackdropに表示される。
複数のオペレータの状態を表示することもできる。その場合は、背景が自動分割されて表示される。

Defaultでは、TOPとCHOPのみ表示可能となっている。
Geometryを表示したい場合は、Network Editorを右クリックして表示されるメニュー（下図）からBackdrop Geometryを有効にする。

最終処理結果にはOut TOPを用いる。前述のようにOut TOPをBackdropに表示することで確認できるが、別ウィンドウとして表示したり、フルスクリーン表示することもできる。

①Viewerによる表示

Network Editor左上（下図）のOpen Viewer（白四角アイコン）をクリックする。

別ウィンドウにOut TOPの処理結果が表示される。ウィンドウは拡大・縮小可能。

②Perform Modeによる表示

Network Editorで編集する状態をDesigner Modeと呼び、プロジェクター等でパフォーマンスを行う場合にはPerform Modeに切り替える。Perform Modeにすることで最適化されて高速に処理が行われる。

Perform Modeへの切り替えはF1キー（環境によってはfn + F1）を押す。Designer Modeに戻すときはESCキーを押す。
Defaultでは、Perform ModeのウィンドウにはBorder（上部バー）が表示される。

Borderを非表示にして、フルスクリーンで表示したい場合は、Network Editorのルート（下図）に移動して、Window COMP（名称：perform）の設定を変更する。

Opening Size: Fill、Borders: offにすることでフルスクリーン表示にできる。

出力画像の解像度は、Container COMP（名称：project1）のパラメータのLayoutタブの中のWidthとHeightで設定可能。Non-Commercialライセンスでは1280×720が上限。

①プロジェクトファイルの保存

File > SaveもしくはSave As（別名で保存）から行う。
プロジェクトファイルは.toe（A TouchDesigner Environment file）という拡張子が付与される。

※プロジェクトの規模が大きくなったり、複数人で共同で作業する場合は、Project Folderを利用したり、組んだノードの一部分だけをパーツとして保存できる.toxを利用することもできる。

②プロジェクトファイルを開く

Touch Desinerを起動後、File > OpenもしくはOpen Recentから行う。
その際、すでに開いているプロジェクトは終了された上で指定のファイルが開かれる。

toeファイルをダブルクリックして直接起動することもできる。