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

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

# 今回のテーマ
前回、
・音源データと、画像データで簡易的なビジュアライザ制作してみる
ということで、最終的には、バナナのサイズが音源データにリンクして大きさが変わるものを作成したので、
そのアウトプットに対して、別の数値をリンクさせて、バナナの色が変化する仕様にアップグレードしてみる。


# 制作
vol.02で制作したプログラムに、色設定のOP(オペレーター)を追加。
・level
・luma level
の二つを試しに追加
fitの後ろ下層に配置![スクリーンショット 2024-10-29 16.21.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/be323c14-b72f-28a7-91e2-8fd8be62d9e7.png)

levelに対して、変化のある数値を外部の入力から、値を付与してみたいと思ったので、
OPの”mouse in”を追加して、levelに繋げる。
levelのinvertとganma1に対して、x,yを割り振ってみた。
![スクリーンショット 2024-10-29 16.22.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/1aaa0c62-54c6-e58b-7565-41a545a370bd.png)
![スクリーンショット 2024-10-29 16.26.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/28200ff8-72fb-0928-3104-de51e5246503.png)
マウスのカーソル位置によって、色レベルが変動するようになった。(面白い)
![スクリーンショット 2024-10-29 16.26.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/4ef1ddf7-7a50-90e4-94c4-d48b83ea5973.png)

んー、次に試してみたいのは、
もう一つ追加したlumalevelにlevelと同じ設定をしつつ、
何かのスイッチでlumalevelにlevelが切り替わるようにしてみたい。

会社の倉庫で丁度いいものがないか、いざ物色！
、
、
、
steelseriesのBluetoothゲームコントローラーを発見したので、こちらを使ってみます。
先ほどマウスに付与した設定もコントローラーで可変できるようにしてみようかと思います。
PCに接続した後、touchdesignerの画面で、細かい設定が必要なようだ。(がとりあえずPCには接続されたので、よしとする）

lumalevelとlevelの後ろに、
switch TOPを配置(初手でswitch CHOPを選んでいて失敗、改めてTOPとかCHOPの違いを理解しないと)
![スクリーンショット 2024-10-30 12.52.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/d896ad8b-05f8-fba4-ca25-1b10ff7c048f.png)
switch TOPに対して、levelとlumalevelを繋げる。
0と1に対して、振り分けされた(数が多ければその分Input OPの数が増加するみたい)

そして、ゲームコントローラーからのボタンで切り替わるようにしてみる。
joystick CHOPを作成してコントローラーからの信号受けてるか確認。
![スクリーンショット 2024-10-30 13.19.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/310c8851-de32-df65-497b-1681dda91292.png)
A,B,X,Yと右のジョイスティック、左の十字キーは入力が取れている様。
(他のボタンは反応しないけど、今回は使用するボタン多くないので、良しとする)

とりあえず、Aボタンにlevel、Bボタンにlumalevelを振ってみる。
Aボタンを押した時に、反応している部分を確認。
viewer activeモードにして、矢印カーソルをswitch TOPの0の値に持ってくる(levelが割り振られてるところ)
同じ操作を1の値にもBボタンで設定する。
![スクリーンショット 2024-10-30 13.32.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/b5245d9f-1e94-ac15-e3ba-3a486a804e04.png)

ゲームコントローラーでA,Bボタン操作すると、切り替わる様になりました。が、
Bボタンは押しっぱなしじゃないと値が0に戻ってしまう、、、。Indexの値が固定されるようにしないといけないのか、、、。

logic CHOPを使用するみたい。
joystick CHOP→logic CHOP
この時にlogic CHOPのChannel Pre OPの設定をRadio Buttonにする。
![スクリーンショット 2024-10-30 15.24.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/f3e245a7-ae4b-77f0-0e6c-3a6adffbe817.png)
すると、A,Bボタン押した時にセレクトが維持される様になった。


最後に、mouse inに割り振っていた、パラメータの変化操作を
ゲームコントローラーのジョイスティックに変更してみる。

新たにもう一つjoystick CHOPを作成。
![スクリーンショット 2024-10-30 16.49.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/2fd50f76-3d7d-45c9-85a9-d4dc4f54f04d.png)

ゲームコントローラーの右ジョイスティックがどこに反応しているのか確認。
![スクリーンショット 2024-10-30 16.43.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/607ded0e-9fdb-4347-f493-a4aa44df4924.png)
(スティック動かしながら、確認、、、)
どうやらZの数値が動くようだ。

mouse inの時同様に、levelとluma levelの設定に対して、リンクさせます。

![スクリーンショット 2024-10-30 16.54.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/3d2c6db0-b328-9ed9-30d0-4062a91ead3f.png)
levelに対してはinvertとgammaに。

luma levelに対しては、ganmaとcontrastに付与！
![スクリーンショット 2024-10-30 16.55.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/419095f2-8ba6-f669-fda4-2cf79ca8c55a.png)

これで今回、制作したいアウトプットの作業は完了。
◼︎コントローラーの操作
・Aボタンでバナナに対してのlevelエフェクトを選択
・Bボタンでバナナに対してのluma levelエフェクトを選択
・右スティックでバナナに対してのエフェクトの数値を変動させる
![IMG_2036.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/0fb972a0-e8ae-cb3f-34f7-264acbd36f69.jpeg)

![スクリーンショット 2024-10-30 18.37.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/edda7a16-1d2e-c57a-928d-d2e71253768e.png)
![スクリーンショット 2024-10-30 18.37.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/5a167bd2-058d-5528-b928-32ab9371555a.png)
![スクリーンショット 2024-10-30 18.37.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/f0f7e558-e903-b12c-d9f9-4cf2ca432e14.png)
![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/3dfc08c9-fddb-d6f3-27b9-ea97a5ddf2ca.gif)


本来は、音源の方に対して、イコライザー的なパラメーター拾った上で、
音源と画像の双方にエフェクトがかかることの方が美しい、とは思いつつビギナーでここまでやれたという事で、、、
今後に持ち越しとします

# 今回の学び(会得)
・画像に対しての、エフェクトの付与
・外部デバイスからの入力
・外部デバイスからの入力に対応して、操作の割り振り設定

もっと、素材毎のパラメーターというか持っている情報(音なのか色なのか)を深く掘り下げて理解できるといいと思った。
3D的な画像処理はどんな構成になるのか、興味はさらに深くなりましたね(次回作チャレンジ)


# 次回試してみたい事
一つのソフトとして、ある程度成立するビジュアライザの制作。
＋タイポグラフィーの表示
＋背景ビジュアルの制作
＋上記の素材の差し替えが容易にできる実装にする
(ちょっとしたライブでVJできるくらいのクオリティを目指す)

をチャレンジしてみたいと思います。