Transform TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

※当サイトにはプロモーションリンクが含まれます。

Transform TOP の移動・回転・拡縮機能を示す図

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
→ @maru6o6をフォロー

概要 📖 – 画像を移動・回転・拡縮

Transform TOPは、入力テクスチャを移動・回転・拡大縮小し、タイル状に並べることもできる TOPです。変換の適用順序やピボット（基準点）も細かく指定でき、レイアウト調整やアニメーションの土台として使われます。

主な用途 🎯

  • テクスチャ画像の移動・回転・拡大縮小
  • 画面内でのレイアウト調整（位置合わせ・配置）
  • タイル状の繰り返し・ミラー表示による背景パターン生成
  • ピボット（基準点）を指定した中心回転・拡縮アニメーション
  • ピクセル単位での伸縮による精密なサイズ調整

データフロー 🔄

入力: テクスチャ画像
 ↓
変換処理（移動・回転・拡縮・タイル化）
 ↓
出力: 変換後のテクスチャ画像

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

まる。
まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です！

パラメータ解説 ⚙️

Transform Page 📁

変換順序 .xord 🔄

Transform Order (変換順序) — 拡縮・回転・移動を適用する順番を選びます。順番が違うと最終的な見た目も変わります。

項目 内部名 説明
Scale Rotate Translate .srt 拡縮 → 回転 → 移動 の順で適用
Scale Translate Rotate .str 拡縮 → 移動 → 回転 の順で適用
Rotate Scale Translate .rst 回転 → 拡縮 → 移動 の順で適用
Rotate Translate Scale .rts 回転 → 移動 → 拡縮 の順で適用
Translate Scale Rotate .tsr 移動 → 拡縮 → 回転 の順で適用
Translate Rotate Scale .trs 移動 → 回転 → 拡縮 の順で適用

移動・回転・拡縮 🎯

Translate .t ↔️
– Translate (移動) — 画像を X 軸・Y 軸方向にずらします。
– X (tx) で横方向、Y (ty) で縦方向の移動量を指定します。

Translate Unit .tunit 📐
– Translate Unit (移動の単位) — 移動量を指定する際の単位を設定します。

Rotate .rotate 🔁
– Rotate (回転) — 画像を回転させる角度を指定します。

Scale .s 🔍
– Scale (拡縮) — 画像を X 軸・Y 軸方向に拡大・縮小します。
– X (sx) で横方向、Y (sy) で縦方向の倍率を指定します。

Grow / Shrink .growshrink 📏
– Grow / Shrink (拡大 / 縮小) — ピクセル単位で画像を拡縮します。正の値で指定ピクセル分だけ拡大、負の値で縮小します。
– X (growshrinkx) で横方向、Y (growshrinky) で縦方向のピクセル量を指定します。

Pivot .p 🎯
– Pivot (基準点) — 拡縮・回転の中心となる点を指定します。基準点をずらすと、拡縮時に画像がその点へ向かってスライドするように見えます。
– X (px) で横位置、Y (py) で縦位置を指定します。

Pivot Unit .punit 📐
– Pivot Unit (基準点の単位) — 基準点を指定する際の単位を設定します。

背景と合成 🎨

Backgound Color .bgcolor 🎨
– Backgound Color (背景色) — 前景画像の背後に表示される色です。画像を移動したり縮小したりすると、空いた領域にこの背景色が見えます。
– Red (bgcolorr) / Green (bgcolorg) / Blue (bgcolorb) / Alpha (bgcolora) で色と不透明度を指定します。

Pre-Multiply RGB by Alpha .premultrgbbyalpha ✖️
– Pre-Multiply RGB by Alpha (アルファによる事前乗算) — 背景色を Alpha 値であらかじめ乗算します。

Comp Over Background Color .compover 🖼️
– Comp Over Background Color (背景色で合成) — Alpha が 1 未満の領域を背景色で塗りつぶします。

Mipmap Bias .mipmapbias 🔬
– Mipmap Bias (ミップマップ補正) — 入力をミップマップで縮小表示する際に、使用するミップレベルを補正します。負の値で高精細なレベル、正の値で粗いレベルを選びます。
– Input Smoothness が Mipmap Pixels のときに有効になります。

Tile Page 📁

端の扱い .extend 🧩

Extend (端の扱い) — タイルの端で画像をどう処理するかを選びます。

項目 内部名 説明
Hold .hold 端のピクセル値をそのまま外側へ引き伸ばす
Zero .zero 端より外側には画像を表示しない
Repeat .repeat 端で画像を繰り返す
Mirror .mirror 端で画像を反転させて繰り返す

タイル設定 🔳

Limit Tiles .limittiles 🔢
– Limit Tiles (タイル数の制限) — オンにすると、下記のパラメータで U 方向・V 方向に繰り返すタイル数を制限します。

Tile U .tileu ↔️
– Tile U (横方向のタイル) — 元画像の左側に繰り返すタイル数、右側に繰り返すタイル数をそれぞれ指定します。
– タイルを見るには Transform ページの Scale で画像を縮小しておく必要があります。

Tile V .tilev ↕️
– Tile V (縦方向のタイル) — 元画像の下側に繰り返すタイル数、上側に繰り返すタイル数をそれぞれ指定します。
– タイルを見るには Transform ページの Scale で画像を縮小しておく必要があります。

実践アイデア 💡

Example 1: 画像のセンタリング配置 🎯

Movie File In TOP → Transform TOP (Translate / Scale) → Out

読み込んだ画像を Transform TOP で位置と大きさを整え、画面内の狙った場所にぴったり配置する基本フロー。レイアウト調整の土台になります。

  1. Movie File In TOP で素材画像を読み込む
  2. Transform TOP の Translate で X・Y 位置を調整
  3. Scale で画面に収まるサイズへ拡縮
  4. 出力を確認しながら位置を微調整

Example 2: 回転アニメーション 🔁

Constant TOP → Transform TOP (Rotate + Pivot) → Out

Pivot で基準点を中心に設定し、Rotate の角度を時間で変化させることで、画像を中心軸まわりにくるくる回すアニメーションを作る用途。

  • Transform TOP の Pivot を画像の中心に設定
  • Rotate パラメータを時間に応じて変化させる
  • 基準点を軸に画像が回転

Example 3: タイル状の背景パターン 🔳

Ramp TOP → Transform TOP (Scale + Tile Repeat) → Out

元画像を Scale で縮小し、Tile ページの Repeat や Mirror で繰り返し並べることで、規則的なタイル背景や反復パターンを生成するフロー。

  • Transform TOP の Scale で画像を縮小
  • Tile ページの Extend を Repeat または Mirror に設定
  • Tile U / Tile V で繰り返し数を調整

関連オペレータ 🔗

類似機能OP 🔍

  • Fit TOP — 解像度や縦横比に合わせた配置・フィットに特化
  • Crop TOP — 画像の切り出し・トリミングを行う
  • Flip TOP — 上下・左右の反転を行う

組み合わせ推奨OP 🔄

  • Composite TOP — 変換後の複数画像をレイヤー合成
  • Over TOP — 配置した画像を別画像の上に重ねる
  • Feedback TOP — 変換結果を再入力して残像・蓄積効果を作る
  • Level TOP — 配置後に明るさ・コントラストを補正

前処理・後処理TOP 🎯

Info情報 📊

Transform TOP は Info CHOP による詳細情報取得に対応しています。

TOP固有情報 🖼️

  • resx: TOP の出力解像度 X (ピクセル単位)
  • resy: TOP の出力解像度 Y (ピクセル単位)
  • aspectx: アスペクト比 X
  • aspecty: アスペクト比 Y
  • depth: 3D テクスチャ / テクスチャ配列の深度 (2D テクスチャでは 1)
  • gpu_memory_used: TOP が消費している GPU メモリ量 (MB 単位)

汎用オペレータ情報 🔄

  • total_cooks: プロセス開始からのクック回数
  • cook_time: 最後のクック時間 (ミリ秒)
  • cook_frame: 最後にクックされたフレーム番号
  • warnings: 警告数
  • errors: エラー数

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: 移動・縮小すると周囲に余白が出る
✅ Solution:

  • Backgound Color で余白に表示する色と不透明度を設定
  • 繰り返しで埋めたい場合は Tile ページの Extend を Repeat または Mirror に設定
  • Comp Over Background Color をオンにして Alpha の薄い領域を背景色で塗りつぶす

❌ Problem: 回転や拡縮の中心がずれる
✅ Solution:

  • Pivot (基準点) を画像の中心など意図した位置に設定
  • Pivot Unit の単位が想定どおりか確認
  • Transform Order の適用順序を変えて結果を見比べる

❌ Problem: タイルが表示されない
✅ Solution:

  • Transform ページの Scale で画像を縮小してからタイルを確認
  • Tile U / Tile V の繰り返し数が 0 になっていないか確認
  • Limit Tiles がオンの場合はタイル数の上限設定を見直す

参考資料 📚

その他 🔗

公式リソース 📖

この記事はLLMと共に内容を執筆、更新しています。
最新バージョンとの項目差異など、情報の不一致を見つけた心優しい方はXもしくはInsta、メールなどよりサイト管理者までご連絡ください😎


まる。

お仕事のご依頼はDM又はメールにて。
━━━━━━━━━━━━━━━━━
Python/Touchdesigner/M5Stackをこよなく愛すフルスタックエンジニア。
専門は生理心理学、趣味はヨガやサウナ、EMS電気風呂などヘルスケア全般。
脳波や筋電、心拍を中心とした生体情報のセンシング＆インタラクティブアートづくりがライフワーク。

普段はワントゥーテンという会社で空間演出エンジニアをしています。
リファラル採用お繋ぎできますので、我こそはという尖った方は経歴と希望職種添えてDMください(エンジニア以外、営業職等もOK)。
ご飯行きましょう。

↓日常垢
Instagram：＠malmal0v0

まる。をフォローする
その他の記事はこちら
Math Combine POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED Select TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Window COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Widget COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

タイトルとURLをコピーしました