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

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

# 今回のテーマ
・音源データと、画像データで簡易的なビジュアライザ制作してみる
ということで、ネットの恩恵を最大限に利用して、調べつつ、右往左往しながら、制作してみたいと思います。

# 制作
使用するデータは、下記
・音源データ
→こちらのフリー素材を使用させて頂くとします。(https://bgmer.net/music/lt130)
・画像データ？
→光の動きとかまで作れるなら、素材としては不要かもしれない、、、

(でいいはずだよな、、、)

ひとまず、新規プロジェクトデータを制作し、
データを並べてみたいと思います。

audio file inとaudio device outを作成
audio file in→audio device outで紐？ワイヤー？で連結
![スクリーンショット 2024-10-23 15.04.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/81d0ad04-3b98-8ccb-9543-f0eaf34c1cbd.png)

初めは音が再生されなかったですが、audio device outの設定でMacのスピーカーを選択したら無事、流れることを確認。
サンプルの音源が入っているので、用意した素材に変更できるか試してみます。![スクリーンショット 2024-10-23 15.18.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/1173dcb2-d5dd-a4d5-67c8-aa176ba81e7e.png)
audio file inの”File”から、用意した任意の素材に変更できた。(すんなり

おそらくこの後に、何かしらのoperatorを作成して、それに対してaudio file inを繋げる、、、だろう。
ビジュアライザだから、音源から、波長的な数値を拾うものになりそうだが、(調べる

まんま、やりたい事をしていた方の記事があったので救われた。。。
analyzeを追加して繋げる![スクリーンショット 2024-10-23 16.21.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/fec9be9d-cd25-ad3d-60b9-09f1635273d0.png)
analyzeのfunctionを”RMS Power”に設定するといいらしい。
2ch分のパラメーター(？)が出てきた。

さて次は、
エフェクトをかける図形を設定する
TOP(operatorって呼んでたけど、作成する種類で呼称するらしい)でcircle、transform、outを作成
![スクリーンショット 2024-10-23 18.30.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/afd5f427-2057-da22-963e-cda15c60eb87.png)
circle→transform→outをの順でワイヤーを繋ぐ

そしてtransformに対して、先ほど作成したanalyzeの各チャンネルのパラメーターをリンクさせる
(ここがどうにもうまくいかなくて時間食われてしまったが、調べまくってなんとか解決)

![スクリーンショット 2024-10-23 18.36.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/3f942a14-43c9-2011-dd51-5d0a48074eb4.png)
scaleの値に対して、analyzeのch1と2のパラメータの数値をリンクさせなくてはいけなくて、
手順としては、
analyzeの右下のviewer activeボタンを押して、アクティブ状態にする
![スクリーンショット 2024-10-23 18.44.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/41a7b126-7cae-4959-dc0f-5486c81a107a.png)
上下にチャンネルが割り振られているので、
選択しながらドラッグすると、右矢印になるので、そのままtransformのscaleのx値まで持ってくる
![スクリーンショット 2024-10-23 18.45.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/cd121f7a-dee2-37ae-15c4-48ed99fa3687.png)
するとどう貼り付けるか選択肢が出てくるので、CHOP referenceを選択する
![スクリーンショット 2024-10-23 18.45.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/83ed9403-4f4a-92eb-0754-dfc637639a12.png)
すると、そのまま値が自動で反映される(音源データ再生しているなら、数値が動いてるはず)
![スクリーンショット 2024-10-23 18.45.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/531204fa-2fda-6509-fde6-0fbd8584749b.png)
もう一つのchも同様にリンクを設定する。
![スクリーンショット 2024-10-23 18.45.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/92f62675-a963-1099-8bd0-25ae44970658.png)


![スクリーンショット 2024-10-23 18.56.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/33598361-f89c-81fc-8d2c-68ad5a50f41a.png)
すると、X/Yでそれぞれチャンネルの数値ごとにサークルの図形が変動するようになった
(circleの最大値が1なのに対して、analyzeの変数値が小さめなので、動きの変化が少し小さくなってしまった)
(サイズの変更の仕方は、後で何かあるか試してみようと思う)

この作成したoutを適当な画像に付与してみる。

moviefileinでバナナを召喚(チュートリアルでは定番らしい)
displaceも作成し、上で作成したoutとバナナをdisplaceに繋げてみる。

![スクリーンショット 2024-10-29 10.42.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/6d61d2e9-3cb2-9550-b9ef-ea19d6d555e2.png)
あれ？バナナに効果は付与されてるっぽいが、全然上手くいっていない、、、
原因を探ってみよう。

試行錯誤、、、
outの前にあったtransformに対して、バナナを繋げると見事にバナナに効果が付与されて、
無事バナナが大きくなったり、小さくなったりした。
![スクリーンショット 2024-10-29 10.51.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/4c781557-0d24-bff7-d86b-75d5856bff9e.png)

(この時バナナを繋げると同時に、circleの接続は切れた。transformに対して何か付与するのは、1つに限定されるってことか？並行で素材を混ぜたりしたいときはまた別の方法が必要って事ですな)

しかしまだ、バナナがそもそも小さいので、大きくしたい。
trancformの後にfitを設置して、scaleの数値をx,yともに1→5に変更することで、無事バナナの大きさ調整に成功。![スクリーンショット 2024-10-29 13.10.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/d99506d9-eac1-e386-ed43-aa68b9796812.png)

![スクリーンショット 2024-10-29 13.09.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676211/80768c4c-45a3-59c8-08c8-52a27914df08.png)


# 今回の学び(会得)
・analyzeで音のパラメータを取得する
・音素材のパラメーターの数値を別の素材(今回は最終的にバナナ)に付与させられた。
・2ch分のパラメーターをx,y値にそれぞれ付与したのでバナナは上下左右で別の変化が起こる。
・素材の大きさの調整はfitを使用し、scaleの数値をいじる。
・現状は簡単な動きのプログラムしか組んでいないが、もっと複雑に組んだときに、配置などの整理整頓を意識しながら作成しないと後で痛い目を見そう


# 次回試してみたい事
・今回組んだバナナビジュアライザに対して、別のパラメーターを設定して(外部入力？)、ビジュアライザ(大きさ変動)は作動しつつ、バナナの色が変化する仕様にしてみる。