LoginSignup
19
14

More than 5 years have passed since last update.

TouchDesignerで音に反応させてパーティクルを吹き出す

Last updated at Posted at 2018-12-02

こちらはTouchDesigner Advent Calendar 2018 12/2の記事です。

こんにちは。先日人生初の電子工作をしました。
ezgif.com-video-to-gif.gif
ツイートしたらートンピーちゃんが鳴ります。
背景にエフェクトをつけたいと思い、TouchDesignerで作ってみました。

トンピーちゃんの音に反応してパーティクルが吹き出る

今回の記事はほぼTouchDesigner Study Weekendワークショップで教えて頂いた事の詰め合わせです..!
が、自身の復習も兼ね書かせて頂きます。間違ってる点等あればご指摘下さいますと幸いです:bow:

<全体図>
スクリーンショット 2018-12-02 8.43.29.png

1.Audio入力

PCのマイクで音を拾いました。
<構成図>
スクリーンショット 2018-12-02 8.53.35.png
各オペレータの変更箇所は下記です。(全てCHOP)

オペレータの名称 機能 いじる箇所
Audio Device In 音の入力 -
デフォルトでPCマイク入力と繋がる
Audio Device Out 音を出力 -
繋ぐとPCから音が聞こえる
Analyze 音を解析 Analyze▶︎Function▶︎ Maximum 音の最大周波数を出力
Trail 値の変化をグラフで表示 -
値の変化を視覚的に捉えるために繋ぐ
Trigger 閾値の設定
ある値を超えると1を返す
Trigger▶︎Trigger Threhold▶︎0.05 閾値の設定
Math 数値計算 Multi-add▶︎Multiply:20 音が小さいので乗算
Null 特別な機能はなし -
変更しやすくするために入れる

2.Particle

教えて頂いたカラフルなパーティクルがスーパー可愛かったのでその復習をば
スクリーンショット 2018-12-02 8.38.05.png
<構成図>
スクリーンショット 2018-12-02 8.55.55.png

2-1.パーティクルの設定部分

(全てSOP)

オペレータの名称 機能 いじる箇所
Sphere 球体オブジェクト Sphere▶︎Primitive Type▶︎Polygon 図形の分割向きを変更
Sphere▶︎Frequency▶︎2 分割数を指定
Sort 配列をソート Point▶︎Point Sort▶︎Random 頂点の配列をランダム にする
Point▶︎Seed▶︎ 2
Particle パーティクルを生成 State▶︎Particle Type▶︎Render as Point Sprites
Forces▶︎Wind▶︎Y:3
Paticles▶︎birth▶︎op('null5')['chan1'] と書く
Audioからの周波数によってパーティクルを生成
Null

2-2.ランダムカラーにする設定の部分

オペレータの名称 機能 いじる箇所
LFO[CHOP] 波の生成 Amplitude:360 色のマップに使用するので1~360
Null[CHOP]
Constant[TOP] 単色画像の生成 Constanc▶︎Color 自分の好きな色にする
HSV Adjust[TOP] HSV値を操作 HSV▶︎Hue Offset▶︎Nullを参照させる
Texture 3D[TOP] テクスチャアレイを生成 Cache▶︎Type▶︎2D texture
Cache▶︎Cashe size▶︎48 array 色マップのキャッシュを作る(48個)
Constant[MAT] 一色のマテリアルを生成 Constant▶︎Color Map▶︎Texture3Dを参照させる

2-3.パーティクル各頂点とカラー値を配列に格納

(全てCHOP)

オペレータの名称 機能 いじる箇所
SOP to SOPの頂点の座標などをCHOPデータに変換 -
パーティクルの各座標を取り出す
Pattern 周期的な定数を生成 Pattern▶︎Type▶︎Ramp Pattern▶︎length▶︎op("sopto1").numSamplesと書く パーティクル頂点数を参照
Pattern▶Ampliture▶︎op('tex3d1').par.cachesize-1 と書く 色マップのキャッシュを参照
Merge 2つをまとめる -
パーティクル各頂点とカラー値を対応させた

2-4.Geometryへの参照

オペレータの名称 機能 いじる箇所
Sphere[SOP] 球体オブジェクト -
Geometryに繋ぐ
In (Geometryの中) 入力 -
Geometryの中に入ってtorusを削除しInとOutを置く
Out (Geometryの中) 出力 -
Geometry[COMP] SOPを入れる箱 Instance▶︎Instance CHOP▶︎mergeを参照させる
TX,TY,TZ▶︎tz,ty,tzと書く
Instance2▶︎W▶︎wと書く 各頂点にカラーが割り当てられる

そしてCamera、Light、Render、Nullをそのまま繋げば完成です。

結果

ezgif.com-video-to-gif.gif
吹き出たーーーー!嬉しい!!:sob:

おしまい

まだとても未熟者ですが、かっこいい演出が作れるよう毎日ちょっとずつ触っていこうと思います。
そしてTouchDesigner Study Weekendいつもありがとうございます。
これからTouchDesigner触ってみようとしていらっしゃる方はとてもオススメなので是非ワークショップ参加してみて下さい!

TouchDesigner Study Weekend

19
14
1

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
19
14