はじめに
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は接続されない。
- ちなみに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が便利