TouchDesignerの使い方【入門編】オーディオビジュアライザーを作ってみよう

「コーディング」というと何を思い浮かべるでしょうか。

Webサイト制作している場合はピンとくるかと思いますが、コーディングはコードを作成することです。そして、コードとはいわゆるプログラミングで、何かしらの文字を打ってプログラムを走らせ、表現することを指します。

そして、コーディングの一つの方法として「クリエイティブコーディング」があります。

クリエイティブコーディングは同じプログラミングでも、映像やアニメーション、サウンドに特化していて、楽しくワクワクするコーディングが可能なのです。

そこで今回は入門編として、TouchDesignerを使ったオーディオビジュアライザーの作成手順を紹介していきます。

TouchDesignerとは

実際の作り方を解説する前に、もう少しTouchDesignerについて詳しく紹介しておきましょう。

TouchDesignerはノードベースのプログラミングツールで、モジュール同士をワイヤーで組み合わせてプログラムを行います。似たようなツールとしては「vvvv」「Max/MSP」「quartz composer」などがあります。

これらはノードベースでプログラミングを行えるので、直感的なコーディングが可能となります。主にクリエイティブ・コーディングで使用されます。

TouchDesignerの特徴

TouchDesignerの特徴としては3DCGの拡張子がそのまま使え、しかもMacとWindows両方で使用が可能です。ちなみに先ほどもちらっと紹介したvvvvはWindowsのみで、QCはMacのみ使用可能となっています。

また、TouchDesignerはPython、GLSL、C++による幅広い拡張性があり、リファレンスも充実しています。

「面白そうだからちょっとやってみようかな」という場合は以下の公式サイトからダウンロードしてお使いください。

＞＞　TouchDesignerの公式サイト

商用で利用しない限りは無料で使えます。

オーディオビジュアライザーの作り方

それではさっそく、TouchDesignerを使ってオーディオビジュアライザーを作成する手順をみていきましょう。今回は音に合わせて、反応するオーディオビジュアライザーの作成します。

今回はこちらの弊社キャンバスの会社ロゴ画像を使用します。

2D画像の3D化

まずは2D画像の3D化を行っていきます。
TouchDesignerを起動すると以下の画面が表示されます。



「Ctrl+A」→「delete」(もしくは右クリック→ドラッグで範囲指定)で全てのオペ―レーター(※表示されているオブジェクトのこと)を削除します。

右クリック「Add Operator」→タブ「COMP」→「Geometry」を選択します。
Searchで検索することで対象を絞ることもできます。



以下のオペレーターが表示されます。



配置した「Geometry COMP」は3DCGをレンダリングする際の素材が格納されている箱のようなものです。今回はキャンバスのロゴ画像を3DCG化するために使用します。

TouchDesignerの操作画面は階層構造になっており、オペレーターをクリックし、選択した状態で「i」キーを押下すると、「Geometry COMP」内の階層に入ることができます。

さきほどの上階層の「Geometry COMP」に表示してあったのが、「torus1」です。



デフォルトで格納されている「torus1」を削除し、今回使用する画像をドラッグ&ドロップします。
svgが対応していないのでpngに変換したものを使用しています。



2D画像を3D化するために「Trace SOP」を呼び出します。
右クリック「Add Operator」→タブ「SOP」→「Trace」を選択します。



「Trace SOP」のパラメータ項目「TOP Name」に画像のオペレーター名(今回の例では「canvas」)を入力すると、灰色の矢印が表示され、ロゴが表示されます。

「canvas」の右端のワイヤー接続部をクリックし、ワイヤーを出した状態で、TABキー、オペレーター選択でも同じことが出来ます。これで3D化が完了しました。

「trace1」右下の「+」を押すと、マウスでぐりぐり動かせるのが確認できます。

ここから厚みを出していくために別のオペレーターをつなぎます。
右クリック「Add Operator」→タブ「SOP」→ 「Extrude」を選択します。

このオペレーター同士を繋ぐには、接続元のオペレーターの右端をクリックし、ワイヤーを出し、接続先のオペレーターの左端をクリックします。接続先が二つあるので上に接続します。

これでロゴに厚みが出ました。
厚みの幅はパラメータ、Values→Depth Scaleで変えられます。

この際、「extrude1」の紫色の●が光っていない場合は、クリックしRenderFlagを立てましょう。



「u」キーを押下し、上の階層へ戻ります。今の状態では何も表示されていません。Geometry内のソースを使用する際は、基本お約束として、以下の3つのオペレーターが必要となります。

上記を配置すると自動的にワイヤーで接続状態になり、Render TOPにロゴが出力されます。



ちなみにRender TOPに対して、右クリック、「View…」で別ウィンドウで表示の確認が行えます。
表示されている画像が小さい場合はGeometryのパラメータ→タブ「Xform」内の「Scale」の値を調節してみてください。

Materialの指定

TouchDesignerでは一般的な3DCGソフトと同様にマテリアルをオブジェクトに対して指定することができます。

オペレーター一覧「MAT」→「Wireframe」をクリックしましょう。
表示されたオペレーターを「geo1」にドラッグ&ドロップし、「Parm:Material」を選択します。



「geo1」と「wireframe1」が接続され、ロゴがワイヤーフレーム表示になりました。

オペレーターの種類について

ここまでオペレーター同士の接続には、「ワイヤーを手動で引っ張ってそのまま接続する」方法と、「パラメータにオペレーター名で指定、またはTABキーで指定する」方法の二種類で行ってきました。
この2つの違いを簡単に説明します。

これまでオペレーターを選択する際には、タブで「TOP」「SOP」「COMP」等のカテゴリ選択してから、指定のオペレーターを追加していました。

同じカテゴリ(型)同士はそのままワイヤーを引っ張って接続できるのですが、別カテゴリ同士を繋ぐ場合には、型変換が必要となり、そのまま引っ張っての接続はできず、「パラメータで指定、またはTABキーで指定する」が必要だったというわけです。



上記画像の状態ですと、オペレーターはカテゴリ毎に色で分けられており、ワイヤー接続時に同種のオペレーターはそのカテゴリ色のワイヤーになり、型変換が行われているものは、破線のワイヤーで接続されます。

各オペレーターの解説

オーディオビジュアライザーの作成

ここからの処理としては、オーディオから出力されている値を増幅させ、ロゴのスケール(大きさ)へ値を代入、音に合わせて、画像の大きさが変化するということまでを行います。

右クリック「Add Operator」→タブ「CHOP」→ 「Audio Device In」をクリックします。
パラメータ「Driver」を選択し、音声入力があるデバイスを選択すると、波形が動くのが確認できます。



「Audio Device In」から出力されている値は現在のままでは小さいので、別のオペレーターを接続し、値の増幅を行います。

オペレーター一覧から「CHOP」→「Math」をクリック、「audiodevin1」と「math1」をワイヤー接続すると、同じ値が「Math」にも表示されます。

こちらのオペレーターでは入力された値に対して、四則演算等の計算が出来ます。

今回はタブ「Mult-Add」→「Multiply(乗算)」の値を「20」にします。値については環境に合わせて調節してください。



今のままでは、マイナスの値もそのまま増幅していますので、「１」より小さい値を出さないために、制限を追加します。オペレーター一覧より、「CHOP」→「Limit」をクリック、「math1」からワイヤ接続をし、以下の画像を参考にパラメータを調節しましょう。

パラメータに値の代入

「geo1」を選択した状態で、「limit1」の「＋」ボタンをクリックし、「limit1」内に表示された「chain1」を「geo1」のパラメータ「Scale」にドラック&ドロップすると選択項目が表示されるので、「CHOP Reference」をクリックします。



すると音に合わせて、画像が横に伸びます。
現在は横幅(x)のみ適応しているので、高さ(y)も適応します。

同様にドラック&ドロップで適応してもいいのですが、GeometryのScale項目にマウスをホバーすると「＋」が表示されるので、そちらをクリックします。すると、以下のパラメータが表示されます。



これは現在パラメータに適応されているオペレータの値がPythonの文法で記載されています。オペレーター(op)の名前「limit1」の「chain1」を適応している状態です。

あとは、sxに記述されている「op(‘limit1’)[‘chan1’]」をそのままsyにもコピペしましょう。
これで音に合わせて大きさが変化するオーディオビジュアライザーが完成しました。

お手軽にかっこいい表現が出来るTouchDesignerを使ってみよう！

今回はTouchDesignerの使い方の入門編ということで、オーディオビジュアライザーの作り方を紹介しました。

筆者はノードベースのプログラム言語はQuartz Composerを結構使っていたのですが、初めてTouchDesignerを触ったときは、お手軽にかっこいい表現が出来るという点で凄く感動しました。

今回、サンプルで作成したものにエフェクト等を追加するだけでも、かなりカッコイイ表現ができるので、まだ触ったことがないという人はぜひ遊び感覚で触ってみてください。

TouchDesignerのダウンロードはこちらからどうぞ。

＞＞　TouchDesignerの公式サイト

今回は以上です。
最後までお読みいただきましてありがとうございました。