TouchDesignerで音の波形を描画する方法!オーディオビジュアルアーティストへの第一歩

投稿日:2018-04-08



ナカジ(@cp_nakajun)です。

先に申告させて頂いておきます。

すでに素晴らしいTouchDesiner本「Visual Thinking with TouchDesigner – プロが選ぶリアルタイムレンダリング&プロトタイピングの極意」が存在し
今回のテーマについてもとりあげられているのはわかってます。(この本持ってますので)

ですが

  • 個人的に以前から取り上げたいテーマであったこと
  • 自分にTDの当たり前の知識がなかった為か、本の通りにやるにも補足知識が必要だと思った

という理由で書かせて頂こうと思います。

なので本と被りますが、著者・出版社様に迷惑をかけないような内容と程度でいきます。
(当ブログメディア的にはこの記事をきっかけにTouchDesinerユーザーが増え、本を手にとり、アーティストが増えることを目指してます)

と、先に言い訳をたくさん書きましたが

ちゃんと上記の本を最初から読んでおけば、おそらくすんなりできたであろうことですが
そうはいかなかった僕の補足です。

オーディオ波形を描画する TouchDesiner099

今回の完成形は以下のようにオペレーターを繋ぎます。


今回やることの基本的な流れはCHOPでオーディオを解析して値にし、その値をY軸データとしてSOPで描画、レンダリングする。という流れです。



最初はCHOPの「Audio File In」。これは読んで字のごとくオーディオファイル再生オペレーターです。

次は、CHOP「Math」これは再生したオーディオファイルのゲインですかね。


SOPに値を渡す為にCHOPの「null」に渡します。

次はSOPです。

「Grid」→「CHOP to SOP」と繋ぎます。

各オペレータは以下のように設定してください。




次に「Geometry」に繋ぐわけですが、ここで僕はちょっとつまづきまして…

普通にGeometryを置いてもSOPに繋げません。(入出力がない)

なので「Geometry」をダブルクリックしてGeometryの中に入ります。
するとデフォルトでは「トーラス」が配置されてます。


この「トーラス」を削除し、SOPオペレーターの「In」と「Out」を配置して繋ぎます。


繋ぐと以下のような感じです。


この時のポイントは「Out」オペレーターの右下の紫の丸(Render)を点灯させておきます。

「Geometry」からプロジェクトに戻ったら「Geometry」の右下の紫の丸(Render)を点灯させます。

あとは上記の画像のように「WireFrame」「Render」「Camera」を配置します。

「Geometry」のMaterialに「WireFrame」を設定し、「Render」に「Camera」を設定すれば今日は完了です。



「Render」オペレーターの右下、青い丸(Display)を点灯させると下記のようになります。



今日はここまで。

オーディオビジュアルアートをやるにはここから音声を解析したりしながら表現を煮詰めていきます。

前出の本「Visual Thinking with TouchDesigner – プロが選ぶリアルタイムレンダリング&プロトタイピングの極意」のサンプルもかっこいいので興味がある方はぜひ手にとってみてください。

もちろんTouchDesignerに興味を持った方は入手マストです。損はありません。

サポート募集中

この記事はお役に立てましたか。
よかったら、コーヒー ☕ をご馳走いただけたら励みになります。



TouchDesigner学習におすすめ



おすすめのクリエイティブ・コーディング関連カテゴリー

クリエイティブコーディング系 講座


ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します