のぐそんブログ

暗いおじさんがシコシコ書くブログです。

パーティクルで花火のような演出

TouchDesigner

TouchDesigner Study WeekendというTouchDesignerの勉強会で学んだことのまとめです。 TouchDesignerは私のような初心者には、高機能すぎて何をしたらよいのかわからなくなることが多いのでこの勉強会は貴重だと思っています。

今回の完成イメージはこちらです。

花火風のパーティクルを作る

まずは↑のような花火のベースとなるパーティクルを作ります。 これは簡単でSphere SOPを利用します。

構成は↓のような感じになります。

特別な設定はしておらず、下記以外は初期値のままです。

  1. Sort SOPのPoint Sortをrandom
  2. Transform SOPのUniform Scaleを0.1

Sphere SOPを移動させる

現状のままだと花火が中央に常にいるので、 10秒(600フレーム)に一回ランダムな値が生成して、移動させます。

構成は↓です。

① content CHOPにフレームカウントを設定

フレームの値を取得します。 デフォルトだと0 ~ 600の値が繰り返されます。

② Expresstion CHOPとCount CHOPでカウントアップ

600フレーム毎に1カウントずつインクリメントしていきます。

まず、Expresstion CHOPのExprに、me.inputVal == 600を入れます。 これで値が600になった場合(10秒に1回だけ）値が1になります。

そして、Expresstion CHOPをCount CHOPに繋ぐことで、600フレームごとに1カウントずつインクリメントされていきます。

③ Pattern CHOPでランダムな値を作成

Pattern CHOPを利用して、座標用のランダムな値を作成します。

  1. 手順②で作ったCount CHOPの値をPattern CHOPのSeed代入します。
  2. TypeをRandom per Cycleにします。
  3. lengthには600を設定します。なぜ600なのかがよくわかりませんでした。。。

そして、XとY座標分の値を作成する為、Channel Namesをt[xy]にします。

Pattern CHOPの値は0.0〜1.0になる為、画面上の座標に合うようにMath CHOPで値を調整します。

④Sphere SOPを移動

手順③で作成した値を利用してSphere SOPを移動させます。

これで、600フレームごと(10秒ごと)に花火がランダムに移動するようになります。

パーティクルの表示するタイミングを調整する

Sphere SOPを利用して花火のパーティクルを作成していますが、常にパーティクルが散っているのであまり花火に見えません。

移動させたタイミングでパーティクルを生成してみます。 Sphere SOPの座標データを利用して移動のタイミングを測ります。

①Sphere SOPの座標をConstant CHOPに入れます。

②Feedback SOPを利用して、1フレーム前のphere SOPの座標を保持する

Feedback SOPを利用することで、1フレーム前のphere SOPの座標の値を保持しておくことができます。 現在のフレームでの座標と、1フレーム前の座標が異なっていた場合は、移動したと判定します。

差分を出すためにMath CHOPを利用します。

Math CHOPのCombine CHOPsをSubtractにすることで、現在の座標と、1フレーム前の座標を引き算してくれます。

③差分値を使って移動のタイミングを判定

Math CHOPで引き算した値をExpression CHOPを使って判定します。 判定する式はme.inputVal != 0とします。

④Trigger CHOPで値の変化を調整する

Expression CHOPの値をそのまま使うと、値の変化が急すぎてパーティクルが一瞬しか見えません。 そこで、Trigger CHOPを使って、値の変化を調整します。

Attack Length(ピーク値到達する時間)を0にします。 Peak Length(ピークを維持する時間)を0.1にします。

Sustain Levelを0にします。

⑤Particle SOPのBirthに値を設定する

Particle SOPのBirthにTrigger CHOPで作った値を設定します。 ただし、Trigger CHOPの値が小さい為、Math CHOPで1000倍にします。

あとはパーティクルにつないで完成です。

色をランダムに変える

Noise TOPを利用して、花火の色をランダムに変更していきます。

①Noise TOPのResolutionを1px × 1pxにする

②Count CHOPでカウントアップした値をNoise TOPにわたす

Expression CHOPが実行されたタイミングでCount CHOPをカウントアップしていきます。 その値をNoise TOPseedに追加することで、花火の色を変更することができます。

サンプルファイル

サンプル