【ビギナーが始める】TouchDesigner入門　vol.01

# 前置き
僕自身は、プログラミングのプの字も齧れていない開発ド素人。
最近、開発チームに正式アサインが決まり、自分の武器を作る為、TouchDesigner知識会得に果敢にも挑戦します。
コードを書く必要がなく、直感的にプログラミングができるツールということなので、我流で調べつつ学びつつの記録という事でまとめていければと思います。

# UIの理解
ひとまずDL。
MacBookのスペックは、MacBook Pro 2022 チップ:Apple M2 メモリ:24GB OS:Sonoma14.7

DLして、開くとチュートリアル的にサンプルのプロジェクトが組んである。
![スクリーンショット 2024-10-10 12.44.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/2ab8616d-95d2-d6c4-281a-9dd5a959df0f.png)
ふむふむ。
前職はTVCMのPM(制作)をしていたんですが、オンラインエディターさんが使用していた『Autodesk Flame』に近いのかな？(僕がいじれる訳では無い)

ググりながら各所の機能まとめ
(tutorialも公式からYoutubeにUPされているが全編英語なので、四苦八苦)

・operator
![スクリーンショット 2024-10-10 18.35.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/83869d15-78e7-3efe-24c0-3070bc178247.png)
この小窓一つ一つがoperatorというらしい。
マウスの右クリックで、add operatorかキーボードのtabか画面上部のプラスボタンで追加できる。ぽい。
![スクリーンショット 2024-10-10 18.38.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/62a4dda3-f6e1-a5e7-8b49-79846be9b923.png)　　　　![スクリーンショット 2024-10-10 18.38.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/ef3c0f03-66d5-9f17-7a86-4b4ad941a931.png)

add operatorを選択すると、OP Create Dialogが出てきて、
これで、どんな役割をさせるかセレクトするってことらしい。
![スクリーンショット 2024-10-10 18.40.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/dcfe0625-086b-f0a2-5732-8ad5cca0f03f.png)
COMP/TOP/CHOP/SOP/MAT/DAT/Customのタブ。ある程度属性分けされている。

適当にCHOPからwaveをセレクト。
![スクリーンショット 2024-10-10 18.47.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/6aff4e06-1dfc-d1d6-23c7-02d73f8129eb.png)
operatorが無事増えた。

左サイドに配置されているPaletteは、ある程度operatorの組み合わせがアセットされてるモノが追加できるみたい。
![スクリーンショット 2024-10-10 19.03.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/7427cc88-a920-6d1f-5086-22ab9c78ed7c.png)

画面の下部は、TimeCodeやら、FPSやら、tempoやら一連の動作の時間的設定ができるぽい。
![スクリーンショット 2024-10-10 19.06.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/4f0bbfa6-8bb1-b8af-c4b5-0b0f140f180a.png)

右サイドに、クリックして選択しているoperatorの値の設定画面が出てる。
![スクリーンショット 2024-10-10 19.09.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/43d78755-fdc6-3abf-7317-c08f562e9b88.png)
※waveをクリックして選択してるので、波形の調整値を色々カスタムできる。

画面上部は、解説のwebページのリンクとか、レイアウトの設定ボタンとかありますね。
![スクリーンショット 2024-10-10 19.13.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/8ff43bdd-2f73-1d77-2aec-696116d40dab.png)

operatorのボックスのアイコン
左上にある4つviewer,clone immune,bypass,lock
viewerボタンは、オンオフで波形の動画表示か、テキスト表示になるか選べる。(たくさん組んでて全部オンにしておくとPCの処理が落ちるからその辺も考慮してってことかな)
他のボタンは、ちょっとまだよくわからんので、後々深掘り。
![スクリーンショット 2024-10-10 19.46.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/9dfb477e-e98b-b1e3-a9c3-81b6feaeaa81.png)

右下のボタンは外側から、viewer active,display,export。
viewer active押すと、ボックス周りのボタンが非表示に、displayを押すと中にある波形が全体の背景いっぱいに表示される。exportは分からんので後々。
![スクリーンショット 2024-10-10 19.46.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/ba5b6ac0-9375-65e7-89e6-c94b65370195.png)


、、、とまあ、一旦は、メインのUI周りは、こんな感じだという事を理解(した気でいるだけですが)
英語が読めるともっとスムーズに解読/理解できそうです。


# テーマを決めて組んでみる
テーマというか、初手中の初手なので、チュートリアルに組んであるプロジェクトに対して、足したり、引いたり、してみたいと思います。
・ベースの静止画素材を変えてみる
デフォで入っているカラフルグミの静止画operatorを複製。
複製したoperatorの静止画を変える。
operatorをクリックして選択すると右サイドに設定ボックスが現れるので、Fileの＋ボタンで素材を変更。
![スクリーンショット 2024-10-11 12.40.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/c97fdc0d-d27c-42df-1acb-44a229a775ee.png)
カラバーがあったので、それにしてみた。
![スクリーンショット 2024-10-11 12.43.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/fd0925d1-e5dc-ef7e-4170-23c9f030873f.png)

見よう見まねで、同じように常げてみる。
![スクリーンショット 2024-10-11 12.47.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/91f19499-73ad-c5cb-3b70-375a38b6baf1.png)

カラーバーと右のdisplace1が繋がって、
グミとのリンクは外れた(自動で)。
エフェクトも残ってるようだが、グミ素材の時と、何だが動きが違う。何でだろう。
素材に対するnoise1の有効範囲設定値的なのが、違うのかな？？
(単純にカラーバーの直線とかと相性が悪かっただけだった。他の静止画に変える)

ドラム缶に変えてみたら、ちゃんとエフェクトかかっていること確認することができた。
![スクリーンショット 2024-10-11 13.02.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/18ebfe80-94b2-0c29-9cab-16af2d68ffc5.png)

・noiseの波形を変えてみる
noiseのoperatorを選択すると右上に設定が出てくる。
![スクリーンショット 2024-10-22 18.47.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/436532ec-b168-abe6-bcd6-7c7a2671caf7.png)
お手本の状態だとTypeはHermite(モード？)になっている。
動き的には、右から風を受けて旗めいてる旗っぽい動き。

typeをHamomic Summationに変えてみます。
下のパラメータの数値も適当にイジイジします。
![スクリーンショット 2024-10-22 19.10.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/c14e5ad1-d636-bfc1-704e-d6f01b509ced.png)

波形が変わり、outの素材もドラム缶の原型がほぼ分からない動きに変化。
各パラメータの動きは、それぞれにどんな効果あるのか、繰り返し操作して、感覚で覚えていくのが良さそうです。
(現時点で深堀する気無し、、、)
![スクリーンショット 2024-10-22 19.13.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/a412385e-5462-a1cb-2641-d37685b9009d.png)



# 今回の学び(会得)
・おおよそのUI/作りは理解(できた気がする)
・operatorが既にプログラム的なものを保持してる
・operatorのパターンは様々
・operatorの組み合わせで、最終のアウトプットを構成する


# 次回試してみたい事
・音源データと、画像データで簡易的なビジュアライザ制作してみる