TouchDesigenr Beginners' workshop vol.002 2017/07/17

1. TouchDesigner User Group Japan / Dan IWASAKI @ Imagineers’ Guild

2. 作品例

3. Box
https://www.youtube.com/watch?v=lX6JcybgDFo

4. Day for Night 2016 Recap
https://www.youtube.com/watch?v=KZdV-lhzC74

5. DEVISION on TouchDesigner #2
https://www.youtube.com/watch?v=tcz4a2NfG6U

6. Day for Night Artist Series: Refik Anadol
https://www.youtube.com/watch?v=NHWHSDXj2q8

7. A/V live performance
http://www.ntticc.or.jp/ja/archive/works/herering/

8. モーションセンサ(Kinect)とLED/ムービングライトとの連携
https://www.instagram.com/p/BWPryzzAC3T/

9. TOKYO ART CITY by NAKED
http://tokyoartcity.tokyo/
http://derivative.ca/events/2017/TokyoArtCity/

10. 外部デバイスやソフトとの連携
USB OSC
USB/MIDI
MIDI

11. ハードウェアとの連携
Arduinoに接続されたデバイスの情報を、
LTE網(携帯電話回線)を経由して
TouchDesignerが取得して
インタラクションに反映

12. TouchDesignerとは

13. TouchDesignerとは？
 ノードベースの、ビジュアルプログラミング言語
 リアルタイムのインタラクティブ・コンテンツの制作によく用いられている
 プロジェクションマッピング、ビジュアル演出、インスタレーション、モーションセンサ
 作品のRapid Prototypingにも向いている。
 ユーザ層の幅が広い。
 プログラマだけではなく、アーティストやパフォーマー、デザイナ等も利用している。

14. TouchDesignerの特徴
 ノードベースの、ビジュアルプログラミング言語
 ノードもビジュアル表示
 安定度が非常に高く、そのままで商用利用も可能
 試行錯誤を簡単にでき、できあがったものはそのまま作品として使用できる
 いろいろなデバイスへの対応 Oculus、Viveなど
 Pythonや、GLSL等の言語を用いて拡張する事も可能
 日本のコミュニティの熱量が高い

15. ビジュアルプログラミングと従来型のプログラミング
旧来型の例 : OpenCV / C言語vvvv Pure Data
ビジュアルプログラミング言語とは、プログラムをテキストで記
述するのではなく、視覚的なオブジェクトで作成する手法

16. TouchDesignerの、得手／不得手
 スマホアプリ / ネイティブアプリ(Windows, OSX等)
 × バイナリ書き出しに対応してないため、問題外。
 Webコンテンツ
 × 通信自体は対応してるが、HTML書き出しなどは不可能。
 LIVE演出系
 ○ performモードは安定しており、イベント実績も多い。GUIもつくりやすいため、向いてる。
 インスタレーション系
 ○ さまざまな舞台向け機材との連携を想定されているため、向いてる。
 アトラクション / サイネージ / 常設系
 ○ 実行形式での書き出しはないものの、それに近い状態での運用が可能。向いてる。
 VR系
 ○ Oculus、VIVEなどに対応している。VIVEのHMDなしにも対応しており、向いてる。[

17. 開発元：Derivative社
 TouchDesignerの開発元はカナダ・トロントにあるDerivative社。
代表は写真のGreg Harmnovicで、現在9人ほどと、かなり小規模。
https://www.derivative.ca/

18. TouchDesignerの開発背景
 モジュラージャックシンセサイザの奏者だったGregは、音楽と同時に映像も生成したいと考
えた。
 1980年にノードタイプのCGプログラミングアプリケーション『PRSM』を開発。
 1982年、映画『TRON』で採用され、一躍有名になる。
『PRSM』は現在『Houdini』と名称を変更しているが、引き続きハリウッドにおけるデファク
トスタンダードなCGソフトのうちの一つ。
 しかし、Gregは演奏のようなリアルタイムでのCG生成への興味が強く、2000年に役員に
退き、Derivative社を設立。
 Houdiniをベースとしたリアルタイム3DCG生成アプリケーションTouchDesignerを開発、
リリースした。

19. 主な適用領域
Projection Mapping
Interactive Visualization
Live Show Control
High Performance Video Playback
Real-time 3D and Custom Shaders
Rapid Prototype to Application
https://www.derivative.ca/088/Applications/

20. TouchDesigner Users Group Japan
Regular workshop
Facebook Group

21. ライセンス
https://www.derivative.ca/wiki088/index.php?title=Licensing
無償版の大きな制限
・解像度(最大1280x1280)
・商用不可

22. 基本的な操作方法

23. 起動直後の画面
「パレットブラウザ」右上のボタンを
クリックして閉じる

24. データの流れとつながり
※データは左から右へと流れる。
↑
入
力
↑
出
力

25. 基本的な考え方①
デ
ー
タ
の
流
れ
デ
ー
タ
の
流
れ
OP OP OP

26. 基本的な考え方②
複数入力

27. OPの種類
Generator
データを読み込んだり、生成したり
外部のセンサの値を取得します
Filter
別のOPからデーターを受け取って加工します

28. つなぎ方の例

29. 基本操作① ネットワークの表示域の移動
左マウス+ドラッグで
ネットワークを動かす
↓ネットワーク

30. 基本操作② ネットワーク表示の拡大/縮小
中ボタン+ドラッグで
ネットワーク表示の拡大/縮小
←ネットワーク

31. 基本操作③ ネットワーク全体の表示
hボタンを押すと、全体表示になる。
↓ネットワーク

32. 基本操作④ 操作したいノードの選択
左クリックで、操作をしたいOPを選択
→選択したOPの情報が表示される
例：読み込む動画/静止画ファイル 等

33. 基本操作⑤ 選択したOPのズーム
Shift + h で、選択したノードをズームして表示

34. 基本操作⑥ 複数のOPの選択
右クリックをしながらドラッグすると
複数のOPの選択

35. 基本操作⑦ 複数のノードの移動
左ボタンを押しながらで、操作をしたい複数のノードを選択
→選択したOPの情報が表示される
複数選択した状態で左ボタンを押しながらドラッグ
→選択しているすべてのOPをまとめて移動
何もないところ左クリック
→ハイライトされている（緑枠）以外のOPの選択の解除

36. 基本操作⑧ ノードメニュー
ノードの上で右クリック
→ノード操作のためのメニューが表示される

37. 基本操作⑨ OPで生成されているデータの表示
ノードメニューの「view」を選択
→別ウィンドウが開き、動画等を表示
※開いたウィンドウは、通常のウィンドウ同様にリサイズ可能
右上の「×」をクリックすると閉じる

38. 基本操作⑩ ネットワークメニューの表示
何もないところで右クリック
→ネットワーク操作のメニューが表示

39. 基本操作⑪ OPのパラメーターの変更
「＋」ボタン、▼ボタン、■つまみなどを操作するこ
とで変更可能
【参考情報】
これらの値は、別のOPの出力値や、Python
スクリプトでも変更可能です
フォルダ名やファイル名に日本語が入っていると
正しく使用できません

40. workshop 01
表示している画像を変更しよう

41. workshop 01 : 表示している画像を変更しよう
Trillium.jpg Banana.tif
※Trillium.jpg も、Banana.tif も、サンプルとして、TouchDesignerがインストールされているフォルダにあります。
（Windows 088版の場合）
※フォルダ名やファイル名に日本語が入っていると正しく使用できません

42. Workshop 01 : ポイント
・動画/静止画を読み込むノード
「Movie File In」
・「File」で読み込むファイルを指定
【参考情報】
・静止画も動画も「Movie File In」で
読み込み可能
・日本語ファイル/フォルダ名はトラ
ブル多発の為使用しない方が良い。
・解像度が「1280x1280」を超える素
材は、長辺が1280pxに制限される。

43. Visual Programmingと従来型のプログラミング
旧来型の例 : OpenCV / C言語vvvv Pure Data
ビジュアルプログラミング言語とは、プログラムをテキストで記
述するのではなく、視覚的なオブジェクトで作成する手法

44. OPの操作 追加する１
方法１
ネットワークメニューから「Add Operatorを選ぶ」
方法２
ネットワークの何もないところを左ダブルクリック

45. OPの操作 追加する２
追加したいOP（例えば、Movie File In）を選択
【参考情報】
・右上の「Basic」「All」は特に理由がなければ、
「All」を選んでおいた方が良い【088のみ】
・左上の「Search」と薄く書かれている場所に、OP
の最初の文字を打つと、該当のOPがハイライト表示
される

46. OPの操作 ヘルプ表示
？ をクリックすると、OPの説明をWebブラウザで表示
ｉ をクリックすると、OPの情報を表示

47. OPの種類①
Generator
データを読み込んだり、生成したり
外部のセンサの値を取得します
Filter
別のOPからデーターを受け取って加工します

48. OPの種類②
背景が濃いOP：Generator
Movie File In：ファイルからの入力
Video Device In：カメラやキャプチャカードからの入力
Leap Motion：モーションセンサーからの入力
背景が薄いOP：Filter
Level：入力されたデータのレベルを変える
Cross：2つの入力をクロスフェードする
Tile：入力されたデータをタイル状に並べる
Out：出力する

49. OPの操作 OP同士をつなぐ1
①OPを配置する
【参考情報】
「TAB」キーを押しても「Add Operator」が開きます
②OPをつなぐ
繋ぐ元の出力コネクタを左クリック→ドラッグ
繋ぐ先の入力コネクタのそばで左ボタンを離す
（そばで線はつながります）

50. OPの操作 OP同士をつなぐ2-1
①
OPの出力コネクタを
右クリック
②
接続したいOPを選択
(接続できないものはグレーアウト)

51. OPの操作 OP同士をつなぐ2-2
③繋ぐ先のOPの位置を決める ④繋ぐ先のOPの位置を確定して左クリックする

52. OPの操作④ OPの変更・追加・挿入
OP上で右クリック
→「Change OP Type..」で
OPを変更できる
変更 追加・挿入
OP同士を繋いでいる線の上で右クリック（線が選択されると黄色になる）
→
挿入：「Insert Operator」でOPを、繋いでいる線の間に挿入
追加：「Insert Operator」でOPを、繋いでいる線のOPに並列に追加
どちらも、選択後、OPの選択画面が出るので、追加・挿入したいOPを選択

53. 新規作成のためにきれいにする
Ctrl-A -> Delete
で、すべてのOPを消して、新規作成の準備をする

54. workshop 02
TOPのOPをつないでみよう

55. workshop 02：TOPのOPをつないでみよう
例

56. workshop02：使えそうなOP
Generator(入力)
Movie File In:ファイルからの入力
Video Device In:内蔵カメラからの入力 Text：テキスト入力して生成した画像 Constant:指定した値の色
Level:コントラストやガンマ値などのレベルの変更 Cross:2つの入力を重ねる Tile:タイル状に並べる RGB to HSV:HSVカラースペースに変換

57. Workshop02：課題例
 動画ファイルと、内蔵カメラで撮影したものをリアルタイムに合成
 動画ファイルと、内蔵カメラで撮影したものをキーボードで切り替える

58. OPの種類
COMP : COMPonent Operator
TOP : Texture OPerator
CHOP : CHannel Operator
SOP : Surface Operator
MAT : MATerial
DAT : DATa operator

59. ○COMP : COMPonent Operator
TouchDesigner上のネットワークを作成する時に
使用する部品
ネットワーク内に置いてUIとして使用できるOPもある
外部ディスプレイ出力時に使用する「Window」もある

60. ◎TOP : Texture OPerator
画像ベースのデータを扱うOP
【参考情報】
動画は、連続した静止画になる

61. ◎CHOP : CHannel OPerator
モーションセンサー等のデータ、音声、MIDIデータ
を処理するOP
外部からの入力値を簡単に扱うことができる。

62. SOP : Surface Operator
3D モデリングの為のOP
ポリゴン、カーブ、パーティクルなどの画像の生成ができる

63. MAT : MATerial
3Dレンダリングの際に使用するデータ

64. ○DAT : DATa operator
外部とのデータのやりとりや、ネットワーク内でのデータ
の保持に使用

65. Operator Snippet
[Help]メニュー → [Operator Snippets]で起動
それぞれのOPを利用した
ネットワークのサンプル

66. TOPとCHOPを繋ぐには？

67. 種類の違うOPのつなぎ方①
①CHOPの値をつなぎたい先の
TOPのパラメータを表示する
②繋ごうとするCHOPの右下の、「＋」
マークをクリックする
③繋ごうとするCHOPの表示が変わる

68. 種類の違うOPのつなぎ方②
V→
④つなぐ先のTOPのパラメータの上で
マウスの左ボタンを離す。
(パラメータの上で、カーソルが「⇒」になり、
離すと、ダイアログが表示される）
V
④繋ごうとするCHOPの値の上で
マウスの左ボタンを押す
(カーソルが、 から、→に変わる) +

69. 種類の違うOPのつなぎ方③
V→
⑤CHOPの値で、TOPが制御できるようになる。

70. ポイント Null OP
データの流れの最後に「Null」OPをつける
→データの流れる先を作り、演算を確実に実施するため

71. workshop 03
OPをつないで自由に作品を作ってみよう

72. 【参考1】四則演算について：足し算
constant chopに、3と2を代入した箱が左側にあります。各constant chopからmath chop につなぎます。
次に、math chopの中身を見てみましょう。Combine ChannelsとCombine CHOPs を両方、Addにしてみてください。
上記の図と同じように、Mathの箱が5となったと思います。
これは、Combine CHOPsをAddにしたことによって、3+2=5となった。ということを表しています。
【課題】『3－2』 『3ｘ2』 『3÷2』 を、OPを使用して表現してみましょう

73. 【参考2】ブール演算
And / Or / ExOr などのブール演算も可能です。

74. 【課題例1】スライダーを使用した画像切替
画面上のつまみを左右に動かすことによって、バナナと蝶の画像を切り替えるネットワークを作ってみましょう
【ヒント】
つまみを左右に動かして制御するOPは、『COMP』内の『Slider』を使用します
画像を切替するOPは、『TOP』内の『Switch』を使用します

75. 【課題例2】 Audio Analysis
TouchDesignerを起動すると、左側に、メニューのようなものがあります。これは、左上のFileの下のopen Paletteボタン
で開いたり、閉じたりすることができます。画面を広く使いたいときは、閉じておくと良いでしょう。さて、その中で、
Tools>audioAnalysisを探してみてください。見つかったら、ドラッグ＆ドロップで画面に、ドロップしてみましょう。そうすると、
audioAnalysisのコンテナが画面上に現れます。
このあと使うchop タブのoperatorは、『AudioFile in』chop, 『audio device out』chop, 『null』 chop, 『select』
chopです。
どのような計算式を入力し、どのようにswitch topを作ると、次のような映像になるか、考えてみてください。
https://www.youtube.com/watch?v=gUo1dKl50Mc

76. その他の課題例
 カメラで入力したものを、リアルタイムにエフェクトをしてみる
 動画ファイルと、カメラで撮影したライブ画像をリアルタイムに合成する
 手の動きに合わせて、画像の分割数を変更する

77. まとめ

78. 自習方法の例
 Operator Snippet
 Derivative サイト内 Forum, Wiki
 書籍に掲載されていたり、好きだと思う演出をまねしてみる
 仲間と作品を作る

79. Operator Snippet
[Help]メニュー → [Operator Snippets]で起動
それぞれのOPを利用した
ネットワークのサンプル

80. Derivative サイト内 Forum, Wiki
Wiki内のTutorial Videoは、英語が分から
なくてもどうにかなりやすい
Forum -> Beginners は英語できないと
きついかも・・

81. Facebook内グループ
TouchDesigner Help Group(英語)
TouchDesigner User Group Japan(日本語OK!)

82. TouchDesigner Users Group Japan イベント
Regular workshop 制作イベント

83. アンケートのお願い
今後のよりよいワークショップの為、アンケートへのご協力をお願い致します。
https://goo.gl/forms/6yry0XhJot0Awd5m1

84. Fin.