はじめに

12/2 に福岡で行われたTouchDesigner（以下TD）のワークショップTouch in Kyushu vol.1に参加してきたメモ。
内容盛りだくさんのワークショップでレポートみたいに全部書くととっちらかりそうなのと、
ノードベースのプログラミング環境にしては珍しくUIが良いと思ったので、
今回はUI関連の話に限定して、筆者が特にここすげーとか覚えとこうとか思ったもののリストにします。
これからTD始めようとか、一度触ったけどよくわからなくてやめたという人の助けになればと思っています。

わかってる人にはつまらない内容かもしれませんが、うんうんそうだよね、と暖かく見てもらえるとうれしいです。
そんなことできたのか！とひとつでも思ってもらえたらさらにうれしいです。

記事の最後にワークショップ中に書き溜めたメモをそのまま置いておきます。
なんとなく何が行われたのかわかっていただけるかもしれません。

筆者のスキルレベルとしては

TDは他人の作ったプロジェクトを起動したことがある程度
openFrameworksとMaxは日常的に仕事で使っている

です。

用語

TD流の言葉遣いじゃないかもしれないですがこの記事では以下使います。
TDではどういうのか知っている方は教えてもらえるとうれしいです。
※末尾のメモではこの限りではありません。フィーリングで読んで下さい。

もの	この記事での表記
オペレーター	OP
オペレーターをつなぐ線	ワイヤ
オペレーターの入力口	インレット
オペレーターの出力口	アウトレット
オペレーターの型(TOP,CHOPなど)	カテゴリ
型の違うオペレーターの関連付け表示	矢印ワイヤ
同じ名前のオペレーターに複数の型がある場合の区別	`TOP/Constant`, `CHOP/Constant`などと書き分ける

では以下どうぞ。

UIすごい洗練されてるなーって思いました。

ノード系のグラフィックスプログラミング言語はいくつか触りましたが、TD超良かったです。
ちゃんと使う人のことを考えて設計されている感がありますね。
使い込めば不満は出てくるんだろうし現時点で何も不満がないわけじゃないですが、
今のところの感想としては超良いです。

ちなみによく使うショートカット

u : 上階層へ
i : 下階層へ
h : 俯瞰
p : パラメータウィンドウ（？）表示トグル
a : OPのアクティブ/非アクティブトグル
o : 全体のレイアウト確認
F1/esc : Performモード/復帰
Shift+L : 整列
Option+左右 : 階層移動のUndo/Redo
Option : 押している間全OPがアクティブになる

`OP Create Dialog`の出る場所

ダイアログの中央がマウス中央になるように出てきてくれる。
地味ですがうれしいです。

操作の仕方によってそれっぽいOP同士を勝手に繋いでくれる

インレット/アウトレットで右クリックしてOPを作るといきなりワイヤが繋がってる
ワイヤを右クリックからinsertOPができる
間のOPを削除すると両端を繋ぎ直してくれる
コピペ時もいい感じ
- A->Bと接続されている場合に両方コピペするとA'->B'も繋がってる
- BをコピペするとA->B'も繋いでくれる
  - ちなみにAをコピペした場合、例えBのインレットが(TOP/Compみたいに）複数受け入れ可能なものだったとしてもA'->Bは接続されない。

違うカテゴリのオペレーター同士を繋ぐ操作がちょっと特殊

この仕様は慧眼ですねー。いやほんとに。
なんでも繋げるようにしちゃうと一見便利ですごいツールっぽく見えるけど、ユーザーにとって意味不明な挙動をする原因になったり開発時にもデバッグが大変になったりすると思うんです。
そこをすっぱり切り捨てちゃうのは良い判断だなと思います。

パラメータウィンドウにドロップだったりOPをOPにドロップだったりいろんな操作があるのはちょっと戸惑いポイントですが・・・。

ワイヤの表示のこまやかさ

いまそのワイヤをデータが流れているかどうかがワイヤのアニメーションでわかる。
矢印ワイヤも同様。
上が流れてて下が流れてない。

それと、地味ですが矢印ワイヤがちゃんとマウスで操作できなそうに見えるのもポイントですね。
普通のワイヤと違ってモノクロで直線なのでそう見えるのかな？

ファイル指定系のOPがデフォルトで何か読み込んでる

TOP/Movie File InとかCHOP/Audio File Inとか。さっと試したいときに超便利でした。
動作を確認したいだけなのにOPを作るたびに毎回Load File...みたいなダイアログ開かなくても良いのはでかい。

中ボタンドラッグで値の編集

パラメータウィンドウ（OP選択中にpキーで出るやつ）の中の数値をマウスで編集できる。
例えばCHOP/Constantのvalueの上で中ボタンを押して左右にドラッグすると変化する。
そしてこれがすごいと思ったんですけど、上下ドラッグで動かす値のスケールが変えられます。
類似のUIを見たことがないんですがこの方式ってポピュラー？

Displayフラグで結果を確認しながら編集できる

各OP右下の青い丸いやつを押すと背景にそのOPの出力が表示される。
複数選択するといい感じに敷き詰めて出してくれる。
ありがたい。

フラグ立てても出るやつと出ないやつとあるんだけど何が違いなのかまだわかってない・・。

`o`で出るやつ

oキーを押すと左下に今いるネットワーク全体の簡略図みたいなものが出てきます。
マウス操作もできてすばらしい。

負荷チェックがお手軽

PaletteにあるTools->probeを使うとネットワーク全体の負荷チェックができる。
どの部分が高負荷かがわかるのでチューニングに役立ちそう。

ここがいまひとつ

全体的にUI素晴らしいんですが、これができればいいのに！ここが改善されればいいのに！というポイントもあるにはあります。
以下挙げていきます。
既にできるものがあったら是非教えてください。

トラックパッドでの中ボタン操作

ワークショップでは3ボタンマウスを使っていて、帰ってからトラックパッドで触ってみたんですが意外と不自由なく使えました。
しかし、中ボタンがないので中ボタンクリックを使う機能が使えないですね。
OPの情報を見たり、パラメータウィンドウで値の編集をしたり。
これらができればマウスいらなくなる気がするのでなんとかなれば良いなあ・・・。

※ありました。Preferences->GeneralにUse Alt+Right-Click alternative for Middle-Clickがありました。最高です。

範囲を指定してのビュー移動

hキーでの俯瞰視点移動はとても便利なんですが、ネットワーク内の特定の範囲だけ拡大表示したい場面がありますよね。
これができる機能がキーボードショートカットに欲しいですね。
例えば複数OPを選択した状態でhキー（もう一度押すと俯瞰へ）とか、hキー押しながら右ドラッグとか？

インレットから複数アウトレットに接続

例えばMaxだとワイヤをつなぐ際にShiftを押しっぱなしにしていると、ポチポチ連続でアウトレットを選択できるんですが、これができると良いですね。

キーボード操作の充実

グラフィカルなツールなんでしょうがないのかもしれませんが、基本的な操作にマウスやトラックボール、タッチパネルといったポインティングデバイスが要ります。
しかしスクリーンがどんどん広くなっていっている昨今、ポインティングデバイスが必須というのは根本的に辛い仕様に思えます。
キーボードから手を離さずに以下のことができるとものすごく快適になるなーと思いました。

キーボードのみでOP生成

TabキーでOP Create Dialogを開き、さらにTabでカテゴリを選択し、キーボード入力で絞込検索。
ここまでは完璧で快適なんですが、その後OPを選択して生成するところがマウス必須ですね？
これが例えばアローキーで選択してエンターキーで生成などできると良いですよね。

キーボードのみでワイヤ接続

OPが多くなってくると、全体を見渡せるスケールでのマウス作業が辛くなってきますよね。
ズームインとアウトを繰り返すのも無駄が多いので視点を変えずに選択的に編集できる手段が欲しいです。

パラメータウィンドウを移動

これができないのは端的に辛い

複数ウィンドウでPerformモード

UIの話ではないんですが・・・。
現段階でもモニタをまたいでのフルスクリーンはできるようですが、複数のCOMP/Windowにそれぞれ座標と大きさを指定してPerformモードができると大規模プロジェクションマッピングマンには嬉しいのではないでしょうか。
どうせ負荷高くなるからダメよってことかな。

バージョン管理

UIの話ではないんですが・・・。
手動でセーブするたびにナンバリングされたtoeファイルができるんですが、これ保存が手癖になってると辛い仕様ですね。。。

いちおうPreferences->General->Increment Filename on SaveでBackupフォルダに保存するよう設定できるようですね。
gitと併用したい場合はBackupフォルダをgitignoreしておくのが良いのですかね？
それでも最新のナンバリングファイルは親フォルダに残るんだよなあ・・・。
うちはこうやってるよ！っていう手法があったら知りたいです。

以下はワークショップ時に書いていたほぼ時系列のメモです

最新版のインストール 15240

事例・プロジェクトの紹介。

TDを勉強するにはここ！
https://www.derivative.ca/Archive.asp
https://www.derivative.ca/Blog/
https://www.facebook.com/groups/437766143072915/
https://qiita.com/advent-calendar/2017/touchdesigner

参加者の自己紹介
デザイン系の教員
グラフィック系の教員
クリエイティブコーダー
CG制作会社
音楽やってる学生
イベント企画制作

経験者と初心者に分かれてレクチャー。
経験者はベンさんに直接聞きながら。
初心者は松波さんから。

初心者コースにいきました。

Windowsはデバイスに強い
Macはオーディオに強い

おすすめはトラックボール

i,u,h,p
オペレーター
左ダブル/Tab

Tabでカテゴリ移動、キーボードで検索

COMP -> 環境？
3D -> 3D環境
Panel -> UI
Other -> Other

TOP -> TextureOperator
グレーアウトは使えない
濃い色がソースになり得るもの
絞込み検索できる

op出口で右クリックするとお手軽
線の上で右クリックするとお手軽

opのサイズ変更をくりっくで適当なサイズにしてくれる

OPにバツが出てるときは中ボタンで　内容を確認

CHOP -> チャンネルOP
センサー、オーディオ、ネットワーク
constant -> 変数
math/range -> 範囲を変える

同じカテゴリのOP同士はつなぐことができる

SOP -> Surface OP
3D系のオブジェクト
box プラス押してマウスでぐりぐりできる
右クリックからモデルジオメトリ
頂点インデックスとか情報が見られる

MAT -> マテリアル

DAT -> データ？

3Dちょっとレンダリングしてみる

Camera, Geometry, Light, Renderを置くと勝手につながる
Renderのpウィンドウでどれを使うか選択できる

geoの中身消して作り直すと、戻ると消えてる
RenderとDisplayのフラグをオンにする必要がある

geoの中に作る方法と、作ってからCOMPのGeoでgeoにする方法がある

geoにMATをつなぐときは左クリックで乗せるか
geoのpウィンドウのRenderにドラッグもしくは指定する

背景に色を付ける
TOP/Constant
解像度をあわせてoverにつなぐ
CompositeでOperationをoverにするのと一緒。こっちを使う
レイヤーの順序を変えられるし、入力いくつも扱えるし、演算変えられるし。

お作法としてoutを繋いでおく

mouseInでマウス入力が取れる

compでサイズの違うやつを扱うときはPウィンドウでTransform/Pre-Fit Overlayを操作

mouseInからMath->nullでCHOP EXPORTでcompのTransformをコントロール

mouseIn が動かない！
Mutekでも60人中2,3人あったらしい
プログラマへバグレポしてもらう
その後アプリ再起動でなおったっぽい？いつの間にか正常に動いてた。

対処法
COMP->ContainerをPanelにつなぐ(ContainerをPanelのPウィンドウにドロップ)
Panelでinsideu insidevを受けてtx tyで出す

サブパッチ作れるよ
右クリックから保存

performモード
最終バージョンでは無駄なくしたい
複数ウィンドウあるとつらいのでひとつにす

performというCOMP->Windowがトップにある
pウィンドウで選択したopをフルスクリーン表示できる
TOP,CHOPが選べるけど、Containerを選んだほうがサイズ調整が柔軟で良い
NON Comercialだと1280x720サイズしかレンダリングできないけど、拡大で良ければこの方法でアウトプットはできる

左上のアイコンクリックか、F1(Fn+F1)でperfomeモード
escで復帰

DAT/Monitorが便利

monitor選ぶとどのモニタでフルスクリーンするか選べる
枠線を消すにはBorder

事前にモニタサイズがわからない場合
FillLocationを選ぶと良い
DPIレートとかRetinaモードとか注意

インスタレーションではCursorVisible使おう
WhenMoving!!!

メニューDialog/Window Placement
チェックStart in Perform Mode

複数画面を使いたい場合、全ウィンドウにまたがるようなサイズのContainerを作って
All Monitorsを選ぶ
サイズ変更時、数値入力時に演算できるよ

Containerのワイヤーは下から上

２つのContainerをContainerに繋いで片方のオフセットを動かす方法もあるけど
ContainerのChildrenタブで動かすこともできる。こっちが良い。

3Dを2DにレンダリングしてからWindowに当てると、3Dのカメラ操作とかが失われてちょっと辛い。
3Dのままなら、Containerにコンポジットしてもインタラクティブなまんま

いままでのフルスクリーン話はHigh Sierraだとできるけどそれ以前はちょっと方法が違う

モニタ毎にWindowCOMPを用意する

CHOP/performにスクリプトを書いて設定する
op('window1').par.winopen.pulse()

opの切り替え/ルーティング
切り替えたい奴らの子にswitchをつなぐ

切り替えの方法としてButtonをExportしてドカーン

exportの仕方は、D&Dの他にも
つなぐ先のpウィンドウでexpressionを手打ちする方法もある
op('null5')['chan1']

オーディオヴィジュアルやります！
AudioFileIn->Select -> CHOP to
CHOP to にSOP/Lineをつなげて合成
COMP/GeometryにしてMAT/constantで色つけ
CamとLightを作ってレンダリング
compからfeedback->blur->levelで

負荷チェックはPalette/toolsからProbeを作る
F2でPerformanceMonitorも良い下のAnalyzeボタンを押す

Dialog/Textport and DATからpythonが打てる
DAT/Textをアクティブにしてpythonが打てる
非アクティブで右クリック->RunScriptで実行
実行結果はTextportで確認できる

opのパラメータにスクリプトからアクセスしたいばあい、
pウィンドウの望みのパラメータの上で右クリック->Copy Parameter
使いたいところでPasteすれば良い。普通にテキストでペーストはできないので、どこか適当なConstantとかにReferenceとしてペーストしてから改めてテキストをコピーすると良い

オーディオ信号はどんなデータなの？
マルチサンプルデータ。長さを持った値。
CHOP/Constantもpウィンドウでマルチサンプルにすることができる

Palette/AudioAnalysisがすごいぞ

パーティクルはPaletteのGpuParticlesで行ける
SOPにメッシュを突っ込めばエミットする場所を変えられる

中ボタンでValueを動かせるぞ！

Help/OperatorSnippetsが便利

TD初心者が一日触ったところでUIの素晴らしさについて語る