ここまでの内容は、主にドラムサウンドを用いてStrudelのプログラミングの導入を行いました。今回も引き続きStrudelによるサウンドプログラミングを学びます。前回はドラムでしたが、今回はシンセサイザーで旋律を演奏していきます。note() 関数を用いて音程を指定することで様々な方法でメロディーを生成することが可能です。実際に音を聞きながら試していきましょう。
後半は、和音 (コード) と旋法 (スケール) について解説していきます。和音とは、高さの異なる複数の音が同時に響き合うことで生まれる音の調和です。最も基本的なものは3つの音で構成される三和音で、明るい響きの長三和音（メジャーコード）や、少し影のある響きの短三和音（マイナーコード）などがあります。これらは楽曲の土台となり、曲の雰囲気や感情を豊かに表現します。一方、旋法とは、ある音階（ドレミファソラシドなど）の中で、中心となる音（主音）が決められ、その音を中心に他の音が配置された音の並び方です。代表的なものに、明るく楽しい雰囲気の長調（メジャースケール）や、哀愁を帯びた雰囲気の短調（マイナースケール）があります。旋法はメロディを作る際の基礎となり、楽曲の性格を決定づけます。和音は、この旋法を構成する音を元に作られるため、両者は密接に関係しています。
参考:
スライド資料
映像資料
レナード・バーンスタイン によるレクチャー。数世紀に渡る西洋音楽の和声の発展の歴史を2分に圧縮して解説!!
VIDEO
映像資料その2:
(主にJ-POPの) いろいろな有名な楽曲は、実は同じコード進行から作られていた! 「カノン進行 」と「王道進行 」。
VIDEO
VIDEO
サンプルコード
音符と旋律
// シンプルにシンセを鳴らしてみる
$: 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のレンダリングにおいて非常に重要な要素です。これらを理解することで、よりリアルな表現が可能になります。
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のレンダリング基本 – 法線マップとマテリアル
法線は、ポリゴンの表面がどちらを向いているかを示す情報で、光の当たり方や陰影の計算に不可欠です。SOPを作成・変形する際には、法線が正しく設定されていることが重要です。Attribute Create SOPで法線を再計算することで変形したSOPの法線を正しく補正することが可能です。Phong MATは、拡散反射光（Diffuse）、鏡面反射光（Specular）、光沢（Shininess）などを設定できる基本的なマテリアルです。
法線ベクトル
サンプルプログラム
ダウンロード
ポイント:
Sphere SOPで球を作成し、Noise SOPで表面を変形させています。
Geometry COMPに上記のSOPを接続し、レンダリング対象とします。
Phong MATを作成し、Geometry COMPの Material パラメータにドラッグ＆ドロップして適用します。
Phong MATの Diffuse Color や Specular Color を調整して、基本的な質感を設定します。
Light COMPを配置し、位置や種類（例: Point Light, Directional Light）を調整してライティングを行います。
SOPの法線が正しく計算されていることを確認します。必要であればAttribute Create SOPで法線を再計算（Compute Normalsをオン）します。
この例ではSphere SOPをNoise SOPで変形したため不正確になった法線を、Attribute Create SOPによって補正しています。
テクスチャーマッピング
テクスチャーマッピングは、2Dの画像を3Dオブジェクトの表面に貼り付けることで、オブジェクトに模様やディテールを追加する基本的なテクニックです。オブジェクトにはUV座標と呼ばれる、テクスチャ上のどの部分をオブジェクトのどの面に貼り付けるかの情報が必要です。
サンプルプログラム
ダウンロード
ポイント:
Movie File In TOPなどで画像ファイルを読み込みます (またはNoise TOPなどでプロシージャルに生成)。
Phong MATのColor Mapパラメータに、読み込んだ画像テクスチャ (TOP) を指定します。
SOPにUV座標が適切に設定されている必要があります。Sphere SOPなどのプリミティブはデフォルトでUV座標を持っています。
Texture SOPを使用すると、UV座標のスケール、オフセット、回転などを調整したり、投影方法を変更したりできます。
この例では、Noise SOPで変形した球体に、外部から読み込んだ画像（またはプロシージャルテクスチャ）をカラーマップとして適用しています。
バンプマッピング (Bump Mapping)
バンプマッピングは、テクスチャを使用してオブジェクトの表面に細かい凹凸があるように見せかけるテクニックです。実際にはジオメトリの形状を変更せず、光の当たり方を変えることで陰影を生み出し、擬似的な凹凸を表現します。一般的には、法線マップ（Normal Map）と呼ばれる特殊な画像（通常、青紫色っぽい見た目）を使用します。
バンプマッピング (Bump Mapping)
法線マップ (Normal Map)
面の向き（法線方向）をRGBカラーで表現したテクスチャです。赤はX軸、緑はY軸、青はZ軸の法線成分に対応。
サンプルプログラム
ダウンロード
ポイント:
法線マップ用のテクスチャ (TOP) を用意します。これは専用に作成された画像か、Normal Map TOPなどでグレースケールのハイトマップから生成できます。
Phong MATの Normal Map (Bump) パラメータのトグルをオンにし、用意した法線マップテクスチャを指定します。
Bump Scale パラメータで凹凸の強さを調整できます。
バンプマッピングは視覚的なディテールを追加しますが、オブジェクトのシルエットは変化しません。
この例では、球体にNoise TOPで作成したテクスチャーをマッピングして、さらに同じ画像から生成した法線マップを適用し、表面に凹凸を持たせています。これにより、よりリアルな質感を実現しています。
ハイトマッピングと頂点変位 (Height Mapping and Vertex Displacement)
ハイトマッピング（ディスプレイスメントマッピングとも呼ばれる）は、グレースケールのハイトマップ（高さ情報を持つ画像）に基づいて、実際にジオメトリの頂点を移動させるテクニックです。これにより、バンプマッピングよりもリアルな凹凸や変形をオブジェクトに加えることができます。オブジェクトのシルエットも変化します。
ハイトマッピング
法線マップ (Normal Map) とハイトマップ (Height Map) の比較
サンプルプログラム
ダウンロード
ポイント:
ハイトマップとしてグレースケールのテクスチャ (TOP) を用意します。画像の明るい部分がより高く、暗い部分がより低く変位します。
PBR MATの Displacement セクションで設定を行います。
Enable Height Map をオンにします。
Height Map パラメータにハイトマップテクスチャを指定します。
Displace Scale で変位の大きさを調整します。
Displace Midpoint で変位の基準となる高さを調整します (通常0.5)。
効果をはっきりと確認するためには、ジオメトリにある程度の頂点数が必要です。頂点数が少ないと、滑らかな変位になりません。
この例では、バンプマッピングした球体に、さらにハイトマップを適用して、よりダイナミックな形状変化や凹凸を生み出しています。
物理ベースのマテリアル (PBR Materials)
PBR (Physically Based Rendering) マテリアルは、光が現実世界の物質とどのように相互作用するかをより正確にモデル化することで、非常にリアルな質感を表現する手法です。PBR MATを使用し、Base Color (基本色)、Metallic (金属度)、Roughness (表面の粗さ) などのパラメータを調整したり、対応するテクスチャを割り当てたりします。
サンプルプログラム
ダウンロード
ポイント:
PBR MATを作成し、Geometry COMPの Material パラメータに適用します。
Environment Light COMPと環境マップ (HDR画像など) を使用すると、周囲の環境を反射し、よりリアルなライティング結果が得られます。
この例では、Noise SOPで変形した球体にPBR MATを適用し、メタリック感やラフネスを調整して、よりフォトリアルな質感を追求しています。
PBRマテリアルを適用するパッチングは少し複雑なので、実際に作成しながら解説していきます。
応用 1: いろいろ機能を詰め込み
ここまで出てきたSOPのレンダリングに関する様々な機能を、たくさん盛り込んでみました。
ジオメトリ・インスタンシング
Noise TOPによるアニメーション
テクスチャーマッピング
バンプマッピング
PBRマテリアル
詳細は完成したプログラムを確認してみてください!
サンプルプログラム
応用2: ノイズに映りこむ光と陰
ノイズで変形させた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のデータを使い各インスタンスの位置や色などを個別に制御する実践的なテクニックを解説します。この強力な機能で、表現の可能性を大きく広げましょう。
ジオメトリインスタンシング
概要:
ジオメトリインスタンシングは、1つの「元となるジオメトリ（SOPなどで作成した形状）」をGPU上で効率的に複製し、大量に描画する機能
Geometry COMPの「Instance」ページで設定を行う
主なメリット:
パフォーマンス向上: CPUではなくGPUで処理するため、大量のオブジェクトを描画する場合でも、従来のコピー（Copy SOPなど）に比べて大幅に高速メモリ効率: 元となるジオメトリデータは1つだけで済むため、メモリ使用量を抑えられる
基本的な仕組み:
Geometry COMPに、元となるジオメトリ（SOP）を接続します。
Geometry COMPのパラメータウィンドウにある「Instance」タブをオンにします。
「Instance OP」に、各インスタンスの位置、回転、スケール、色などを制御するためのデータを持つオペレータ（CHOP、TOP、SOP、DATなど）を指定します。
指定したオペレータのデータ（チャンネル値、ピクセル値、ポイント座標など）が、それぞれのインスタンスのパラメータに割り当てられます。
データソースとパラメータ:
データソース: インスタンスのパラメータを制御するために、主に以下のオペレータが利用されるCHOP: チャンネルデータを使います。チャンネル名（例: tx, ty, tz, cr, cg, cb, scale）と、インスタンスパラメータ（Translate X/Y/Z, Color R/G/B, Scaleなど）を対応、チャンネルのサンプル数がインスタンスの数TOP: テクスチャのピクセルデータ（R, G, B, A）を使用、ピクセルごとにインスタンスが生成され、そのピクセルの色情報などをパラメータとして利用SOP: ポイントの位置やアトリビュート（P(0), P(1), P(2), Cd(0)など）を使用、各ポイントがインスタンスに対応DAT: テーブルデータ（主に数値を記述したTable DAT）を使用
主な制御可能パラメータ:
Translate (tx, ty, tz): 各インスタンスの位置
Rotate (rx, ry, rz): 各インスタンスの回転
Scale (sx, sy, sz): 各インスタンスのスケール
Color (colorr, colorg, colorb, colora): 各インスタンスの色と透明度
Pivot (pivotx, pivoty, pivotz): 各インスタンスの回転・スケールの基点
Texture Coordinate (Instance Texture): インスタンステクスチャリング用の座標
Custom Attributes: シェーダーと連携して独自のデータを渡すことも可能
ポイント:
データソースのサンプル数（CHOP）、ピクセル数（TOP）、ポイント数（SOP）が、生成されるインスタンスの最大数を決定
パラメータごとに異なるデータソース（オペレータやチャンネル/アトリビュート名）を指定できます。例えば、位置はCHOP、色はTOPから取得する、といった設定が可能
大量のパーティクル表現、群衆シミュレーション、複雑な模様の生成など、多岐にわたる表現に応用可能
CHOPによるインスタンシング – 位置制御
まず始めに、CHOPを使ってインスタンスの位置を制御する方法を学びます。これにより、インスタンスの位置を動的に変更することができます。以下の例では、Pattern CHOPを使用して、インスタンスの位置を制御しています。
ダウンロード
ポイント:
まず始めにSphere SOPを作成し、Geometry COMPに接続
Pattern CHOPを使って、インスタンスの位置を制御
Rampのパターンをx軸に
Sineのパターンをy軸に
Geometry COMPのInstanceタブで、パターンを結合したCHOPを指定
インスタンスの位置を指定するためにtx, ty, tzを選択
Geometry COMPの設定:
CHOPによるインスタンシング – ランダムに大量の物体を配置
先程の例を応用して、Pattern CHOPを使って、インスタンスの位置をランダムに配置する方法を学びます。これにより、大量の物体を3次元空間にランダムに配置することができます。以下の例では、Randomのパターンをx, y, z軸に設定しています。
ダウンロード
SOPによるインスタンシング – 位置の制御
次に、SOPを使ってインスタンスの位置を制御する方法を学びます。2つのプリミティブ図形のSOPを使用します。一つ目はレンダリングするSOPです。それに加えてインスタンスの位置を指定するためのSOPを作成します。この2つめのSOPの頂点の位置にインスタンシングされたジオメトリが配置されます。
ダウンロード
ポイント:
SOPのデータのままではインスタンシングできない
SOP to CHOPを使って、SOPのデータをCHOPに変換
ジオメトリの頂点の位置の(x, y, z)座標がそのままインスタンシングのTranslateに使用される
SOPによるインスタンシング応用 – ノイズによる変形
インスタンシングの応用として、SOPの頂点の位置をNoise SOPで変形させる方法を学びます。これにより、インスタンスの位置を動的に変更することができます。以下の例では、さらにPhong MATを使って、マテリアルを適用しています。
ダウンロード
ポイント:
インスタンシングの座標を指定するSOPの頂点の位置を、Noise SOPで変形
SOP to CHOPを使って、SOPのデータをCHOPに変換
Phong MATを使って、マテリアルを適用
TOPによるインスタンスの着色
ノイズで変形したインスタンスに、TOPを使って色を付ける方法を学びます。これにより、インスタンスの色を動的に変更することができます。以下の例では、Noise TOPを使用して、インスタンスの色を制御しています。TOPの場合もそのままではインスタンシングできません。TOP to CHOPを使ってTOPのデータをCHOPに変換します。その際に作成する物体の数とTOPのピクセル数を一致させる必要があります。
ダウンロード
ポイント:
形状はひとつ前の例と同じ
Noise TOPを使って、インスタンスの色を制御
TOP to CHOPを使ってTOPのデータをCHOPに変換
物体の数とTOPのピクセル数を一致させる必要がある
この例では:
インスタンスの数 (= Sphere SOPの頂点数): 2048個
Noise TOPのサイズ: 2048×1
TOPによるインスタンスのアニメーション 1
TOPは着色だけでなくインスタンスの位置の制御にも使用できます。ポイントは、TOPのピクセルに含まれる(r, g, b)の値を、インスタンスの位置の(x, y, z)座標にみたてるという点です。その際にインスタンスの数とTOPのピクセル数を一致させる必要があります。例えば、256個のインスタンスを作成する場合、TOPは256×1のサイズにする必要があります。作成したTOPはTOP to CHOPを使ってCHOPに変換します。以下の例ではNoise TOPを使用して、インスタンスの位置を制御しています。
ダウンロード
ポイント:
TOPのピクセルに含まれる(r, g, b)の値を、インスタンスの位置の(x, y, z)座標にみたてる
この例では、Noise TOPを使用して、インスタンスの位置を制御
TOP to CHOPを使ってTOPのデータをCHOPに変換
2048×1のサイズのTOPを作成、インスタンスの数は2048個に
座標の変化をなめらかにするためTOPのフォーマットを32-bit float(rgba)に設定
TOPとCHOPによるインスタンスのアニメーション
TOPを使ってインスタンスの位置を制御する方法をさらに応用します。以下の例では、(x, y)座標はNoise TOPを使用して、インスタンスの位置を制御しています。さらに、(z)座標はPattern CHOPのRampを使用して、インスタンスの位置を制御しています。Pattern CHOPのフェーズを時間変化させることで、カメラに向かって物体が降ってくるようなダイナミックなアニメーションを作成しています。
ダウンロード
ポイント:
Noise TOPを使ってインスタンスの(x, y)位置を制御
Pattern CHOPのRampを使ってインスタンスの(z)位置を制御
Pattern CHOPのフェーズを時間変化させることで、カメラに向かって物体が降ってくるようなアニメーションを作成
Camera COMPの画角や位置を調整することでダイナミックなアニメーションに
アンケート
スライド資料
本日の内容
本日の講義では、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の基本
プリミティブ図形の作成
レンダリングの基本
カメラとライトの設定
プロシージャルモデリングの基本
SOPの基本
SOP = Surface Operators
3Dジオメトリを生成、編集、操作するためのオペレーターファミリー
ジオメトリ: 3D空間における形状や構造を表すデータ
点、線、ポリゴンメッシュ、NURBSカーブ/サーフェス、メタボールなど、さまざまなタイプの3Dデータを扱うことができる
SOPの主な機能と役割:
ジオメトリの生成 (Generators):
基本的な3D形状（プリミティブ）を作成
例: Sphere SOP (球)、Box SOP (立方体)、Grid SOP (格子状平面)、Tube SOP (管)、Line SOP (線)、Circle SOP (円)
ジオメトリの変形・加工 (Modifiers):
既存のジオメトリに対して移動、回転、スケール、変形などの操作を加る
例: Transform SOP (移動、回転、スケール)、Twist SOP (ねじり)、Noise SOP (ノイズによる頂点移動)、Subdivide SOP (細分化)、Extrude SOP (押し出し)
ジオメトリの結合・選択・分割 (Combiners/Selectors):
複数のジオメトリを結合したり、特定の条件でジオメトリの一部を選択・削除
例: Merge SOP (複数のジオメトリを統合)、Join SOP (ポリゴンやカーブを接続)、Group SOP (点やプリミティブをグループ化)、Delete SOP (指定した点やプリミティブを削除)
データの変換とユーティリティ (Conversion/Utility):
ジオメトリの種類を変換したり、ジオメトリに関する情報を取得・操作
例: Convert SOP (ポリゴン、NURBSなどの形式変換)、Attribute Create SOP (新しいアトリビュートを作成)、Point SOP (点の位置やアトリビュートを個別に操作)、Sort SOP (点やプリミティブの順序を変更)
他のオペレーターファミリーとの連携:
SOP -> CHOP/DAT: SOP to CHOPやSOP to DATを使い、ジオメトリの頂点座標、法線、色などのアトリビュート情報をCHOP（チャンネルデータ）やDAT（テーブルデータ）に変換して、他の計算や制御に利用CHOP/DAT -> SOP: CHOPやDATのデータをCHOP to SOPやスクリプト経由でSOPのパラメータやアトリビュートに適用し、ジオメトリを動的に変化させる（例：オーディオデータで頂点を動かす）。レンダリング: SOPで作成・加工されたジオメトリは、Geometry COMPに格納され、Material (MAT) によって見た目が定義され、Render TOPによって最終的に画像としてレンダリングされる
プリミティブ図形の作成
SOPの基本的な使い方を学ぶために、まずはプリミティブ図形を作成してみましょう
ダウンロード
2D
Line SOP: 直線を作成
Circle SOP: 円を作成
Rectangle SOP: 長方形を作成
Grid SOP: 格子状の平面を作成
3D
Box SOP: 立方体を作成
Sphere SOP: 球を作成
Tube SOP: 円筒を作成
Torus SOP: トーラスを作成
SOPの操作
SOPのオペレータ上で様々な操作を行うことができます
ダウンロード
SOPを選択して、パラメータウィンドウで設定を変更
ビューワーアクティブにして、マウスで操作
表示の切り替え
ワイヤーフレーム表示
頂点の表示
法線の表示 など
SOPのレンダリング
SOPを配置は3Dジオメトリの形状を作成しただけ
最終的に画像として表示するためには、Render TOPを使用してレンダリングを行う必要がある
Render TOPは、3Dシーンを2D画像としてレンダリングするためのコンポーネント
3Dを2D画像としてレンダリングするために必要な3つの要素
カメラ: 3Dシーンを撮影するための視点
ライト: 3Dシーンを照らすための光源
マテリアル: 3Dジオメトリの見た目を定義するための素材
実際にオペレーターを接続しながら解説していきます!
SOPのレンダリング基本
ダウンロード
SOPでプリミティブ図形を作成
Geometry COMPを作成し、SOPを接続
Camera COMPとLight COMPを配置
Render TOPを作成し、Camera COMPとLight COMPが自動的に接続される
SOPにマテリアルの適用 + 回転
ダウンロード
Phone MATを作成し、Geometry COMPに接続
Render TOPに接続されたGeometry COMPのマテリアルを変更することで、ジオメトリの見た目を変更できる
SOPのレンダリング – 様々なパラメータを調整
ダウンロード
様々なパラメータを調整して、3Dジオメトリの見た目を変更してみよう!
カメラの画角や位置
マテリアルの色や質感
ライトの位置や強度
SOPの形状やサイズ など
応用: プロシージャルモデリング
SOPを使って、プロシージャルに3Dジオメトリを生成することができる
プロシージャルモデリングとは、数式やアルゴリズムを使って自動的に3D形状を生成する手法
SOPのパラメータを数式やCHOPのデータにリンクさせることで、動的に変化するジオメトリを作成できる
SOPのMergeとCopyとTransformでモデリング
ダウンロード
Merge SOPを使って、複数のジオメトリを結合
Copy SOPを使って、ジオメトリを複製
複製の際に位置や回転やスケールを指定することができる
Copy SOPのTransformタブで設定
Transform SOPを使って、複製したジオメトリの位置や回転を変更
いろいろ試してみましょう!
応用: より複雑なプロシージャルモデリング
ダウンロード
様々なSOPを組み合わせて、より複雑なプロシージャルモデリングに挑戦!
Line SOPとSweep SOPを組み合わせて、複雑な形状を作成
Line SOPをPattern SOPで変形させて波打つような形状へ
Coyp SOPを使って複製していく
実習: プロシージャルモデリングに挑戦
ここまでの内容を踏まえて、Copy SOPやTransform SOPを使って、プロシージャルモデリングに挑戦してみましょう!
例えば、以下のような形状に挑戦してみてください
複数の円柱を並べた形状
波打つような形状
複雑な幾何学模様
制作サンプル
アンケート
本日の講義に参加した方は以下のアンケートに回答してください。
順次処理 (sequence)、反復 (iteration)、条件分岐 (selection) は、プログラムを構造化する際の基本構造です。今回はこの3つのプログラムの基本構造の中から「反復 (iteration)」についてとりあげます。 コンピュータは何度もくりかえし処理することが得意です。プログラムで指定さえすれば、数百回、数千回、数万回と不満を言うことなく瞬時に反復処理を行います。反復によって人力の作業では膨大な時間がかかるような処理も瞬時に終えることが可能です。
今回はさらに、この反復処理に乱数を適用してみます。 乱数とは、サイコロを振って得られる数字のように規則性のない数のことです。p5.jsでは random() 関数を使用することで範囲を指定して乱数を生成することが可能です。
乱数と反復を組合せることで、偶然性を取り入れた表現が可能となります。図形の位置、大きさ、色などを乱数を利用して特定の範囲内でランダムに繰り返し指定することで、偶然性をコントロールしながら表現に取り入れることができるようになります。いろいろな可能性を試してみましょう。
スライド資料
課題!
次々回 (5月22日) までに、以下の課題の制作を行ってください。22日の回に簡単な発表会を行います。
課題: 反復と乱数で表現する
p5.jsで反復 (Iteration / for文) と 乱数 (random) を使用して表現をしてください。
課題提出URL
制作サンプル
アンケート
本日の講義を受講した方は以下のアンケートに回答してください。
Toussaint, Godfried. “The Euclidean algorithm generates traditional musical rhythms.” 2005 先週の入門編に引き続き、Strudelを使用してリズムパターンを生成していきます。今回は、「変なリズム」を作成する様々な手法を紹介します。変拍子、奇数拍子、ポリリズム、ポリミーター、ユークリッドリズムといった様々な概念や手法と共に、Strudelでのパターン生成について理解を深めていきましょう。
スライド資料
次回までの課題
次回の講義は5月12日です。1週間の間があくので、簡単な課題を出題します!
課題: Strudelで5分パフォーマンス!
これまでやってきた内容をふまえて、5分間のライブコーディングによるパフォーマンスを発表してください。まだ試行錯誤しながらの荒削りなパフォーマンスで構いません。自分なりに工夫して楽しみながらパフォーマンスしてください! 次回 (5/12) の演習でPAを使用して簡単な発表会を行います。
サンプルコード
オーソドックスなリズム
// 8ビート
$: s("bd sd bd sd")// 8ビート + シンコペーション
$: s("bd sd [~ bd] sd")パラレルに演奏 (ポリリズム)
// 二拍子と三拍子
$: s("bd sd, hh hh hh")// 二拍子と三拍子と五拍子
$: s("bd sd, hh hh hh, ~ rim ~ rim rim")ポリミーター
// 二拍子と三拍子のポリミーター
$: s("{bd sd, rim hh oh}")// 二拍子と三拍子と五拍子のポリミーター
$: s("{bd sd, rim hh oh, hh hh hh*2 oh cr}")ユークリッドリズム
$: s("bd(3, 8), hh(9, 16)")$: s("bd(3, 7), hh(9, 14, 5), cp(5, 7, 2)")変拍子 + ユークリッドリズム + ポリリズム (+ ビジュアライズ)
$: s("bd(2, 7), hh(8, 12), cp(3, 14, 2), lt(3, 3), ht(4, 4)")
.bank("tr909")
.punchcard().color("gray")エフェクト (ディレイ)
$: s("bd sd [~ bd] hh")
.bank("tr909")
.delay(0.8).delaytime(5/8)エフェクト (ディレイ + リバーブ) + フィルター + ビジュアライズ
$: s("bd cp [~ bd] hh*2, bd:2(3, 8), hh*8, cp(7, 8)")
.bank("tr909")
.delay(0.8).delaytime(9/8).delayfeedback(0.5)
.lpf(sine.segment(128).range(400,8000).slow(16)).resonance(10)
.room(0.5).size(1.5)
.punchcard().color("pink")参考資料
「変なリズム」な曲プレイリスト
Take Five, The Dave Brubeck Quartet
Money, Pink Floyd
Scatterbrain, Jeff Beck
The Fish, Yes
Fire Back About Your New Baby’s Sex, Don Caballero
変拍子 (7/8 → 3/4 → 4/4 → 7/8)
Never Meant, American Football
Morning Bell, Radiohead
STRUCTURE I, DATE COURSE PENTAGON ROYAL GARDEN
ポリリズム, Perfume
Discipline, King Crimson
変拍子、ポリミーター (5/8 + 4/4, 17/16?)
The First Circle, Pat Metheny Group
アンケート
5月12日の回のアンケートです!
今回からいよいよopenFrameworksによるプログラミングを開始していきます。
openFrameworksではProcessingやp5.jsのように新規ファイルを生成するだけではプログラムは開始できません。様々なファイルや設定を内包したプロジェクトを生成する必要があります。まず初めに新規のプロジェクトの生成の方法について説明します。
次に、openFrameworksでまず差し当って編集していく、main.cpp、ofApp.h、ofApp.cppという3つのファイルについて解説します。また、ofAppの中にある3つの重要な関数、setup()、update()、draw()の役割についても説明していきます。
後半はいよいよプログラミングしていきます。今回は物体が直線運動する簡単なアニメーションを完成させるところまでを目標とします。
スライド資料
アンケート
本日の授業を受講した方は、以下のアンケートに答えてください。
スライド資料
今回の内容
この講義では、TouchDesignerにおけるTOP (Texture Operators) を使った動画の扱い方と、それらを合成 したりエフェクト を適用したりする方法を学びます。具体的には以下の内容を進めていきます。
前回の復習: TOPの基本的な使い方、特に静止画の表示方法について簡単に振り返ります。Movie File In TOPで動画を再生: 静止画表示に使ったMovie File In TOPで、今度は動画ファイルを読み込み、再生する方法を学びます。基本的なパラメータ設定を確認します。キー操作による再生のコントロール: Keyboard In CHOPを使って、キーボードからの入力で動画の再生や停止などのコントロールを試みます（今回は主に切り替えに使用）。動画の切り替え: 複数の動画を用意し、キーボード操作で表示する動画を切り替える方法を学びます。Switch TOPとCHOPの連携がポイントです。TOPの合成、エフェクトの適用: Composite TOPを使って複数の映像（TOP）を重ね合わせる方法や、Edge TOP、Level TOPなどを使って映像に視覚効果を加える方法を探求します。実習: やってみよう!: これまでに学んだ内容を応用して、自分だけの簡易的なVJ（ビジュアルジョッキー）システムを作成してみましょう。
動画ファイルのサンプル
今回のサンプルファイルに使用している動画は、Beeple (Mike Winkelmann) 氏が作成したVJ LOOPS のパッケージ “RESOLUME vj pack ” を使用しています。以下のようにサンプルフォルダ内に「bin」フォルダを作成してその中に解凍した動画ファイルをコピーするとそのまま使用可能です。
前回の復習
まずは、前回の「TOPの基本」で学んだ内容を思い出しましょう。
TOPとは何か: Texture Operatorの略で、画像や映像、テクスチャデータを生成・加工するためのオペレーター群でしたね。TouchDesignerのビジュアル表現の核となる部分です。オペレーターの配置と接続: Tabキーでオペレータークリエータを開き、目的のオペレーター（例: Movie File In TOP, Constant TOP, Out TOPなど）をネットワークエディタ上に配置し、オペレーターの出力（右側）から入力（左側）へワイヤーをドラッグして接続しました。Movie File In TOPでの静止画表示: Movie File In TOPを選択し、パラメータウィンドウのFileパラメータで画像ファイルを指定することで、静止画を表示できました。パラメータの調整: 各オペレーターには多数のパラメータがあり、これらを調整することで見た目や挙動を変化させられることを確認しました（例: Constant TOPの色や解像度）。
実際にTouchDesignerを起動し、Movie File In TOPを配置して静止画を表示するところまで、もう一度手を動かして確認してみましょう。ワイヤー接続やパラメータの変更など、基本的な操作に慣れておくことが重要です。
本日のトピックス – Movie File In TOPで動画を再生
前回、静止画の表示に使用した Movie File In TOP は、その名の通り動画ファイルを読み込んで再生するための非常に強力なオペレーターです。静止画と同じ File パラメータに動画ファイル（.mov, .mp4などTouchDesignerがサポートする形式）を指定するだけで、基本的な動画再生が可能です。
Movie File In TOP の主要パラメータ（動画再生関連）:
File: 読み込む動画ファイルへのパスを指定します。右側の + ボタンからファイルを選択できます。Play Mode: 動画の再生方法を設定します。
Sequential (標準): フレームを順番に再生します。
Locked to Timeline: TouchDesigner全体のタイムライン（下部のアニメーションバー）の再生に同期します。
Specify Index: Index パラメータで指定したフレームを静止表示します。CHOPなど外部の値でフレームを制御する際に使います。
Play: Play Mode が Sequential のときに、再生（1）／停止（0）を切り替えます。Speed: 再生速度を調整します。1が標準速度、2で倍速、0.5で半分の速度になります。マイナス値を指定すると逆再生も可能です。Cue / Cue Point: 再生の開始点を指定します。Cue ボタンを押すと、Cue Point で指定したフレームにジャンプします。Loop Crossfade: ループ再生時に、動画の最後と最初をクロスフェードさせて、つなぎ目を滑らかにします。
今回は、このMovie File In TOPの動画再生機能をフル活用し、キーボード操作による動画の切り替えや、複数の映像の合成、エフェクトの追加などを試していきます。最終的には、これらの技術を組み合わせて、簡単なVJ（ビジュアルジョッキー）システムのようなものを作成することを目指します。
サンプル 1: シンプルに動画を再生
まずは基本中の基本、Movie File In TOPを使って1つの動画ファイルを再生してみましょう。これが今日の全ての活動の出発点となります。
手順:
新しいTouchDesignerファイル（.toe）を開きます。
ネットワークエディタ上で Tab キーを押し、オペレータークリエータを開きます。
TOP ファミリーから Movie File In TOP を選択し、配置します。
配置した Movie File In TOP を選択し、パラメータウィンドウを開きます。
File パラメータの右側にある + ボタンをクリックし、再生したい動画ファイルを選択します。（TouchDesignerに付属のサンプル動画や、ご自身で用意した動画ファイルを使用してください。）
Play Mode が Sequential になっていることを確認します。
Play パラメータのトグルスイッチをクリックしてオン（1）にします。これで動画が再生されるはずです。
（オプション）最終的な出力を確認するために、Movie File In TOP の出力から Null TOP を接続し、さらにその Null TOP の表示フラグ（右下の青い丸）をオンにすると、背景に表示されます。あるいは、Out TOP に接続しても良いでしょう。
(サンプル1のネットワーク: Movie File In TOPで動画を読み込み、Null TOPで中間確認)
サンプルファイル: 03-01_playMovie.toe をダウンロードして、実際の動作を確認してみてください。Speed や Loop Crossfade などのパラメータをいじって、動画の再生がどのように変化するか試してみましょう。
サンプル 2: 動画の切り替え
次に、複数の動画を用意し、キーボードのキーを押すたびに表示される動画が切り替わる仕組みを作ってみましょう。ここでは Switch TOP と CHOP (Channel Operators) を連携させます。
手順と考え方:
動画の準備: 複数の（今回は4つの）Movie File In TOPを配置し、それぞれ異なる動画ファイルを読み込みます。Play はすべてオンにしておきましょう。切り替え役 (Switch TOP): TOP ファミリーから Switch TOP を配置します。このオペレーターは、複数のTOP入力を受け取り、Index パラメータで指定された番号の入力だけを出力します。接続: 用意した複数の Movie File In TOP の出力を、すべて Switch TOP の入力に接続します。接続する順番が Index の番号（0から始まる）に対応します。キー入力の取得 (Keyboard In CHOP): CHOP ファミリーから Keyboard In CHOP を配置します。これはキーボードからの入力を検知し、対応するキー名のチャンネル（例: ‘k1’, ‘k2’, ‘space’ など）に 0 または 1 の値を出力します（押されている間 1）。今回は特定のキー（例: 1 キー）が押されたことを検知するために使います。パラメータで Keyboard を Use Number Keys などに設定すると特定のキーグループをまとめて扱えます。カウント処理 (Counter CHOP): Keyboard In CHOP の出力だけでは、キーを押した瞬間に 1 になるだけです。押すたびに数値を増やしていく（カウントアップする）ために、CHOP ファミリーから Counter CHOP を配置します。
Keyboard In CHOP の出力を Counter CHOP の Increment Input (2番目の入力) に接続します。これで、キーが押されて値が 1 になるたびに、Counter CHOP の count チャンネルの値が増加します。
Counter CHOP のパラメータで Limit タブを開き、Limit Maximum をオンにし、Maximum の値を 3 に設定します。（動画が4つなので、Indexは 0, 1, 2, 3 と変化させたい）。
Limit タブの Loop Min/Max をオンにします。これにより、カウントが Maximum (3) を超えると Minimum (0) に戻り、0, 1, 2, 3, 0, 1, 2, 3… というループが実現します。
CHOPからTOPへの連携: Counter CHOP が出力する count チャンネルの値を、Switch TOP の Index パラメータに適用する必要があります。
Counter CHOP の count チャンネルの値を参照するために、Null CHOP を Counter CHOP の後段に接続します。（CHOPの値を他のオペレーターから参照する際は、Null CHOPを挟むのが一般的です。後でCHOPネットワークを変更しても参照元が固定されるため便利です。）
Null CHOP の表示フラグ（Viewer Active）をオンにして、パラメータウィンドウの CHOP Export を有効にします。
Null CHOP の count チャンネル名を Switch TOP の Index パラメータフィールドにドラッグ＆ドロップします。これで Index パラメータにCHOPの値がエクスポート（参照）され、連動するようになります。（または、Switch TOP の Index パラメータの入力欄で op(‘null1’)[‘count’] のようにPythonで参照することも可能です。）
出力: Switch TOP の出力に Null TOP や Out TOP を接続して結果を確認します。
(サンプル2のネットワーク: 複数のMovie File In、Switch TOP、Keyboard In、Counter、Null CHOPの連携)
サンプルファイル: 03-02_playMovieSwitch.toe をダウンロードして確認しましょう。1 キー（または設定したキー）を押すたびに、Switch TOP の Index が変わり、表示される動画が切り替わるはずです。Counter CHOP の Limit 設定を変えると、切り替わる動画の数を変更できます。
ポイントのまとめ:
Switch TOP: 複数の入力から1つを選んで出力する、切り替えの要。Keyboard In CHOP: キーボード入力を検知し、CHOPデータとして出力。Counter CHOP: 入力（トリガー）があるたびに値を増減させる。Limit 設定で範囲とループを制御できる。CHOP Export (またはPython参照): CHOPで生成した数値データを、他のオペレーター（今回はTOP）のパラメータ制御に使うための重要な連携方法。
サンプル 3: 動画の合成
次に、複数の動画（TOP）を単純に切り替えるだけでなく、重ね合わせて表示（合成） してみましょう。これには Composite TOP を使用します。
手順と考え方:
ベースとなる動画: まず、背景となる（あるいは一方の）動画を用意します。Movie File In TOP を配置し、動画ファイルを指定します。重ねる動画: もう一つ、別の Movie File In TOP を配置し、異なる動画ファイルを指定します。合成 (Composite TOP): TOP ファミリーから Composite TOP を配置します。このオペレーターは、複数のTOP入力を受け取り、指定された Operation（合成モード）に基づいてそれらを合成した結果を出力します。接続: ベースとなる Movie File In TOP を Composite TOP の 1番目の入力 に、重ねたい Movie File In TOP を 2番目の入力 に接続します。入力の順番は Operation によって意味が変わることがあります。合成モードの選択: Composite TOP を選択し、パラメータウィンドウの Operation パラメータを変更してみましょう。
Over: 2番目の入力が1番目の入力の上に重なります（アルファ値が考慮されます）。
Add: 色の値を加算します。明るい部分がより強調されます。
Multiply: 色の値を乗算します。暗い部分がより強調されます。
Difference: 色の差分をとります。ネガポジ反転のような効果が得られることもあります。
その他にも Screen, Overlay, Subtract, Maximum, Minimum など、様々な合成モードがあります。Photoshopなどの画像編集ソフトのレイヤーブレンドモードと同様の考え方です。
出力: Composite TOP の出力に Null TOP や Out TOP を接続して、合成結果を確認します。
(サンプル3のネットワーク: 2つのMovie File InをComposite TOPで合成)
サンプルファイル: 03-03_playMovieMix.toe をダウンロードして試してみてください。Composite TOP の Operation パラメータをいろいろ変えて、それぞれの合成モードがどのような視覚効果を生み出すか観察しましょう。組み合わせる動画の内容によっても、合成結果の印象は大きく変わります。
ポイントのまとめ:
Composite TOP: 複数のTOP入力を指定されたモードで合成するオペレーター。Operation パラメータ: 合成の方法（アルゴリズム）を選択する重要なパラメータ。様々なモードを試すことで表現の幅が広がる。入力の順番: 合成モードによっては、入力の順番が結果に影響する場合がある。
サンプル 4: 動画のエフェクト
動画を再生し、切り替え、合成できるようになったら、次は映像にエフェクト をかけてみましょう。TouchDesignerには多種多様なエフェクト用TOPが用意されています。ここでは代表的なものをいくつか試します。
手順と考え方:
元の映像: サンプル3で作成した、Composite TOPで合成された動画（または単一のMovie File In TOPでも可）を用意します。エフェクトTOPの追加: エフェクトをかけたいTOPの後段に、エフェクト用のTOPを接続します。
Edge TOP: 画像の輪郭（エッジ）を検出します。パラメータ Edge Strength で強度、Edge Color でエッジの色などを調整できます。ノイズっぽい表現や線画のような表現に使えます。Level TOP: 色の明るさ、コントラスト、ガンマなどを調整します。Brightness, Contrast, Gamma パラメータを調整して、映像のトーンを変化させます。Invert で色を反転させることも可能です。Tile TOP: 画像をタイル状に分割して並べ替えます。Number of Tiles で分割数、Overlap でタイルの重なり具合、Order で並べ方（ランダムなど）を変更できます。モザイクのような効果や、映像を細かく分割して再構成するような表現が可能です。
接続: 元の映像を出力するTOP（例: Composite TOP や Null TOP）から、追加したエフェクトTOP（Edge, Level, Tileなど）へワイヤーを接続します。エフェクトは直列に繋いでいくことで、複数の効果を重ねがけすることも可能です。（例: Composite -> Edge -> Level -> Tile）パラメータ調整: 各エフェクトTOPを選択し、パラメータウィンドウで値を調整してみましょう。それぞれのパラメータが映像にどのような変化をもたらすか、試行錯誤しながら確認します。出力: 最終段のエフェクトTOPから Null TOP や Out TOP に接続して結果を表示します。
(サンプル4のネットワーク: 合成した動画にEdge, Level, Tileのエフェクトを直列に適用)
サンプルファイル: 03-04_playMovieFx.toe をダウンロードして、実際にエフェクトを試してみましょう。エフェクトTOPを繋ぐ順番を変えると、結果がどのように変わるかも試してみてください（例: LevelをEdgeの前に入れるか後に入れるか）。
ポイントのまとめ:
エフェクト用TOP: TouchDesignerには映像加工用のTOPが多数存在する（Edge, Level, Tile, Blur, Feedback, HSV Adjust, Glitchなど）。直列接続: エフェクトは直列に接続することで重ねがけが可能。接続順序によって結果が変わる。パラメータ調整: 各エフェクトTOPのパラメータを調整することで、効果の強さや種類を細かくコントロールできる。実験的に触ってみることが重要。
サンプル 5: 動画のタイリング (Transform TOP)
サンプル4で紹介した Tile TOP とは別に、Transform TOP を使ってもタイリング（繰り返し敷き詰める）表現が可能です。Transform TOP は本来、映像の移動、回転、拡大縮小を行うオペレーターですが、Tile パラメータを使ってタイリング効果を得ることもできます。
手順と考え方:
元の映像: Movie File In TOP などで動画を用意します。Transform TOPの適用: TOP ファミリーから Transform TOP を配置し、元の映像のTOPから接続します。タイリング設定: Transform TOP を選択し、パラメータウィンドウの Tile タブを開きます。
Extend: タイリングの方法を指定します。Repeat を選択すると、画像を単純に繰り返して敷き詰めます。Mirror を選択すると、反転させながら繰り返します。
拡大縮小と組み合わせる: タイリングは、元の画像サイズより表示領域が大きい場合や、画像を縮小した場合に効果を発揮します。
Transform タブの Scale パラメータの X と Y の値を小さく（例: 0.5）してみましょう。画像が縮小され、空いたスペースが Extend の設定（Repeat や Mirror）に従って埋められます。これにより、縮小された動画がタイル状に並びます。
回転や移動との組み合わせ: さらに、Rotate パラメータで回転させたり、Translate パラメータで位置をずらしたりすることも可能です。これらとタイリングを組み合わせることで、より複雑でダイナミックな映像表現が生まれます。出力: Transform TOP の出力に Null TOP や Out TOP を接続して結果を確認します。
(サンプル5のネットワーク: Movie File InにTransform TOPを接続し、ScaleとExtendでタイリング)
サンプルファイル: 03-05_playMovieFxTile.toe をダウンロードして試してみてください。Transform TOP の Scale, Rotate, Translate, そして Extend パラメータをいろいろ組み合わせて、どのような表現が可能か探ってみましょう。Tile TOP と Transform TOP のタイリング表現の違いも比較してみると面白いでしょう。
ポイントのまとめ:
Transform TOP: 本来は移動・回転・拡縮を行うが、Tile タブの Extend 設定 (Repeat, Mirror) と Scale を組み合わせることでタイリング表現が可能。多様な組み合わせ: 移動、回転、拡大縮小とタイリングを組み合わせることで、万華鏡のような効果や複雑なパターン生成ができる。Tile TOPとの違い: Tile TOPは画像を分割・再配置するのに対し、Transform TOPは元の画像を縮小・変形し、空いた領域を繰り返しパターンで埋める、という違いがある。
実習: やってみよう!
さて、ここまでの内容（動画の再生、切り替え、合成、エフェクト、タイリング）を組み合わせて、さらに発展させたオリジナルの簡易VJシステムを作成してみましょう！ 正解はありませんので、自由に発想を広げて試してみてください。
以下にアイデアの例をいくつか挙げますが、これらにとらわれず、自分で「面白そう」と思ったことをどんどん試してみましょう。
エフェクトの追加とパラメータ制御:
サンプル4で試した以外にも、様々なエフェクトTOP（例: Blur TOP, Feedback TOP, HSV Adjust TOP, Pixelate TOP, Cache TOP など）を追加してみましょう。
LFO CHOP や Noise CHOP を使って、エフェクトのパラメータ（例: Level TOPのBrightness、Transform TOPのRotateなど）を時間とともに自動的に変化させてみましょう。CHOPからTOPへのパラメータ参照（エクスポート）を活用します。
タイリング + 回転 + 拡大縮小の組み合わせ:
Transform TOP を使って、動画を細かくタイリングし、同時にゆっくり回転させたり、ズームイン/アウトさせたりしてみましょう。Mirror モードを使うと面白い効果が得られるかもしれません。
文字の合成:
Text TOP を使って好きな文字やメッセージを生成し、Composite TOP を使って再生中の動画の上に重ねてみましょう。Text TOP のフォント、サイズ、色なども調整できます。Level TOP で文字の色を調整するのも良いでしょう。
静止画の合成:
動画だけでなく、Movie File In TOP で読み込んだ静止画や、Constant TOP で生成した単色、Ramp TOP で生成したグラデーションなどを、動画と Composite TOP で合成してみましょう。ロゴや背景パターンとして使えます。
複数の合成・エフェクト系統:
サンプル2のように動画を切り替える系統と、サンプル3のように動画を合成する系統を並行して作り、それらをさらに Switch TOP や Cross TOP で切り替えたり混ぜたりする、より複雑な構成に挑戦してみましょう。
インタラクションの追加:
Mouse In CHOP を使って、マウスの位置やクリックでエフェクトのパラメータや動画の切り替えをコントロールしてみましょう。
（もしあれば）Leap MotionやKinectなどのセンサーデバイスからの入力を CHOP で受け取り、映像制御に利用してみましょう。
進め方のヒント:
まずは、これまでのサンプルをベースに、少しずつ要素を追加・変更していくのが良いでしょう。
Null TOP をネットワークの途中途中に配置して、各段階での映像を確認しながら進めると、問題が発生したときに原因を特定しやすくなります。
パラメータをいろいろ試すことを恐れないでください。予期せぬ組み合わせから面白い表現が生まれることがよくあります。
困ったら、オペレーターの名前で右クリックして Operator Snippets を見てみましょう。公式のサンプルがたくさんあり、参考になります。
作成したシステムは、ぜひ保存しておきましょう。次回の講義や、今後のプロジェクトでさらに発展させることができるかもしれません。楽しんで取り組んでください！
アンケート
本日の講義に参加した方は、以下のアンケートに回答してください。
