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

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

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

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

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

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

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

\ あなたの会社の新規お客さまをデジタル化で創出【今なら無料】/

TouchDesignerとは

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

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

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

TouchDesignerの特徴

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

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

  • 「.obj」などの3DCGの拡張子がそのまま使える
  • Mac、Win両方で使用可能(例:vvvvはWinのみ、QCはMacのみ)
  • Python, GLSL, C++による幅広い拡張性
  • リファレンスが充実している


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

    >> TouchDesignerの公式サイト

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

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

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

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

  • 1.画像を3D化
  • 2.マテリアルの指定
  • 3.オーディオ認識
  • 4.パラメータへの値の入力


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

    canvas logo

    2D画像の3D化

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

    canvas logo

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

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



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



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

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

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



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

    canvas logo

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

    canvas logo

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

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

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

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

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

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

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

    canvas logo

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

  • Camera COMP
  • Light COMP
  • Render TOP


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



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

    Materialの指定

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

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



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

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

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

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

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



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

    各オペレーターの解説

    オペレーター名 説明
    COMP(Component) プログラムを作成する際の下地のようなもの
    SOP(Surface Operator) 主に3Dを処理する際に使用
    TOP(Texture Operator) 主に2Dを処理する際に使用
    MAT(Material) マテリアル。主に3Dと一緒に使用
    CHOP(Channel Operator) 数値関連。デバイスから信号を入出力する際等にも使用

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

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

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



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

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

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

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



    今のままでは、マイナスの値もそのまま増幅していますので、「1」より小さい値を出さないために、制限を追加します。オペレーター一覧より、「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の公式サイト

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


    ・・・・・・

    あ、ちょっと待ってください。
    もしかして、WEBサイトでお悩みではないですか?

    私たちキャンバスプロのデジタルコンテンツ・クリエイター集団です。WEBサイト制作システム構築はもとより、臨場感あふれる動画コンテンツ制作や、面白いデジタルコンテンツ制作もおてのもの。

    私たちと一緒に、あなたのお客さまが驚くようなコンテンツを一緒に作りませんか?

    >> キャンバスの会社サイト

    私たちが今までにどんなものを作って何をして来たのか。一部をこちらに載せておきますので、よかったら見ていってください。

    >> キャンバスの制作実績

    制作のご相談・ご依頼はこちらからどうぞ。

    >> 相談 or 見積 or 出来るかどうか話を聞く


    << お知らせ >>

    2022年6月10日より株式会社キャンバスより新サービス「オンリーワン設計図」をリリースしました!btobの営業活動にお悩みの企業さま、ぜひご一読ください。

    >> 「オンリーワン設計図」公式ページ

    よろしければこちらの記事もご参照ください。

    >> BtoB企業の向かう先と今後求められる営業マン ~BtoB営業マンは絶滅危惧種!? ~




    CANVAS MAIL
    SEARCH
    SERVICE
    弊社の営業資料や企画書、
    販促チラシ、実績資料、
    動画データ等を
    ダウンロードできるサービスです。
    東京オフィス
    〒107-0052 東京都港区赤坂9-5-26
    AKASAKA HEIGHTS 301
    名古屋オフィス
    〒464-0037 名古屋市千種区楠元町2-60-2
    LOFT 3B
    大阪オフィス
    〒530-0001 大阪府大阪市北区梅田2-5-13
    桜橋第1ビル304
    金沢オフィス
    〒920-0024 金沢市西念4-24-30
    MGビル302
    富山ヘッドオフィス
    〒939-8204 富山県富山市根塚町1-1-4
    ASNビル2F
    ベトナムオフィス
    Unit 615-617, 6 Floor, IMC Building, 62 Tran Quang Khai, Tan Dinh Ward, District 1, Ho Chi Minh City, VIETNAM