TouchDesigner最初の一歩① 基本操作
インストールが完了したら、まずTouchDesigner(以下TD)を起動してみましょう
1.TouchDesigner起動してみる
TDを起動するとまず、この画面が出ます。
この画面がデフォルトの画面になっています。(花が揺れているプログラム)
デフォルトで表示されている花の絵がすでにプログラムになっています。
TDは「オペレーター」と呼ばれる箱を繋げていくことでプログラムを作るヴィジュアルプログラミングツールです。
箱をつなげ、そのパラメーターをいじるだけで、大抵のことができてしまいます。
このデフォルトのプログラムでは、花の画像、ノイズの波形、という2つの入力から、結果として、揺れている花の画像を生成しています。(詳細は後ほど説明します。)
![](https://static.wixstatic.com/media/74887a_21de52112b9b4c318ea010f53cee4e20.png/v1/fill/w_980,h_515,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/74887a_21de52112b9b4c318ea010f53cee4e20.png)
2.基本操作と画面構成
まず、TDを使うためには3ボタン式のマウスがほぼ必須です(スクロールホイールがついているもの)
トラックパッドでの操作も可能ですが、かなりやりにくいです。
・基本操作
ざっくりと以下のようになっています。一通り試してみましょう。
左クリック : 選択
右クリック : プロパティ
左ドラッグ : 画面の移動
右ドラッグ : 範囲選択
スクロールホイール : 画面の拡大縮小
左ダブルクリック : オペレーター作成 (詳細別途説明)
・画面構成
![](https://static.wixstatic.com/media/74887a_e5a75d404a004c56937a97f01e0ae71b.png/v1/fill/w_980,h_514,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/74887a_e5a75d404a004c56937a97f01e0ae71b.png)
ざっくり5つに分けてみます
1.オペレーター
プログラムを構成していく箱です。周りの方眼紙のような場所すべてが、
オペレーターの配置可能な場所です。
2.オペレータープロパティ
選択しているオペレーターのパラメーターなどのプロパティーを表示しています。
ここで、パラメーターを設定します。
3.ツールバー
普通のツールバーです。保存管理や、環境設定など
4.パレット
TD上で使える便利ツールなどが入っています。
最初は使わないので、右上の×で消しておきましょう。
5.タイムライン
TDのプログラムはここで設定された、タイムラインに従って実行されます。
最初は無視して大丈夫です。停止ボタン「||」を押すとTD全体が止まってしまいますので
注意してください (スペースキーでも同様に止まります。注意)
3.プログラミングしてみる
簡単なプログラムを作ってみましょう
まず、何もないところで、左ダブルクリック。 (TABキーでも可)
以下のウィンドウが開きます。
これは、オペレーター作成のダイアログです。
白い文字でずらっと並んでいるものが、それぞれオペレーターです。
![](https://static.wixstatic.com/media/74887a_5ac582bb701a4efc83edcce42802cbde.png/v1/fill/w_980,h_513,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/74887a_5ac582bb701a4efc83edcce42802cbde.png)
上部に、COMP,TOP,CHOP,SOP,MAT,DATとタブが並んでいます。
TDでは、オペレーターの属性ごとに色分けされています。
今回は、紫色のTOPを使います。 (TOPは2次元画像を扱うオペレーターの種類です。)
(ここで、右上、「Basic」,「All」とありますが、「All」を選択してください。 表示されるオペレーターの数が増えます)
![](https://static.wixstatic.com/media/74887a_f06001e95991415ab5531a4710de656f.png/v1/fill/w_701,h_494,al_c,q_85,enc_avif,quality_auto/74887a_f06001e95991415ab5531a4710de656f.png)
オペレーターの中から「Movie File In」を選択してください。
以下のようなバナナの画像が表示されたオペレーターが作られます。
Movie File In TOPは画像や、動画ファイルを読み込むオペレーターです。
デフォルトでは、バナナのサンプル画像が読み込まれます。
![](https://static.wixstatic.com/media/74887a_7c94144340b241ab8cf7dfa0417ae2b0.png/v1/fill/w_980,h_514,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/74887a_7c94144340b241ab8cf7dfa0417ae2b0.png)
次にMovie File In TOPの隣に、Blur TOPを作成します。
先ほどと同じように、ダブルクリックして、Blur TOPを作成してみてください。
以下の画面のようになるはずです。
Blur TOPの右上に×が出ていますが、これはBlur TOPへの入力がないためエラーが出ています。
![](https://static.wixstatic.com/media/74887a_f31dbac062944a648b2c1a5feb09859f.png/v1/fill/w_980,h_503,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/74887a_f31dbac062944a648b2c1a5feb09859f.png)
次に、Movie File In TOPと、Blur TOPをつなげます。
Movie File In TOPの右側に空いている隙間(口?)を左ドラッグすると、青白いひものようなものが出てきます。
このひもを、Blur TOPの左の口までドラッグして離してください。
2つのオペレーターがつながりました。
![](https://static.wixstatic.com/media/74887a_4b439cac82a444e09200ee9d1c679c42.png/v1/fill/w_980,h_516,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/74887a_4b439cac82a444e09200ee9d1c679c42.png)
Blur TOPのほうにもバナナの画像が現れたと思います。
Blur TOPのバナナの画像をよく見てみると、少しぼやけています。わかりますでしょうか?
Blurは画像にぼかし効果を与える、オペレーターです。
オペレーターで与えた効果の結果が、そのままそのオペレーター上に表示されます。
ぼかし具合をいじってみます。
Blur TOPを選択した状態で右上のオペレータープロパティを見てください。
ここでブラーのパラメーターを調整します。
いろいろありますが、
Pre-Shrink ,Filter Size
上記の2つをスライダーを動かして、
Pre-Shrink :8
Filter Size :32
と変えてみましょう。
![](https://static.wixstatic.com/media/74887a_3141ee39edc144188b9a6abaa5dac47b.png/v1/fill/w_572,h_411,al_c,q_85,enc_avif,quality_auto/74887a_3141ee39edc144188b9a6abaa5dac47b.png)
パラメーターを変えてバナナの画像を見てみてください。
以下の画像のように、さっきと比べて、大きくぼやけていると思います。
![](https://static.wixstatic.com/media/74887a_c2c2b941f24d4f3198e8be1ab05b9e5f.png/v1/fill/w_980,h_515,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/74887a_c2c2b941f24d4f3198e8be1ab05b9e5f.png)
簡単ですが、TDの基本的な使い方はこのようになっています。
・箱を作って、つなぐ、パラメーターを設定して、効果をつける。
この操作の繰り返しです。
箱をどんどん作って、左から、右へ流れていくようにプログラムを作っていきます。
次回はもう少し、複雑なプログラムを作ってみましょう。