TouchDesignerの正しい表記について啓蒙する音連動映像コンテンツの制作

# はじめに
こんにちは、oishihiroaki(irishoak)です。

昨今、TouchDesignerのユーザーの拡がり目覚ましいですが、その陰でTouchDesignerと正しく表記がなされなかったために、若者がTouchDesigner警察に注意を受ける事案がありました。

![TouchDesigner警察](https://qiita-image-store.s3.amazonaws.com/0/35267/d1e9ab48-51a6-06a6-064d-c7d3549aedbe.png)


案外知られていないことですが、公式では、“Touch Designer”と単語の間にスペースを挟まず、“TouchDesigner”と表記するのが適切なようです。（大文字小文字についてはこだわりはないんだろうか…）

世間にはそもそもTouchやDesignerの正しい綴りを覚えられない幼稚園児もいますが、
![幼稚園児](https://qiita-image-store.s3.amazonaws.com/0/35267/6b0c9b98-0abc-ab37-900f-40064d3cf669.png)

まずは正しい表記を覚えて、健全なTouchDesigner開発を行うことができるようになりたいものです。今回はそのために、TouchDesignerの正しい表記を印象的に脳に刻み込むことができるようなコンテンツを作成いたしました。この記事では、その作成過程について解説したいと思います。

# コンテンツ概要
音声ファイルを再生して、音の強さを取得し、その強さによって、TouchDesignerのテキストが動きます。TouchDesignerの文字の間のスペースがなくなれば、背景のポリスメンの絵が、OKジェスチャに変化します。

[動画 TouchDesignerPoliceAudioReactive](http://vimeo.com/245430053)

![画像1](https://qiita-image-store.s3.amazonaws.com/0/35267/89713f42-68c7-e5c4-83dc-69a4ea30f238.jpeg)

![画像2](https://qiita-image-store.s3.amazonaws.com/0/35267/548cf08b-344e-b158-be73-be78730bfb69.jpeg)

![画像3](https://qiita-image-store.s3.amazonaws.com/0/35267/42d40f3b-b854-042d-ec6e-224306045986.jpeg)

# 制作プロセス
このサンプルコンテンツのプロジェクトデータはこちらのGithubリポジトリにアップしています。
[TDPoliceAudioReactive Github](https://github.com/hiroakioishi/TDPoliceAudioReactive)

## プロジェクトフォルダの作成
TouchDesignerを起動し、File > **Create Project Folder** からプロジェクトフォルダを作成します。

![プロジェクトフォルダ作成1](https://qiita-image-store.s3.amazonaws.com/0/35267/a3a589fb-54e1-3de0-cc5e-5753d332f484.jpeg)

Project Folder に **TDPoliceAudioReactive(任意)** と入力し、
Rename File、Media Folders の **Audio** と **Images** の チェックボックスをチェックし、**Create**ボタンを押します。

![プロジェクトフォルダ作成2](https://qiita-image-store.s3.amazonaws.com/0/35267/4d2e2b8c-ed16-154d-f2a7-15fbc36de6b2.jpeg)

そうすると、**.toe**ファイルと、**Audio**、**Image**というフォルダが同階層に作られます。

![プロジェクトフォルダ作成3](https://qiita-image-store.s3.amazonaws.com/0/35267/42fc1b78-1a09-c435-15c4-13a4fadd4322.jpeg)


## 音声ファイルの再生と解析
デフォルトで存在しているオペレータオブジェクトを消去し、
OP Create Dialog から
CHOP > **Audio File In**、CHOP > **Audio Device Out** オペレータを作成し、以下のように接続します。

![オーディオの読み込みと再生](https://qiita-image-store.s3.amazonaws.com/0/35267/15f821b6-b2c3-b960-5896-6d798a2bcc88.png)

サンプルの音声ファイルが再生されるようになりました。

CHOP > **Analyze** オペレータを作成し、ノードを接続。
LRの2つのチャンネルのオーディオデータが得られます。

![オーディオの解析](https://qiita-image-store.s3.amazonaws.com/0/35267/ba694564-c99f-e052-b589-32f47c0176f3.png)

CHOP > **Math** オペレータを作成し、ノードを接続。
*Combine Channels* を **Average**
*Channel Post OP* を **Positive** に変更します。
これにより、LRの2つのチャンネルが一つにまとめられ、正負の値をとっていたものが、絶対値をとり正の値に修正されます。

![オーディオの解析2](https://qiita-image-store.s3.amazonaws.com/0/35267/4d984918-5cc1-d80e-1946-e043e835af3d.png)

CHOP > **Filter** オペレータを作成
これにより、値の変化が滑らかになります。
このままだと、現在の値を計算するためにサンプルする幅が広く、音の特徴が消えた値になってしまいます。そこで、*Filter Width* を **0.15** ぐらいに調整します。サンプリングする幅が変化し、音の特徴をある程度保った値が得られます。

![オーディオの解析3](https://qiita-image-store.s3.amazonaws.com/0/35267/6a213779-453c-5f5c-2f5f-a8bd645a4bbc.png)

CHOP > **Null** オペレータを作成し、接続しておきましょう。

![オーディオの解析4](https://qiita-image-store.s3.amazonaws.com/0/35267/0b098a48-c8b4-823f-83a4-2c7419309460.png)

## TouchDesignerテキストオブジェクトの作成

COMP > **Geometry** オペレータを作成し、ダブルクリックして中に入り、すでに存在するTorus SOPを削除します。

![Geometryオペレータを作成](https://qiita-image-store.s3.amazonaws.com/0/35267/f52ad173-1a8f-c938-cb2e-534f309dd95d.jpeg)


SOP > **Font**オペレータを2つ作成します。
2つあるFontオペレータの*Text*プロパティに**Touch**
もう一つに、**Designer**と入力します。（※つづりに注意してください！）

*Level of Detail* の 値を調整することにより、フォントのメッシュの分割具合が調節できます。

![フォントの作成](https://qiita-image-store.s3.amazonaws.com/0/35267/4743b4ce-930e-045a-6b27-1ed8e6d77673.png)

SOP > **Extrude** オペレータを2つ作成し、それぞれ接続します。
これにより、テキストが押し出されました。
*Depth Scale*によって押し出しの奥行きのスケールが調整できます。 **0.25** ぐらいにしましょう。
この状態であると、厚みを変化させた時に、原点とオブジェクトの中心がずれてしまいます。そこで、
*Depth Translate* のExpressionに `me.par.depthscale*-0.5` と入力します。

Expressionを記述する際、まず、*Depth Scale*の入力ボックス上で、右クリックをし、ポップアップから**Copy Parameter** をクリックします。それから、*Depth Translate*のExpression入力ボックス上で、右クリックをし、**Paste References**をクリックします。そうすると、Depth Scaleの参照である `me.par.depthscale` がペーストされます。この辺りは、Houdiniと共通ですね。

![フォントの押し出し](https://qiita-image-store.s3.amazonaws.com/0/35267/b4215195-05c9-d965-900e-683b61dcf4f0.png)

SOP > **Merge** を作成し、ノードを接続します。
これにより、2つのSOPが一つのSOPにまとめられました。

SOP > **Null** を作成し、ノードを接続し、右下の紫と青の●にチェックを入れ、RenderフラグとDisplayフラグをONにします。

![フォント結合](https://qiita-image-store.s3.amazonaws.com/0/35267/2bb9c77e-9510-d211-4ac5-079da002881c.png)

uキーを押して上の階層に戻ります。



## 背景の作成

### 絵文字（Apple製）画像データの取得
絵文字の画像データを手に入れます。
[Emojipedia Apple Emoji List](https://emojipedia.org/apple/)
ここより、Apple製の **Police Officer** と **Gesturing OK** の絵文字の画像を（手動で…）保存します。
画像データはプロジェクトフォルダのImageディレクトリの下に、**PoliceOfficer**、**GesturingOK**というフォルダを作り、それぞれ分けて保存します。

![画像の保存](https://qiita-image-store.s3.amazonaws.com/0/35267/86906783-d2c9-d579-2b04-b0860bac6b04.png)

### 2D Texture Array に絵文字画像データを読み込む
TOP > **Texture 3D** オペレータを作成します。
このオペレータではボリュームデータや、2D Texture Array として複数のテクスチャを1つのデータにまとめて扱うことができます。

2つ作成したら、プロパティを、
*Type* を **2D Texture Array**
*Pre Fill* を **ON**
*Replace Single* を **ON**
*Cache Size* を **12**
に変更します。

![Texture 3D](https://qiita-image-store.s3.amazonaws.com/0/35267/fb2503fe-2744-70ea-4c83-5d69e7881343.png)


TOP > **Movie File In** オペレータを2つ作成します。
*Viewerフラグ* （左上の○）を **OFF** にし、
*File*のExpression に `'./Image/PoliceOfficer'` と入力、
もう一つの **Movie File In** オペレータでは、
`'./Image/GesturingOK'` と入力、
*Play Mode* を **Specify Index**
*Index* のExpressionに `me.time.frame-1` と入力、
単位を**Index** に変更します。

 ![画像の読み込み](https://qiita-image-store.s3.amazonaws.com/0/35267/0d723c3b-12c1-82ab-21f5-f17f9f056b26.png)


**Texture 3D**オペレータに接続すると、画像がまとめて読み込まれると思います。
（うまく読み込まれない場合、**Texture 3D** の *Reset*プロパティを一度**ON**にしてから**OFF**にしてみてください）

[Texture 3D TOP](https://www.derivative.ca/wiki099/index.php?title=Texture_3D_TOP)

![画像の読み込み2](https://qiita-image-store.s3.amazonaws.com/0/35267/0166a61c-8ab1-281b-e43a-1ccab01c044a.png)


### GLSLによる背景エフェクトの作成
TOP > **GLSL** オペレータを作成します。

#### Uniform変数の設定
**Vector 1** タブ を開き、
*Uniform Name* に **time**
それぞれ、
value0x : **me.time.frame** 
value0y : **me.time.seconds**
value0z : **absTime.frame**
value0w : **absTime.seconds**
と入力します。
これで、シェーダ内で時間のデータがとることができるようになります。

[Python Tips #Time](https://www.derivative.ca/wiki099/index.php?title=Python_Tips#Time)
[absTime Class](https://www.derivative.ca/wiki099/index.php?title=AbsTime_Class)

![GLSLの作成](https://qiita-image-store.s3.amazonaws.com/0/35267/c47802e6-d7ea-5e77-43e0-de4f4833341e.png)

<details><summary>**<font color=red>修正点（Uniform floats should specified on 'Vectors' pages）**</font></summary>
以下、**Arrays1** で **audioVolume** を定義していますが、Windows のIntel GPUでは、**uniform float audioVolume** がうまく機能しないようで、**Vector1**ページに記述するべきです。
[Github issues #4 (Uniform floats should specified on 'Vectors' pages)](https://github.com/hiroakioishi/TDPoliceAudioReactive/issues/4)
<img width="794" alt="33601153-b98bbc7e-d9ee-11e7-8f31-f85073104ccf.png" src="https://qiita-image-store.s3.amazonaws.com/0/35267/098c73c0-3d51-0576-2872-0810109f4561.png">
</details>

~~**Arrays1** タブを開き、
一番上の CHOP のテキストボックスに、**null1**オペレータをドラッグ&ドロップします。
*Uniform Name* に **audioVolume** と入力します
これで、シェーダ内で音の強さのデータを取得できるようになります。~~

![GLSLの作成2](https://qiita-image-store.s3.amazonaws.com/0/35267/805a9c6c-20d5-055c-af79-8dc0a774fefe.png)

#### 解像度の設定
解像度を設定します。
**Common** タブを開き、
*Output Resolution* を **Custom Resolution** に
*Resolution* を **1280** **720** と設定します。

![GLSLの作成](https://qiita-image-store.s3.amazonaws.com/0/35267/945e43ba-8af2-1c48-114b-c059dafc0a63.png)

#### GLSLにTexture 3Dを接続
作成した**GLSL**オペレータの第1入力に、**PoliceOfficer**を読み込んだ**Texture 3D**オペレータ、第2入力に、**GesturingOK**を読み込んだ**Texture 3D**オペレータを接続します。

#### コードの記述

glslと紐付いたglsl1_pixelの**Edit**ボタンを押し、GLSLのコードを記述します。

![GLSLの記述](https://qiita-image-store.s3.amazonaws.com/0/35267/eb77facf-90ec-825a-e916-6c55f0ddc9dc.png)

<details><summary><font color=red>**修正点(macOS GLSL compiler stricter than Windows)**</font></summary>
[2D Texture Array](https://www.derivative.ca/wiki088/index.php?title=2D_Texture_Array)
こちらには、冒頭で
`#extension GL_EXT_texture_array : enable`
を記述してね、とあったのですが、これを記述するとMacOSでコンパイルエラーを起こします。コメントアウトしましょう。
[Github issues #3(macOS GLSL compiler stricter than Windows)](https://github.com/hiroakioishi/TDPoliceAudioReactive/issues/3)
</details>


```glsl:TDPoliceAudioReactiveEmojiTileBackgroundEffect.glsl
/**
 * TDPoliceAudioReactive EmojiTile Background Effect
 */

// 2D Texture Array を 有効に (I's not necessary)
// #extension GL_EXT_texture_array : enable

// 2D Texture Array の画像数
#define TEX_ARRAY_NUM 12

// 時間(frame, seconds, absTime.frame, absTime.seconds)
uniform vec4 time;
// 音の強さ
uniform float audioVolume;
// 出力するフラグメントのカラー
out vec4 fragColor;

void main()
{
    // アスペクト比 （1280, 720) 
    vec2 aspectRatio = vec2(1.7777777, 1.0);
    // 縦のタイル（タイル一つに絵文字が一つ表示される）の数 --- 時間によって変動させる
    float tileNumV = 12.5 + 10 * sin(time.w * 0.5);

    // UV座標値 --- 中央 半タイル分ずれた位置でスケーリングされるようにオフセットをかける
    vec2 halfTileSize = vec2(1.0/(tileNumV * aspectRatio.x) * 0.5, 1.0/tileNumV * 0.5);
    vec2 uv = vUV.xy - vec2(0.5, 0.5) + halfTileSize;
    // 縦横のそれぞれのタイル数
    vec2 tileNum   = vec2(tileNumV * aspectRatio.x, tileNumV);
    // タイルのUV（画像を表示するときに使用）
    vec2 tileUv    = mod(uv.xy, 1.0/tileNum) * tileNum;
    // タイルのインデックス（タイルごとに異なる画像を表示するために使用）
    vec2 tileIndex = floor(uv.xy * tileNum.xy) / tileNum.xy;

    // タイルインデックスごとに異なるシンプレックスノイズパターン(0.0~1.0)を取得
    // （ポリス絵文字をノイズ模様で出しわけするために使用）
    float snoisePattern = 0.5 + 0.5 * TDSimplexNoise(vec3(tileIndex.xy * aspectRatio, time.w * 0.5));
    // タイルインデックスごとに異なる中央から広がるパターン(0.0~1.0)を取得
    vec2 diffCenterToEachTile = tileIndex * aspectRatio;
    float circleWavePattern = mod(2.0 * dot(diffCenterToEachTile, diffCenterToEachTile) + time.w * -0.75, 1.0);
    
    // ポリスの画像カラーを取得
    vec4 policeTexCol    = texture(sTD2DArrayInputs[0], vec3(tileUv.xy, snoisePattern     * TEX_ARRAY_NUM));
    // OKジェスチャの画像カラーを取得
    vec4 okGestureTexCol = texture(sTD2DArrayInputs[1], vec3(tileUv.xy, circleWavePattern * TEX_ARRAY_NUM));

    // ポリス絵文字タイルの背景の色 --- サイレンのように赤と青に交互に切り替わるように
    vec3 policeTexColBgCol = 0.6 * mix(vec3(1.0, 0.0, 0.0), vec3(0.0, 0.0, 1.0), 0.5 + 0.5 * sin(time.w * 20.0));
    // 背景の色とブレンド
    policeTexCol.rgb = mix(policeTexColBgCol, policeTexCol.rgb, policeTexCol.a);

    // OKジェスチャ絵文字タイルの背景の色
    vec3 okGestureBgCol = vec3(0.0);
    // 背景の色とブレンド
    okGestureTexCol.rgb = mix(okGestureBgCol, okGestureTexCol.rgb, okGestureTexCol.a);

    // 音の大きさによって、警察とOKジェスチャの画像を入れ替える
    vec3 color = mix(policeTexCol.rgb, okGestureTexCol.rgb, smoothstep(0.5, 0.8, audioVolume));
    
    // 出力するフラグメントのカラーをセット
    fragColor = TDOutputSwizzle(vec4(color, 1.0));
}
```

##### タイルのUVとインデックスを算出
絵文字をタイル状に敷き詰めるために、タイルのUVとインデックスをそれぞれ、**mod**関数と**floor**関数を使って求めます。
**mod**は剰余、**floor**は小数点以下の値を切り捨てた値を返します。
UVとインデックスを画像として表示するとこのようになります。

▼ タイルのUV
![タイルのUV](https://qiita-image-store.s3.amazonaws.com/0/35267/02107403-aba0-accb-0187-1ed4457e9409.jpeg)

▼ タイルのインデックス
![タイルのインデックス](https://qiita-image-store.s3.amazonaws.com/0/35267/9b041840-25d8-d1cc-7bea-669ae9505166.jpeg)

※ 除算は演算コストが高く、シェーダプログラミングではできるだけ使用は避けるべきです。`1.0/tileNum` など行っていますが、すべてのピクセルで共通の値は、事前にCPU上で計算し、uniform変数としてGLSLに渡した方が本来は良いです。

##### ノイズパターンを取得
ポリスの絵文字がノイズ模様になるように描画するポリスの画像の種類が変わるようにします。そのために、タイルのインデックスによって異なるノイズの値を算出します。
TouchDesignerには、**TDSimplexNoise(vec3 v)**というシンプレックスノイズを返す関数が用意されています。うれしいですね。引数には、**xy**成分に、**タイルのインデックス**、**z**成分に**時間**を渡し、時間で変化する2Dのノイズパターンを得ます。

![2Dのノイズパターン](https://qiita-image-store.s3.amazonaws.com/0/35267/43107135-6886-a713-41ca-e419f9d03cac.jpeg)


##### 2D Texture Array から 画像のカラーデータを取得
**2D Texture Array**のデータを取得するためには、**sTD2DArrayInputs** 変数を使用します。この変数は配列構造になっており、[0]にはGLSL Topの第1入力に接続した**Texture 3D**オペレータのデータ、[1]には第2入力に接続したデータが渡されます。
実際に、カラーデータを取得するには、**texture(sTD2DArrayInputs[0], vUV.stp)**関数を使用します。第1引数には**2D Texture Array** を第2引数にはuvデータを渡します。uvデータの各成分は、**.st**が画像の**UV座標**、**.p**成分は、**2D Texture Arrayの配列番号**に対応します。**p**成分の配列番号は整数で指定するようになっており、0や0.5を指定した場合は、0番目の画像が、2.0や2.9と指定した場合は2番目の画像が取得されます。

##### 音の強さによってポリスとOKジェスチャの画像の切り替えを行う
音による画像の切り替えは以下のコードで実現しています。
`vec3 color = mix(policeTexCol.rgb, okGestureTexCol.rgb, smoothstep(0.1, 0.9, audioVolume));`
**mix**関数は第1引数と第2引数に指定した値を、第3引数に指定した値（0.0~1.0）によってブレンドします。
**smoothstep**は、第3引数に指定した値が、第1引数と第2引数で指定した値の範囲で変化するときに、滑らかに0.0～1.0の範囲で変化するような値を返します。
つまり、音の強さの値が0.1から0.9で変化するときに0.0から1.0の値が返され、画像が（比較的）滑らかに切り替わるようになります。

GLSL Topを記述する際は、ここの情報を参照されてください。
[TouchDesigner Write a GLSL TOP](https://www.derivative.ca/wiki099/index.php?title=Write_a_GLSL_TOP)

## TouchDesignerテキストを音の強さで動かす
音の強さによって先ほど作成したテキストが動くようにします。
テキストの **Geometory** TOPをダブルクリックして中に入ります。

<details><summary><font color="Red">**修正点 : SOP cooking order optimization**</font></summary>
以下、サンプルでは、Font SOPで、移動のためのExpressionを記述していますが、これだと、処理コストが高い **Font** SOP と **Extrude** SOP が毎フレーム実行されてしまい、パフォーマンスが落ちてしまいます。。
そのため、それぞれの文字の処理の後に、**Transform** SOP を配置し、そこで移動のためのExpressionを記述することで、**Font** SOP、 **Extrude** SOP での不要な実行を防ぐことができ、高速化を図ることができます。
[Github issues #2(SOP cooking order optimization)](https://github.com/hiroakioishi/TDPoliceAudioReactive/issues/2)
![add Transform SOP](https://qiita-image-store.s3.amazonaws.com/0/35267/51be1a3f-ae68-69ce-b826-26cfa889da0e.jpeg)

</details>

「Touch」の方の**Font**オペレータの
*Center Text Vertically* を **Off** に、
*Translate*プロパティのtyに **-0.25** と入力、
~~txのExpressionに `min(-1.525, -1.525-1.0+op('../null1')['chan1'])` と入力します。~~
**Extrude** SOP のあとに、**Transform** SOP を作成し、その *Translate tx* プロパティのExpressionに `min(-1.525, -1.525-1.0+op('../null1')['chan1'])` と入力します。これによって、音が大きければ真ん中にスライドするようになりました。

![TouchDesignerテキスト](https://qiita-image-store.s3.amazonaws.com/0/35267/fa91fe48-ecba-baae-aedd-0b981ca09405.png)

「Designer」の方の**Font**オペレータも、
*Center Text Vertically* を **Off**、
Translateプロパティtyに **-0.25**、
~~txのExpressionは `max(2.175, 2.175+1.0-op('../null1')['chan1'])` と入力します。~~
**Extrude** SOP のあとに、**Transform** SOP を作成し、その *Translate tx* プロパティのExpressionに `max(2.175, 2.175+1.0-op('../null1')['chan1'])` と入力します。

![TouchDesignerテキスト2](https://qiita-image-store.s3.amazonaws.com/0/35267/a8651110-ceb0-676e-a56a-9a333448fd91.png)

## テキストを回転させる
uキーを押し、上の階層に移動します。

geo1 オペレータの *Rotate* の Expression にそれぞれ以下のように入力します。
rx : `absTime.seconds * 30.0`
ry : `absTime.seconds * 40.0`
rz : `absTime.seconds * 10.0`

これで、時間によって、テキストがぐるぐると回転するようになりました。

![TouchDesignerテキスト3](https://qiita-image-store.s3.amazonaws.com/0/35267/9c95f526-3ab8-20c7-bcce-c6052ea6dfcd.png)

## テキストのレンダリングと外側光彩エフェクト

TOP > **Render** オペレータを作成します。
また、COMP > **Camera**、COMP > **Light** も作成します。テキストが描画されるようになりました。

![テキストを描画](https://qiita-image-store.s3.amazonaws.com/0/35267/b8a96214-9a52-3f57-6e15-2ae3623ef234.png)

### 外側光彩のためのブラーエフェクトの作成
TOP > **Blur** を作成し、
*Pre-Shrink* を **3**、
*Filter Size* を **10**、
に設定します。

![Blurオペレータ](https://qiita-image-store.s3.amazonaws.com/0/35267/4352ff84-6afc-88a6-c701-9f4bfdad92f9.png)

TOP > **Monochrome** を作成し、
*RGB* を **Alpha**、
*Alpha* を **Alpha**、
に設定します。

![Monochromeオペレータ](https://qiita-image-store.s3.amazonaws.com/0/35267/2b527f93-7e9a-f6e7-ab2b-3a145020c69b.png)


TOP > **Constant** を作成し、カラーの設定をします。

TOP > **Multiply** を作成し、
*Fixed Layer* を **Input1** に設定。
第1入力に、**mono1**を、
第2入力に、**constant1**を接続します。
そうすると、**Constant**で設定した色の、テキストのシルエットがぼけた画像が得られます。

![Multiplyオペレータ](https://qiita-image-store.s3.amazonaws.com/0/35267/4088b97c-5c19-b946-3e15-9ff4d522f8b2.png)

※ **Blur** と **Multiply** の間に、**Level** TOP を挟んで、*Gamma* の値を高く設定すると、光彩の強さを上げることができます。このように、簡単にポストエフェクトを使うことができるのはTouchDesignerの強みですね。

TOP > **Over** を作成し、
第1入力に、**render1**、
第2入力に、**multiply1** を接続します。
これで、テキストの後ろの外側光彩エフェクトがかかった画像が得られました。

![外側光彩エフェクトの合成](https://qiita-image-store.s3.amazonaws.com/0/35267/306a7765-cef0-9509-7c83-b20309a01320.png)


## 合成
TOP > **Over** を作成し、
第1入力に、**over1**
第2入力に、**glsl1** を接続します。

TOP > **Out** を作成し、**over2** を接続します。
これで完成です。

![合成](https://qiita-image-store.s3.amazonaws.com/0/35267/b2842f26-7d20-0bef-74fb-d1f74c0b4914.png)


# まとめ
いかがでしたでしょうか。これでもう、TouchとDesignerの間にスペースを入れることはなくなることと思います。



私自身、TouchDesignerに関しては初心者であり、誤りや非効率的な実装を行っている箇所があるかと思います。そのような点を見つけられましたら、ご指摘いただけると幸いです。TouchDesignerは、他のツールと比較して動画再生周りとても強く、何度か案件で命を救われました。それに対しての感謝を込めて少しでもコミュニティに寄与できればと思います。

最後に、このような下らないものを作ってしまい本当に申し訳ありませんでした。