本日もオンデマンドでTDSWの教材を用いながらTouchDesignerの基本について学んでいきます!
本日の内容は2本です。
簡単な画像処理とFeedback
Switch TOPとキーボード入力
早速動画を観ながら学習を進めてきましょう!
1. 2本のTDSWの動画を順番に閲覧しながら実際に手元でプログラミングしてみる
2. プログラミングした内容を元に少しだけサンプルのものから変化させてみる
3. 作成したプログラムを以下のフォームから提出してください!
(オンデマンド教材)
p5.jsのp5.Imageクラスは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。
今回はp5.jsに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。
応用
課題: p5.jsに読み込んだ画像ファイルのデータで表現する!
今回のオンデマンド講義の内容は以下の通りです。
1. TouchDesigner概要
2. TouchDesignerのインストールとキー登録
3. TouchDesignerはじめの一歩
課題フォームの提出をもって、この回に出席したものとします。
Astro Immersive AV Performance – Weidi Zhang
Fragment Shadow Generating Fragmented Shadows with Multi-Projectors Geometry and Color Calibration
Natural Encounters an emotional link between human and algorithm
404.zero live at Diage Festival, Bangkok, 2023.
その他沢山の作品が Derivative社のShowcaseで逐次公開されています。参考にしてみてください。
TouchDesignerはProcessingやopenFrameworksのようなオープンソースの開発環境ではなく、Derivative社が販売している製品 (プロプライエタリソフトウェア) です。しかし、非商用の利用の場合には無料で使用可能です。
ライセンスの詳細は以下を参照。
この演習では、NON-COMMERCIAL版を使用します。以下のような制限があります。
最初はNON-COMMERCIAL版で使用して、もしより本格的に使用したいと思った場合はEDUCATIONAL版を購入すると良いでしょう。
TouchDesignerはアプリケーションをインストールした後に、アカウントに付与されたキーを登録する必要があります。以下の手順で行いましょう。
ユーザー登録: Derivativeのサイトからユーザー登録
TouchDesignerをダウンロード
TouchDesignerを起動してキー登録
アプリケーションの再起動
本日は、まずTouchDesignerはじめの一歩として「バナナを回す」という課題をやってみたいと思います。以下の映像のチュートリアルに準拠しています。
さらにもう1本!
完成イメージ
Derivative社が提供しているオンライン教材「The 100 Series: TouchDesigner Fundamentals (TouchDesigner入門)」を使用して入門から基礎的な内容を学ぶことが可能です。熱意のある受講生の方は先取りしてどんどん予習していってください。
タッチデザイナーの文法
新しいツールや開発環境の学習の大半は、すべてのノブやボタンがどこにあるかを把握することから始まります。この最初のレッスンでは、TouchDesignerを使いこなすことに焦点を当て、必要不可欠なインターフェース要素とコントロール、そして各オペレーターファミリーの基本原則を学びます。
今回は、「パーティクルシステム (Particle System)」をTouchDesignerを用いて実装する方法を解説していきます。
パーティクルシステムとは、多数の微細な要素、つまり「パーティクル」の集合体を用いて、自然現象や抽象的なエフェクトを表現するための技術です。例えば、炎の揺らめき、立ち上る煙、舞い散る雪、きらめく星屑、爆発の破片など、その形状が一定でない、いわゆる「不定形」な対象の表現に適しています。個々のパーティクルは、それぞれが独立した位置、速度、加速度、色、透明度、大きさ、そして寿命といった属性（パラメータ）を持っています。これらの属性は、設定されたルールや時間経過、あるいは外部からのインタラクションに応じて変化します。一つ一つのパーティクルは比較的単純な法則に従って振る舞いますが、それらが何千、何万と集まることで、全体として非常にリアルで複雑な視覚効果を作り出すことができます。このパーティクルシステムは、映画のVFX（視覚効果）、ゲームの演出、さらにはインタラクティブアートやインスタレーション、データビジュアライゼーションなど、多岐にわたる分野で活用されています。
TouchDesingerでは、Particle SOPを用いることでとても簡単にパーティクルの生成と制御が可能です。また、生成したパーティクルにスプライト画像を適用したり、ジオメトリインスタンシングを用いてパーティクルの一粒ごとに3Dオブジェクトを配置することも可能です。今回はTouchDesingerのパーティクル表現についていろいろ実験していきます。
ここまでの内容は、主にドラムサウンドを用いてStrudelのプログラミングの導入を行いました。今回も引き続きStrudelによるサウンドプログラミングを学びます。前回はドラムでしたが、今回はシンセサイザーで旋律を演奏していきます。note() 関数を用いて音程を指定することで様々な方法でメロディーを生成することが可能です。実際に音を聞きながら試していきましょう。
後半は、和音 (コード) と旋法 (スケール) について解説していきます。和音とは、高さの異なる複数の音が同時に響き合うことで生まれる音の調和です。最も基本的なものは3つの音で構成される三和音で、明るい響きの長三和音（メジャーコード）や、少し影のある響きの短三和音（マイナーコード）などがあります。これらは楽曲の土台となり、曲の雰囲気や感情を豊かに表現します。一方、旋法とは、ある音階（ドレミファソラシドなど）の中で、中心となる音（主音）が決められ、その音を中心に他の音が配置された音の並び方です。代表的なものに、明るく楽しい雰囲気の長調（メジャースケール）や、哀愁を帯びた雰囲気の短調（マイナースケール）があります。旋法はメロディを作る際の基礎となり、楽曲の性格を決定づけます。和音は、この旋法を構成する音を元に作られるため、両者は密接に関係しています。
参考:
レナード・バーンスタインによるレクチャー。数世紀に渡る西洋音楽の和声の発展の歴史を2分に圧縮して解説!!
映像資料その2:
(主にJ-POPの) いろいろな有名な楽曲は、実は同じコード進行から作られていた! 「カノン進行」と「王道進行」。
音符と旋律
// シンプルにシンセを鳴らしてみる
$: s("supersaw*4").note(60)
// 音階で指定
$: s("supersaw*4").note("c4")
// 半音階、シャープ
$: s("supersaw*4").note("cs4")
// 半音階、フラット
$: s("supersaw*4").note("df4")
// シンセの音色の種類を変えてみる
$: s("supersaw sine square triangle").note(60)
// 音階を弾く
$: s("supersaw*4").note("c d e f")
// ランダムな音階
$: s("supersaw*4").note(irand(12).add(40))
// 短かい持続
$: s("supersaw*4")
note(irand(12).add(40)).legato(0.2)
// 短かい持続と長い持続
$: s("supersaw*4")
.note(irand(12).add(40)).legato("<0.2 1.0>*4")
// メロディーの生成
$: s("supersaw*8")
.legato("<1.2 0.5>*8")
.note("<c4 e4 f4 g4 b4>*8"
// メロディーの生成
$: s("supersaw*8")
.legato("<0.5 1.2>*8")
.note("<c4 e4 f4 g4 b4>*8"
.add("0 -12")
.add("[0, 7, 12]"))
// メロディーの生成2
$: s("supersaw*8")
.note("{40 44 45 47 49 52}%11".add("[0, <5 7>, 12], 24"))
// メロディー + フィルター + エフェクト
$: s("supersaw*8")
.note("{40 44 45 47 49 52}%11".add("[0, <5 7>, 12]"))
.lpf("<400 2000 1200 8000>*8").delay(0.75).delaytime(0.125)
// メロディー + フィルター + エフェクト その2
$: s("supersaw(11, 16)")
.note("{40 47 52}%21"
.add("[0, <5 7 -5>]")
.add("<0 12 -12 24>*4"))
.lpf(sine.segment(32).range(400, 8000)).resonance(12)
.delay(0.75).delaytime(0.125).delayfeedback(0.7)
// メロディー + フィルター + エフェクト + リズム
$: s("supersaw(5, 16, [0, 5, 12])")
.note(
"<c d e f g a>*2"
.add("[0, <12 -12>]")
.add("[0, 7, 12]")
.add("<-12 -12 -12 0>/8")
)
.legato("<0.5 1.7>*2")
.delay(0.75).delaytime(0.625).delayfeedback(0.5)
.lpf(sine.segment(32).range(100, 8000)).resonance(10)
$: s("bd(3, 8), [~ hh]*4")
.bank("RolandTR909")
.gain(1.3)
// メロディー + リズム その2
$: s("supersaw(7, 16, [0])")
.note("<c f g>*8".add("[0, 7] [0, 12]".add("<0 7 -12>*8")))
.legato("0.7 1.5")
.lpf(sine.slow(32).range(1200, 8000)).resonance(10)
.delay(0.2).delaytime((3/8))
.jux(iter(16)).gain(0.7)
$: s("supersaw(11, 16, [3])").note("<c2 f2 g2>, <c1 g1>*4".add("[0, 7, 12]"))
.legato("0.9 0.5")
.lpf(sine.slow(12).range(2000, 4000)).resonance(10)
.delay(0.7).delaytime((5/8)).delayfeedback(0.8)
.gain(1.0)
$: s("hh(9, 16, 3), cp(9, 16, 5)")
.delay(0.7).delaytime((4/8)).delayfeedback(0.8)
$: s("bd(3, 8)").gain(2.0).bank("RolandTR909")コードとスケール
// 音を同時に鳴らす
$: s("piano*4")
.note("[c, e, g]")
// --------------------------------------------
// コード (Chord = 和音)
// コードを演奏する
$: s("piano*4")
.chord("C").voicing()
// いろいろなコードを試してみる
$: s("piano*4")
.chord("<C F G>").voicing()
// カノン
$: s("piano*4")
.n("[1, 2, 3, 4]")
.chord("<C G Am Em F C F G>").voicing()
// 王道進行
$: s("piano*2")
.n("[1, 2, 3, 4, 5]")
.chord("<FM7 G7 Em7 Am>").voicing()
// 王道進行アンサンブル
$: s("supersaw(11, 16)")
.n("[1, 2, 3, 4, 5]")
.chord("<FM7 G7 Em7 Am>").voicing()
.lpf(sine.slow(32).range(1000, 8000)).resonance(10)
.room(0.9)
$: s("supersaw(9, 16)")
.note("<F2 G2 A2 E2>".add("< -12 0 12>*4"))
.lpf(sine.slow(24).range(1000, 8000)).resonance(8)
.room(0.9).gain(1.8)
$: s("bd(3, 8), hh(4, 8, 1)").bank("RolandTR909")
.gain(1.2)
// 王道進行アンサンブル + 分数コード
$: s("supersaw(9, 16, 3)")
.n("[1, 2, 3, 4, 5]")
.chord("<FM7 G7 Em7 Am>").voicing()
.lpf(sine.slow(32).range(1000, 8000)).resonance(10)
.room(0.9)
$: s("supersaw(9, 16)")
.note("<F2 E2 D2 [C2 A1]>/2".add("< -12 0 12>*4"))
.lpf(sine.slow(24).range(1000, 4000)).resonance(10)
.gain(1.8)
$: s("bd(4, 8), hh(4, 8, 1)").bank("RolandMC303")
.delay(0.5).delaytime(3 / 8)
.gain(1.3)
// --------------------------------------------
// スケール (scale = 旋法)
// イオニアンスケール
$: s("piano*8")
.n("0 1 2 3 4 5 6 7")
.scale("C:ionian")
// スケール内の音をランダムに演奏する
$: s("piano*8")
.n(irand(12))
.scale("C:hirajoshi")
// スケールによる即興
$: s("supersaw(5, 8)")
.n(irand(19))
.scale("C1:pentatonic").jux(rev).room(0.8)
.delay(0.7).delaytime(3 / 8)
.lpf(rand.range(400, 5000)).resonance(12).legato(1.2)
$: s("supersaw*16")
.n(irand(19))
.scale("C3:pentatonic").jux(rev).room(0.8)
.lpf(rand.range(400, 4000)).resonance(8)
.delay(0.7).delaytime(5 / 8).legato(0.75)
// スケールによる即興 (スケールを変数に)
let sc = "C:iwato";
$: sound("supersaw(4, 8)")
.n(irand(19).add(-12))
.scale(sc).jux(rev).room(0.2)
.delay("0.4").delaytime(3 / 8)
.lpf(rand.range(400, 8000)).resonance(15).legato(1.2)
.gain("1.2")
$: sound("z_sawtooth(9, 16)")
.n(irand(24).add(-12))
.scale(sc).jux(rev).room(0.3)
.lpf(rand.range(400, 8000)).resonance(15)
.delay(0.4).delaytime(5 / 8).legato("1.0")
$: s("bd(3, 8), hh(5, 8, 1)").bank("tr909").gain("2.0")
// スケール名 (scale names) ※抜粋
aeolian, altered, arabian, augmented,
balinese, bebop, blues, chinese, chromatic,
diminished, dominant, dorian, egyptian,
enigmatic, flamenco, gypsy, hindu, hirajoshi,
indian, ionian, iwato, kumoijoshi,
kumoi, locrian, lydian, major, minor,
mixolydian, oriental, overtone, pelog,
pentatonic, persian, phrygian, piongio,
prometheus, ritusen, scriabin,
これまでの内容でSOPのレンダリングの基本を学びました。今回の講義では、ここからさらに進んで、SOPのレンダリングの詳細なテクニックやマテリアルの設定方法を学びます。SOPにテクスチャ (画像) をマッピングする「テクスチャーマッピング (Texture Mapping)」、テクスチャの法線マップを使用して表面の凹凸を表現する「バンプマッピング (Bump Mapping)」、テクスチャの高さ情報を使用して頂点を変位させる「ハイトマッピング (Height Mapping)」、物理ベースのマテリアル (PBR) について学んでいきます。これらのテクニックは、SOPのレンダリングにおいて非常に重要な要素です。これらを理解することで、よりリアルな表現が可能になります。
TouchDesignerにおいて、SOP (Surface Operator) は3Dの形状データを作成・編集するための基本要素です。しかし、SOP単体では最終的なビジュアルとして表示されません。SOPをレンダリングし、画面に描画するためには、Geometry COMPにSOPを接続し、Camera COMPで視点を、Light COMPで照明を設定し、それらをRender TOPで統合して2Dイメージとして出力するという一連のパイプラインが必要です。
そして、SOPで作成した形状に「どのような見た目を与えるか」を決定するのがマテリアル (MAT) の役割です。マテリアルは、オブジェクトの色、光沢、質感、透明度などを定義します。本日は、基本的なPhong MATから始め、テクスチャを使ってより詳細な表現を加えるテクスチャーマッピング、表面に擬似的な凹凸を与えるバンプマッピング、実際に頂点を変位させるハイトマッピング、そして現実世界の光の挙動を再現するPBRマテリアルといった、SOPの表現力を飛躍的に向上させるテクニックを学んでいきます。これらの要素を組み合わせることで、よりリッチでリアルな3Dシーンを構築することが可能になります。
法線は、ポリゴンの表面がどちらを向いているかを示す情報で、光の当たり方や陰影の計算に不可欠です。SOPを作成・変形する際には、法線が正しく設定されていることが重要です。Attribute Create SOPで法線を再計算することで変形したSOPの法線を正しく補正することが可能です。Phong MATは、拡散反射光（Diffuse）、鏡面反射光（Specular）、光沢（Shininess）などを設定できる基本的なマテリアルです。
法線ベクトル
サンプルプログラム
ポイント:
テクスチャーマッピングは、2Dの画像を3Dオブジェクトの表面に貼り付けることで、オブジェクトに模様やディテールを追加する基本的なテクニックです。オブジェクトにはUV座標と呼ばれる、テクスチャ上のどの部分をオブジェクトのどの面に貼り付けるかの情報が必要です。
サンプルプログラム
ポイント:
バンプマッピングは、テクスチャを使用してオブジェクトの表面に細かい凹凸があるように見せかけるテクニックです。実際にはジオメトリの形状を変更せず、光の当たり方を変えることで陰影を生み出し、擬似的な凹凸を表現します。一般的には、法線マップ（Normal Map）と呼ばれる特殊な画像（通常、青紫色っぽい見た目）を使用します。
バンプマッピング (Bump Mapping)
法線マップ (Normal Map)
面の向き（法線方向）をRGBカラーで表現したテクスチャです。赤はX軸、緑はY軸、青はZ軸の法線成分に対応。
サンプルプログラム
ポイント:
ハイトマッピング（ディスプレイスメントマッピングとも呼ばれる）は、グレースケールのハイトマップ（高さ情報を持つ画像）に基づいて、実際にジオメトリの頂点を移動させるテクニックです。これにより、バンプマッピングよりもリアルな凹凸や変形をオブジェクトに加えることができます。オブジェクトのシルエットも変化します。
ハイトマッピング
法線マップ (Normal Map) とハイトマップ (Height Map) の比較
サンプルプログラム
ポイント:
PBR (Physically Based Rendering) マテリアルは、光が現実世界の物質とどのように相互作用するかをより正確にモデル化することで、非常にリアルな質感を表現する手法です。PBR MATを使用し、Base Color (基本色)、Metallic (金属度)、Roughness (表面の粗さ) などのパラメータを調整したり、対応するテクスチャを割り当てたりします。
サンプルプログラム
ポイント:
ここまで出てきたSOPのレンダリングに関する様々な機能を、たくさん盛り込んでみました。
詳細は完成したプログラムを確認してみてください!
サンプルプログラム
ノイズで変形させたGrid SOPをPBRレンダリングすることで、ノイズに映る光と陰をリアルに描画しています。詳細はパッチをみながら解説していきます!
サンプルプログラム
本日の講義では、TouchDesignerにおけるSOPのレンダリング品質と表現力を高めるための重要なテクニックを幅広く学びました。
まず、SOPのレンダリングにおける法線の役割と、基本的なPhong MATを用いた質感設定の基礎を確認しました。次に、2D画像を3Dオブジェクトに貼り付けるテクスチャーマッピング、法線マップを利用して表面のディテールを豊かにするバンプマッピング、そしてハイトマップを用いて実際にジオメトリを変形させるハイトマッピングについて、それぞれの仕組みとTouchDesignerでの設定方法を実践的に見てきました。最後に、物理ベースのレンダリングを実現するPBRマテリアルを紹介し、Base Color、Metallic、Roughnessといったパラメータや各種マップを駆使することで、より現実に近いフォトリアルな質感を追求できることを学びました。
これらのマッピング技術やPBRマテリアルを理解し、適切に組み合わせることで、単純なSOPからでも驚くほど多様でリアルなビジュアルを生み出すことができます。今回学んだ知識を基に、様々なSOP、テクスチャ、マテリアル設定を試しながら、ぜひ皆さん自身のクリエイティブな表現を探求してください。
本日の講義参加した方は下記のアンケートに回答してください。
前回はopenFrameworksで、位置と速度という2つの変数 (Veriable) を使用して図形1つをアニメーションさせるところまで到達できました。今回はこのプログラムを応用して複数の図形を同時に動かす方法について解説していきます。複数の図形を動かすには位置と速度という2つのベクトルを個別の変数にではなくまとめて取り扱うデータの格納方法が必要となります。こうした場合には配列(Array)を使用すると便利です。それぞれのベクトルを配列にまとめることで、大量の図形のアニメーションをシンプルに記述することが可能です。さらに、あらかじめ物体の最大数が決まっていない際には、可変長配列 (std::vector) を使用するという方法もあります。この方法もあわせて解説していきます。
本日の授業を受講した方は、以下のアンケートに答えてください。
※5月20日の回
今回からいよいよp5.jsを用いた動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。
本日の授業を受講した方は以下のアンケートに回答してください。
5月22日
今回は、前回のCopy SOPよりもはるかに効率的に大量のオブジェクトを描画する「ジオメトリインスタンシング」を学びます。これはGPUのパワーを活用し、一つの元データから無数のコピーを高速に生成する技術です。Copy SOPではパフォーマンス的に難しかった大量描画も、これを使えばリアルタイムで実現可能になります。講義では、その基本的な仕組み、Geometry COMPでの設定方法、そしてCHOPやTOPのデータを使い各インスタンスの位置や色などを個別に制御する実践的なテクニックを解説します。この強力な機能で、表現の可能性を大きく広げましょう。
まず始めに、CHOPを使ってインスタンスの位置を制御する方法を学びます。これにより、インスタンスの位置を動的に変更することができます。以下の例では、Pattern CHOPを使用して、インスタンスの位置を制御しています。
ポイント:
Geometry COMPの設定:
先程の例を応用して、Pattern CHOPを使って、インスタンスの位置をランダムに配置する方法を学びます。これにより、大量の物体を3次元空間にランダムに配置することができます。以下の例では、Randomのパターンをx, y, z軸に設定しています。
次に、SOPを使ってインスタンスの位置を制御する方法を学びます。2つのプリミティブ図形のSOPを使用します。一つ目はレンダリングするSOPです。それに加えてインスタンスの位置を指定するためのSOPを作成します。この2つめのSOPの頂点の位置にインスタンシングされたジオメトリが配置されます。
ポイント:
インスタンシングの応用として、SOPの頂点の位置をNoise SOPで変形させる方法を学びます。これにより、インスタンスの位置を動的に変更することができます。以下の例では、さらにPhong MATを使って、マテリアルを適用しています。
ポイント:
ノイズで変形したインスタンスに、TOPを使って色を付ける方法を学びます。これにより、インスタンスの色を動的に変更することができます。以下の例では、Noise TOPを使用して、インスタンスの色を制御しています。TOPの場合もそのままではインスタンシングできません。TOP to CHOPを使ってTOPのデータをCHOPに変換します。その際に作成する物体の数とTOPのピクセル数を一致させる必要があります。
ポイント:
TOPは着色だけでなくインスタンスの位置の制御にも使用できます。ポイントは、TOPのピクセルに含まれる(r, g, b)の値を、インスタンスの位置の(x, y, z)座標にみたてるという点です。その際にインスタンスの数とTOPのピクセル数を一致させる必要があります。例えば、256個のインスタンスを作成する場合、TOPは256×1のサイズにする必要があります。作成したTOPはTOP to CHOPを使ってCHOPに変換します。以下の例ではNoise TOPを使用して、インスタンスの位置を制御しています。
ポイント:
TOPを使ってインスタンスの位置を制御する方法をさらに応用します。以下の例では、(x, y)座標はNoise TOPを使用して、インスタンスの位置を制御しています。さらに、(z)座標はPattern CHOPのRampを使用して、インスタンスの位置を制御しています。Pattern CHOPのフェーズを時間変化させることで、カメラに向かって物体が降ってくるようなダイナミックなアニメーションを作成しています。
ポイント:
本日の講義では、TouchDesignerにおける3Dジオメトリ操作の中心となるSOP（Surface Operators）の基本的な使い方を学びます。SOPは、点、線、ポリゴン、NURBSなど様々な3Dデータを生成・編集するためのオペレーターファミリーです。まず、Sphere（球）やBox（立方体）といったプリミティブ図形の作成方法から始め、Transform SOPなどを用いた形状の変形方法を見ていきます。次に、作成した3Dジオメトリを画像として表示するためのレンダリングについて学びます。これには、Geometry COMP、Camera COMP、Light COMP、Render TOP、そしてマテリアルの設定が必要になります。さらに応用として、SOPを組み合わせて数式やアルゴリズムに基づき形状を自動生成するプロシージャルモデリングの基礎を学び、Merge SOPやCopy SOPを使った具体的な手法を見ていきます。最後に、簡単な実習を通して、学んだ知識を実践に繋げます。
SOPの基本的な使い方を学ぶために、まずはプリミティブ図形を作成してみましょう
2D
3D
SOPのオペレータ上で様々な操作を行うことができます
実際にオペレーターを接続しながら解説していきます!
様々なパラメータを調整して、3Dジオメトリの見た目を変更してみよう!
ここまでの内容を踏まえて、Copy SOPやTransform SOPを使って、プロシージャルモデリングに挑戦してみましょう!
制作サンプル
本日の講義に参加した方は以下のアンケートに回答してください。
