2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-12-19

前置き

僕自身は、プログラミングのプの字も齧れていない開発ド素人。
最近、開発チームに正式アサインが決まり、自分の武器を作る為、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

初めは音が再生されなかったですが、audio device outの設定でMacのスピーカーを選択したら無事、流れることを確認。
サンプルの音源が入っているので、用意した素材に変更できるか試してみます。スクリーンショット 2024-10-23 15.18.27.png
audio file inの”File”から、用意した任意の素材に変更できた。(すんなり

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

まんま、やりたい事をしていた方の記事があったので救われた。。。
analyzeを追加して繋げるスクリーンショット 2024-10-23 16.21.00.png
analyzeのfunctionを”RMS Power”に設定するといいらしい。
2ch分のパラメーター(?)が出てきた。

さて次は、
エフェクトをかける図形を設定する
TOP(operatorって呼んでたけど、作成する種類で呼称するらしい)でcircle、transform、outを作成
スクリーンショット 2024-10-23 18.30.51.png
circle→transform→outをの順でワイヤーを繋ぐ

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

スクリーンショット 2024-10-23 18.36.04.png
scaleの値に対して、analyzeのch1と2のパラメータの数値をリンクさせなくてはいけなくて、
手順としては、
analyzeの右下のviewer activeボタンを押して、アクティブ状態にする
スクリーンショット 2024-10-23 18.44.45.png
上下にチャンネルが割り振られているので、
選択しながらドラッグすると、右矢印になるので、そのままtransformのscaleのx値まで持ってくる
スクリーンショット 2024-10-23 18.45.03.png
するとどう貼り付けるか選択肢が出てくるので、CHOP referenceを選択する
スクリーンショット 2024-10-23 18.45.15.png
すると、そのまま値が自動で反映される(音源データ再生しているなら、数値が動いてるはず)
スクリーンショット 2024-10-23 18.45.27.png
もう一つのchも同様にリンクを設定する。
スクリーンショット 2024-10-23 18.45.41.png

スクリーンショット 2024-10-23 18.56.47.png
すると、X/Yでそれぞれチャンネルの数値ごとにサークルの図形が変動するようになった
(circleの最大値が1なのに対して、analyzeの変数値が小さめなので、動きの変化が少し小さくなってしまった)
(サイズの変更の仕方は、後で何かあるか試してみようと思う)

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

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

スクリーンショット 2024-10-29 10.42.25.png
あれ?バナナに効果は付与されてるっぽいが、全然上手くいっていない、、、
原因を探ってみよう。

試行錯誤、、、
outの前にあったtransformに対して、バナナを繋げると見事にバナナに効果が付与されて、
無事バナナが大きくなったり、小さくなったりした。
スクリーンショット 2024-10-29 10.51.48.png

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

しかしまだ、バナナがそもそも小さいので、大きくしたい。
trancformの後にfitを設置して、scaleの数値をx,yともに1→5に変更することで、無事バナナの大きさ調整に成功。スクリーンショット 2024-10-29 13.10.14.png

スクリーンショット 2024-10-29 13.09.01.png

今回の学び(会得)

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

次回試してみたい事

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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?