TouchDesigner × Arduinoでインタラクティブな炎をつくる(1/2)

TouchDesignerとArduinoを連携させて、息を吹きかけると揺れる炎を作ってみました。

#炎をつくる
まず、TouchDesignerでこのような炎の作り方を説明していきます。
<img width="665" alt="スクリーンショット 2017-08-08 23.27.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/195560/0dd305c6-866f-acca-5279-21e7ccd36443.png">


##1. 動きをつくる
Particle SOPを使って、炎の動きをつくっていきます。
まず、以下のようにノードを組みます。
<img width="975" alt="スクリーンショット 2017-08-08 0.21.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/195560/81beaec2-da89-80ac-9f92-f4afb7df8a10.png">


各オペレータのパラメータは以下のように設定します。

<dl>
<dt>▶︎sphere1</dt>
<dd>Radius(xyz)：<b>0.1</b></dd>
<dt>▶︎sort1</dt>
<dd>Point Sort：<b>Random</b></dd>
<dt>▶︎particle1</dt>
<dd>Stateページ > Particle Type：<b>Render as Point Sprites</b></dd>
<dd>Forcesページ > External Force(y)：<b>1.5</b></dd>
<dd>Particlesページ > Birth：<b>80</b></dd>
</dl>

**Sort SOP**で**Random**を選択することで、sphereの頂点番号をランダムに変えることができます。
したがって、particleの発生源がランダムになり自然な発生になります。


##2. 質感をつける
Ramp TOPとPoint Sprite MATを使って、質感をつけていきます。

まず、ramp1を以下のように設定します。
<img width="911" alt="スクリーンショット 2017-08-08 13.44.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/195560/f47c4d60-9dc9-b4f8-8070-7c93f1494d98.png">

<dl>
<dt>▶︎ramp1</dt>
<dd>Type：<b>Circular</b></dd>
<dd>Extend Right：<b>Black</b></dd>
<dd>Hue, Sat, Valueは上の画像を参考にしてください</dd>
</dl>

次に、Point Sprite MATを追加します。
<img width="794" alt="スクリーンショット 2017-08-08 13.52.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/195560/27d52043-69c7-d73c-aa81-437041d33b72.png">


<dl>
<dt>▶︎pointsprite1</dt>
(Point Spriteページは適当に設定してください)
<dd>Point Spriteページ > Color Map：<b>ramp1</b></dd>
<dd>Point Spriteページ > Attenuate Point Scale：<b>1</b></dd>
<dd>Point Spriteページ > Attenuate Near Distance：<b>0</b></dd>
<dd>Point Spriteページ > Attenuate Far Distance：<b>0</b></dd>
<dd>Point Spriteページ > Near Point Scale：<b>1</b></dd>
<dd>Point Spriteページ > Far Point Scale：<b>95</b></dd>
<dd>Commonページ > Blending：<b>On</b></dd>
<dd>Commonページ > Source Color：<b>One</b></dd>
<dd>Commonページ > Destination Color：<b>One</b></dd>
<dd>Commonページ > Write Depth Values：<b>Off</b></dd>
</dl>
Source ColorとDestination ColorをOneにすることで、色を加算合成するよう設定しています。
[ブレンドモードについて - OpenGL](http://memo.devjam.net/clip/538)

そして、Geometry COMPを追加します。
<img width="379" alt="スクリーンショット 2017-08-10 1.16.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/195560/40874e27-8ca9-c60c-1b64-588bf3d115e2.png">


中身はデフォルトで入っているものを消して、以下のようにIn SOPだけにします。
ここで、右下のRenderボタン(紫)がonになっていないとレンダリングされないので注意してください。
<img width="379" alt="スクリーンショット 2017-08-10 1.16.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/195560/8134b31b-7e8c-a4f7-bfa1-514d3e088079.png">

先ほどのparticle1にGeometry COMPをつなげます。
<img width="1019" alt="スクリーンショット 2017-08-08 13.56.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/195560/2703c9e4-9777-620f-278c-868561580d7f.png">


pointsprite1をgeo1にドラッグ&ドロップすると以下のような画面が出てくるので、Materialを選択します。
<img width="574" alt="スクリーンショット 2017-08-08 14.39.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/195560/bcf1ceda-f8d3-00bf-8f6d-b1c7b1ed174c.png">


##3. レンダリングする
Camera COMP, Light COMP, Render TOPを並べます。
<img width="476" alt="スクリーンショット 2017-08-08 14.41.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/195560/78cebada-172b-a20b-3c73-f8a663f514db.png">

<dl>
<dt>▶︎camera1</dt>
<dd>Translate(y)：<b>1.5</b></dd>
<dd>Translate(z)：<b>10</b></dd>
</dl>

##4. ノイズをのせる
Displace TOP, Noise TOP, Blur TOPを使って、炎にノイズをのせていきます。
<img width="917" alt="スクリーンショット 2017-08-08 15.40.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/195560/89c121ba-c1b3-78df-d72b-78913058a7c6.png">

noise1のパラメータを変えることで炎の形状がかなり変わるので、色々試してみてください。
例として、ここでは以下のように設定しています。
<img width="429" alt="スクリーンショット 2017-08-08 15.01.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/195560/eb1c518b-7722-12f2-87b1-d64c9bbff4e4.png">

また、blur1は以下のようにパラメータを設定しています。

<dl>
<dt>▶︎blur1</dt>
<dd>Blurページ > Pre-Shrink：<b>3</b></dd>
<dd>Blurページ > Filter Size：<b>15</b></dd>
</dl>

[TouchDesigner × Arduinoでインタラクティブな炎をつくる(2/2)](http://qiita.com/mrdkosy/items/2dcee0fb7718a07d9cac)