yoppa.org

芸大 – メディアアート・プログラミング I 2025

TouchDesigner基本 2 – 動画の再生とTOPの合成

スライド資料

今回の内容

この講義では、TouchDesignerにおけるTOP (Texture Operators) を使った動画の扱い方と、それらを合成したりエフェクトを適用したりする方法を学びます。具体的には以下の内容を進めていきます。

  1. 前回の復習: TOPの基本的な使い方、特に静止画の表示方法について簡単に振り返ります。
  2. Movie File In TOPで動画を再生: 静止画表示に使ったMovie File In TOPで、今度は動画ファイルを読み込み、再生する方法を学びます。基本的なパラメータ設定を確認します。
  3. キー操作による再生のコントロール: Keyboard In CHOPを使って、キーボードからの入力で動画の再生や停止などのコントロールを試みます（今回は主に切り替えに使用）。
  4. 動画の切り替え: 複数の動画を用意し、キーボード操作で表示する動画を切り替える方法を学びます。Switch TOPとCHOPの連携がポイントです。
  5. TOPの合成、エフェクトの適用: Composite TOPを使って複数の映像（TOP）を重ね合わせる方法や、Edge TOP、Level TOPなどを使って映像に視覚効果を加える方法を探求します。
  6. 実習: やってみよう!: これまでに学んだ内容を応用して、自分だけの簡易的な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つの動画ファイルを再生してみましょう。これが今日の全ての活動の出発点となります。

手順:

  1. 新しいTouchDesignerファイル（.toe）を開きます。
  2. ネットワークエディタ上で Tab キーを押し、オペレータークリエータを開きます。
  3. TOP ファミリーから Movie File In TOP を選択し、配置します。
  4. 配置した Movie File In TOP を選択し、パラメータウィンドウを開きます。
  5. File パラメータの右側にある + ボタンをクリックし、再生したい動画ファイルを選択します。（TouchDesignerに付属のサンプル動画や、ご自身で用意した動画ファイルを使用してください。）
  6. Play Mode が Sequential になっていることを確認します。
  7. Play パラメータのトグルスイッチをクリックしてオン（1）にします。これで動画が再生されるはずです。
  8. （オプション）最終的な出力を確認するために、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) を連携させます。

手順と考え方:

  1. 動画の準備: 複数の（今回は4つの）Movie File In TOPを配置し、それぞれ異なる動画ファイルを読み込みます。Play はすべてオンにしておきましょう。
  2. 切り替え役 (Switch TOP): TOP ファミリーから Switch TOP を配置します。このオペレーターは、複数のTOP入力を受け取り、Index パラメータで指定された番号の入力だけを出力します。
  3. 接続: 用意した複数の Movie File In TOP の出力を、すべて Switch TOP の入力に接続します。接続する順番が Index の番号（0から始まる）に対応します。
  4. キー入力の取得 (Keyboard In CHOP): CHOP ファミリーから Keyboard In CHOP を配置します。これはキーボードからの入力を検知し、対応するキー名のチャンネル（例: ‘k1’, ‘k2’, ‘space’ など）に 0 または 1 の値を出力します（押されている間 1）。今回は特定のキー（例: 1 キー）が押されたことを検知するために使います。パラメータで Keyboard を Use Number Keys などに設定すると特定のキーグループをまとめて扱えます。
  5. カウント処理 (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… というループが実現します。
  6. 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で参照することも可能です。）
  7. 出力: 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 を使用します。

手順と考え方:

  1. ベースとなる動画: まず、背景となる（あるいは一方の）動画を用意します。Movie File In TOP を配置し、動画ファイルを指定します。
  2. 重ねる動画: もう一つ、別の Movie File In TOP を配置し、異なる動画ファイルを指定します。
  3. 合成 (Composite TOP): TOP ファミリーから Composite TOP を配置します。このオペレーターは、複数のTOP入力を受け取り、指定された Operation（合成モード）に基づいてそれらを合成した結果を出力します。
  4. 接続: ベースとなる Movie File In TOP を Composite TOP の 1番目の入力 に、重ねたい Movie File In TOP を 2番目の入力 に接続します。入力の順番は Operation によって意味が変わることがあります。
  5. 合成モードの選択: Composite TOP を選択し、パラメータウィンドウの Operation パラメータを変更してみましょう。
    • Over: 2番目の入力が1番目の入力の上に重なります（アルファ値が考慮されます）。
    • Add: 色の値を加算します。明るい部分がより強調されます。
    • Multiply: 色の値を乗算します。暗い部分がより強調されます。
    • Difference: 色の差分をとります。ネガポジ反転のような効果が得られることもあります。
    • その他にも Screen, Overlay, Subtract, Maximum, Minimum など、様々な合成モードがあります。Photoshopなどの画像編集ソフトのレイヤーブレンドモードと同様の考え方です。
  6. 出力: 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が用意されています。ここでは代表的なものをいくつか試します。

手順と考え方:

  1. 元の映像: サンプル3で作成した、Composite TOPで合成された動画（または単一のMovie File In TOPでも可）を用意します。
  2. エフェクトTOPの追加: エフェクトをかけたいTOPの後段に、エフェクト用のTOPを接続します。
    • Edge TOP: 画像の輪郭（エッジ）を検出します。パラメータ Edge Strength で強度、Edge Color でエッジの色などを調整できます。ノイズっぽい表現や線画のような表現に使えます。
    • Level TOP: 色の明るさ、コントラスト、ガンマなどを調整します。Brightness, Contrast, Gamma パラメータを調整して、映像のトーンを変化させます。Invert で色を反転させることも可能です。
    • Tile TOP: 画像をタイル状に分割して並べ替えます。Number of Tiles で分割数、Overlap でタイルの重なり具合、Order で並べ方（ランダムなど）を変更できます。モザイクのような効果や、映像を細かく分割して再構成するような表現が可能です。
  3. 接続: 元の映像を出力するTOP（例: Composite TOP や Null TOP）から、追加したエフェクトTOP（Edge, Level, Tileなど）へワイヤーを接続します。エフェクトは直列に繋いでいくことで、複数の効果を重ねがけすることも可能です。（例: Composite -> Edge -> Level -> Tile）
  4. パラメータ調整: 各エフェクトTOPを選択し、パラメータウィンドウで値を調整してみましょう。それぞれのパラメータが映像にどのような変化をもたらすか、試行錯誤しながら確認します。
  5. 出力: 最終段のエフェクト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 パラメータを使ってタイリング効果を得ることもできます。

手順と考え方:

  1. 元の映像: Movie File In TOP などで動画を用意します。
  2. Transform TOPの適用: TOP ファミリーから Transform TOP を配置し、元の映像のTOPから接続します。
  3. タイリング設定: Transform TOP を選択し、パラメータウィンドウの Tile タブを開きます。
    • Extend: タイリングの方法を指定します。Repeat を選択すると、画像を単純に繰り返して敷き詰めます。Mirror を選択すると、反転させながら繰り返します。
  4. 拡大縮小と組み合わせる: タイリングは、元の画像サイズより表示領域が大きい場合や、画像を縮小した場合に効果を発揮します。
    • Transform タブの Scale パラメータの X と Y の値を小さく（例: 0.5）してみましょう。画像が縮小され、空いたスペースが Extend の設定（Repeat や Mirror）に従って埋められます。これにより、縮小された動画がタイル状に並びます。
  5. 回転や移動との組み合わせ: さらに、Rotate パラメータで回転させたり、Translate パラメータで位置をずらしたりすることも可能です。これらとタイリングを組み合わせることで、より複雑でダイナミックな映像表現が生まれます。
  6. 出力: 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 で受け取り、映像制御に利用してみましょう。

進め方のヒント:

  1. まずは、これまでのサンプルをベースに、少しずつ要素を追加・変更していくのが良いでしょう。
  2. Null TOP をネットワークの途中途中に配置して、各段階での映像を確認しながら進めると、問題が発生したときに原因を特定しやすくなります。
  3. パラメータをいろいろ試すことを恐れないでください。予期せぬ組み合わせから面白い表現が生まれることがよくあります。
  4. 困ったら、オペレーターの名前で右クリックして Operator Snippets を見てみましょう。公式のサンプルがたくさんあり、参考になります。

作成したシステムは、ぜひ保存しておきましょう。次回の講義や、今後のプロジェクトでさらに発展させることができるかもしれません。楽しんで取り組んでください！