TouchDesignerで、Geometryの描画順（重ね順）を指定する方法

Geoの描画順

1Draw Propertyに優先度を入力する。0が一番最後に描画され上になり、数字が増えるほど、最初に描画され、下の方に表示される。

TDの公式ドキュメントはこちら
https://docs.derivative.ca/index.php?title=Transparency

インスタレーションなどでは、アプリが自動起動させて、システムを起動させる必要があります。その際に、Windowsのスタートアップやプロセス監視アプリから、.toeを実行できるショートカットが便利です。

また、インスタレーションなどでは、TouchDesignerから起動するのではなく、TouchPlayerという再生環境で実行するのが好ましいです。

.toeのショートカットを作成する

最初に、.toeのショートカットを作成します。起動させたい.toeファイルを右クリックし、「ショートカットの作成」を選択します。

すると、ショートカットが同じフォルダに作成されます。

この状態で、ダブルクリックしても、shortcut.toeが、TouchDesignerから開かられるので、ご注意を。

TouchPlayerのショートカットを作成する

次に、TouchPlayerのショートカットを作成します。TouchPlayerは、TouchDesginerの実行ファイルと同じフォルダにインストールされています。デフォルトのインストール先は、C:\Program Files\Derivative\TouchDesigner099\binです。

TouchPlayer099.exe(将来的にバージョンが変わった場合には、ファイル名が変わる可能性あり）というファイルがあるので、これのショートカットを上と同じく作ります。

作ったショートカットのプロパティを表示します。

プロパティの中の「ショートカット」タブを選択します。「リンク先」という項目のテキストフィールドに入っている文字列をすべてコピーします。TouchPlayerへの絶対リンクの文字列になります。

.toeのショートカットにTouchPlayerを設定する

最初に作成した.toeへのショートカットのプロパティを表示します。

リンク先の項目を選択し、カーソルを一番先頭に移動させます。

ここに、コピーしたTouchPlayerへの絶対パスをペーストします。次に、一文字だけ半角スペースを入れます。テキストフィールドには、こういった文字列が入ることになります。

"C:\Program Files\Derivative\TouchDesigner099\bin\TouchPlayer099.exe" C:\Users\banana\shortcut.toe

設定を保存して、ショートカットをダブルクリックすると、TouchPlayerから自動的に.toeが起動します。このショートカットをスタートアップに登録すると、Windowsが起動したときに、自動的に実行されます。

TouchDesignerでは、メイン（ルート）のタイムラインとCOMPごとのタイムラインを複数持つことができます。”timeline1″は、メインのタイムラインのフレーム数、null1は、base COMPが持つタイムラインのフレーム数を出力しています。それぞれ、違うフレーム数とタイムラインの最終点が違うことが確認できます。

今回のサンプルファイルはこちら
https://github.com/arkwknsk/touchdesigner/tree/master/tips/multi-timeline

Base COMPにlocal timelineを追加

新規プロジェクトに、Base COMPを追加。Base COMP上で右クリックし、”Add Component Time”をクリック。

すると、Baseの中に、”local”という名前のBase COMPが自動的につくられます。Base COMPの中に入って確認。ここで注目すべきは、画面下部に、今まで無かったタイムラインのUIが表示されています。この”local” Base COMPが、メインのタイムラインとは別時間軸で動くローカルタイムラインを制御してくれます。よって、この”local” Base COMPと同じCOMPにつくられたノードは、このローカルタイムラインを参照して動くようになります。

サンプルファイルの/project1/baseを開いてください。1のボタンを押すと、ローカルのタイムラインが1フレームにリセットされ停止します。2のボタンを押すと、再生されます。

先ほどと同じTimeBaseを追加する操作で、すでに、3“local”が追加されています。

ローカルタイムラインのフレーム数取得

このCOMP内の現在再生されているフレーム数を取得するには、4の様なtimeline CHOPを追加します。

プロパティのReference Operatorで、このCHOPが参照するオペレーターを指定できます。ここでは、このTimeline CHOPが置かれているCOMP（オペレーター）を指定します。

ローカルタイムラインを切り離す

ローカルタイムラインをメイン（ルート）タイムラインと切り離して、単独で再生できるようにします。3の中に入ると、

なお、このプロパティで、フレームレートやループ再生するかどうかなど、タイムラインの基本設定を行うことができます。

各OPにローカルタイムラインを反映

ローカルタイムラインを持つと、どんなことができるのかをサンプルにまとめてみました。

その他、スクリプトやReferenceで参照すれば、さまざまなOPの再生タイムラインを変更することができます。

とは言え、何に応用できるかは謎だったりするのですが、負荷を最適化するために、COMPごとのタイムラインを違うフレームレートで再生するとか、マルチプロセスで同期させるときなどに、メインタイムラインとは違うタイムラインで同期させることなどができそうです。

モーショングラフィックスの基本であるEaseアニメーションの仕方。
TouchDesignerでは、Keyframeを打つことでeaseを作ることができるが、ノードでつくる方法を。

サンプルファイルはこちら。
https://github.com/arkwknsk/touchdesigner/tree/master/tips/ease-interpolate

いくつかeaseをつくる方法がありますが、今回は、Interpolate CHOPを使い、

• linear
• ease in
• ease out
• ease in ease out

の４つのアニメーションをつくります。

初期値と最終値の設定

Interpolate CHOPは、入力されたCHOPの値を「補完」するノードです。ここでは、start1というConstant CHOPの0という値から、end1の1という値までを直線で補完する値を生成しています。

入力は複数持つことができ、一つの入力をAfter Effectsのキーフレームみたいな感じで設定できます。

最初に、二つのConstantを作り、一つはstart1と名前を付けて初期値を設定、最後の一つはend1と名前を付けてに最終的な値とキーフレームの時刻（時間）を設定します。

デフォルトで設定されていますますが、キーフレーム的に使うために、Constantのパラメータのchannelタブ→Single Sampleという項目が”On”になっていることを確認します。

次に、end1のパラメータで最終値を設定。

ここでは、最終値を1にします。

次に、Channelタブ→Startの値に、何フレームで最終値の1にするかというのを入れます。ここでは、Frameでも、Secondでも設定可能。ここでは、300フレーム後に1にするように設定。

Interpolate CHOP

Interpolate CHOPをつくり、すでにつくったConstant CHOPをつなげます。

そうすると、上の様なグラフがつくられます。1フレームから300フレームまで、きれいな直線の値が入ります。

ここで、Interpolate CHOPのパラメータのInterpolateタブ→Shapeのプルダウンメニューから希望するeaseなどを選ぶことができます。Cubicは、Ease in Ease outよりもすこしきつい加速する動きのアニメーションです。

実際のアニメーションに反映する方法

サンプルファイルの中に、４種類のアニメーションの実際のノードグラフを載せていますので、詳細はこちらを。

簡単に、ノードの流れを。

Interpolate CHOPでつくったアニメーションの動きをフレームごとに、TOPやSOPに渡す必要がありますので、lookup CHOPで、フレームごとに値を取り出します。

このとき、lookup CHOPが取り出したい位置（Index）をノードグラフ上部のSpeed CHOPで生成しています。Speed CHOPは、毎フレームごとに、Input値を増加量として、カウントアップしてくるCHOPです。i +=2 的な。

ここでは、Rectangle TOPの位置を移動をアニメーションさせるため、0～1の値をMath CHOPを使って、リマップしてます。ここでは、-0.25～0.25に変換してます。最初の初期値／終了値で設定することもできますが、このように途中で変換することでプロシージャルに、設定すると演出調整で便利です。

ここで変換した座標値をFit TOPノードのTranslateに入れ、実際のアニメーションに反映させます。モーショングラフィックス的にTOPを動かすのFitは便利です。蛇足なりますが、xにInterpolate CHOPの値を入れ、yにはサンプルとして見やすいように、pattern CHOPの直線的な値を入れ、４種類のボックスを上から均等配置しています。

ノードグラフ左側のGOボタンを押すと、60FPSが出るマシンだと５秒掛けてアニメーションする４つのボックスを確認できると思います。easeのかけ方で動きに変化がでることがわかると思います。アニメーション以外にもアルファなどの値もこの手法で変えられます。

一定間隔で数が増える数値を出したいときは、Pattern CHOPを使うと便利。

Pythonで書くとこんな処理

def onCook(scriptOp):
	scriptOp.clear()
	scriptOp.insertRow(['ty'], 0)

	n = 15
	step = 5

	j = 0
	i = 0
	for i in range(1,n+1):
		scriptOp.appendRow([j])
		if i % step == 0:
			j += 1

	return

Pattern CHOPをつくる

早速、Pattern CHOPをつくり、パラメーターの設定をする。

Typeから”Step”を選ぶ。今回、使用する項目は以下。

• Length: sampleの長さ
• Number of Steps: 何段階で目標値に増加させるか
• Amplitude: 振幅数（この場合だと、中間地点の値）
• Channel Names: 出力するチャンネルの名前

サンプル：階段状にBoxが増えていく

実際に、使えそうなシチュエーションとして、InstanceされるオブジェクトのYを段階的に増やして、階段状に上がっていくものサンプルとします。サンプルファイルは、こちら。
https://github.com/arkwknsk/touchdesigner/tree/master/tips/pattern-chop-step

完成はこういう感じのものです。横に５列、縦に３行のグリッド上にBoxが配置されますが、Z方向に１行（つまり、横に５個ずつ）ごとに、Yの値が変化し上がっていく構造です。

早速、ネットワークを見ていきましょう。

一番の左の”Para”というCHOPで、一列に何個、何行分表示するかをパラメータとして指定できるようにしています。その数値から、grid SOPでグリッドを作り、InstanceされるBOXの元の位置を生成。

Pattern CHOPのパラメータ項目の中で、簡単なPythonスクリプトを書き、生成する数列の長さ、ステップ数を入れています。また、grid SOPのパラメータも、スクリプトで指定しています。こうすることで、”Para”の値を変えると、動的に構造を変化させることができます。詳細は、サンプルファイルを。

生成されたGridをCHOPに変換し、次に、Select CHOPで、値をそのまま使うtxとtzだけを抽出します。tyの値は、Pattern CHOPで生成し、最終的にMerge CHOPでtx, ty, tzを合わせる形にします。

これをGeometry COMPにリンクし、インスタンスさせます。

サンプルファイル

https://github.com/arkwknsk/touchdesigner/tree/master/tips/pattern-chop-step

TDで、動画を再生するときによく使われるMovie File In Topだけでは、音声は再生されない。音声を同時に再生するには、Audio Movie CHOPを使う。

動画ファイルを読み込む

最初に、以下のようなノードを作り、動画ファイルを読み込む。この時点では、音声は再生されません。

動画ファイルの音声を再生する

Audio Device Out CHOPをつくります。

次に、このAudio Device CHOPのパラメーターのMovie Audio -> Movie File In TOPに、すでにつくってあるMovie File In TOPをリンク。

まず、Movie File In Topをドラッグし、Audio Device CHOPの”Movie File In TOP”のボックスまで持ってきたらドロップ。

そうすると、ボックスのところにドラッグしたTOPの名前が入り、 これでリンクされる。

次に、サウンドデバイスにデータを送るAudio Device Out CHOPをつくり、Audio Movie CHOPとつなげる。すると、スピーカーかヘッドフォンから音声が再生される。

サンプルファイル

https://github.com/arkwknsk/touchdesigner/tree/master/tips/videoWithAudio