TouchDesigner 即時 Motion Graphic 全攻略：Displace 置換與 absTime 動態｜IVD487 W05

TouchDesigner 即時 Motion Graphic 全攻略：Displace 置換與 absTime 動態

• 三種輸出方式（存圖、存影片、即時錄製）差在哪、各自的坑
• 怎麼用 absTime 一行程式碼做持續累加的動態，還能控制速度與循環
• Text (TOP) 為什麼不能換行，得搭 Text (DAT)
• Ramp 四種漸層、Lookup 等同 LUT 的上色概念
• Displace 怎麼用「顏色」當位移量，做出切片與水波文字
• Motion Graphic 心法：單一 Math (CHOP) 同時控制多個 Transform

一、三種輸出方式：存圖、存影片、即時錄製

⚠️ 兩個常忘的點： Save Image 只吐 TIFF，要別的格式改用 Movie File Out (TOP)。而 Movie File Out (TOP) 按下 record 會一直錄到你手動關掉，別忘了停。

二、absTime：一行程式碼做持續動態

• absTime.seconds：檔案一開啟就持續累加的秒數。
• absTime.frame：改用 frame 計算，數字大很多（1 秒 = 60 frame），跑得快。

三、Text 家族：TOP 放字、DAT 控換行

• Text (TOP) 沒辦法直接 enter 換行。 打太長會被左右 cut 掉；打開 Word Wrap 只會在超出畫框時自動折，你控制不了折在哪。
• 想精準控制換行，就搭 Text (DAT)：在 DAT 裡像記事本一樣自由編輯、換行，再把 DAT 拉進 Text (TOP) 的輸入即可（記得清掉 TOP 自己那串預設文字）。
• 字型無法預覽，得先知道字型名稱；非英文字型名不好找。另外 Text 的 border color 指的是整個畫布邊框，不是文字外框。

⚠️ 要換行就上 DAT。 Text (TOP) 打不了 enter 是常見卡點，需要多行文字一律 Text (DAT) 編好再丟進來。

四、Ramp：四種漸層一次看懂

💡 刪色標要往上拉移除，別直接按 delete——那會把整個節點刪掉。

五、Lookup：等同攝影 LUT 的上色

• 第一個輸入放來源圖（例如黑白色階），第二個輸入放一張漸層（Ramp）。
• 它會把來源的黑階對應到漸層最左、白階對應到最右，中間逐步過渡。右側的 Dark UV／Light UV 控制黑階與白階各自對到漸層的哪個位置（預設 0 與 1，也就是最左與最右）。

六、Noise 與 Displace：用顏色驅動位移

• 預設是 monochrome（黑白），想要彩色噪點把它關掉。
• 第二個 tab 的 transform 能位移整張 noise，z 軸填 absTime 就會持續翻動——後面的水波就是這樣讓噪點流動的。

• 第一輸入放來源圖，第二輸入放變化圖。
• 預設下 R 通道讓畫面橫向位移、G 通道讓畫面縱向位移（藍色不動）。所以拿一張彩色 noise 當第二輸入，來源就會依噪點的 R／G 亂抖、產生波紋。

⚠️ Displace 預設數值太高，一接上畫面就爆掉。把 displace weight 降到約 0.1（或 0.05）畫面才會回到框裡。

七、兩個實戰組合：文字切片與水波文字

1. Text (TOP) 打一個字（例如 R）放大，接 Ramp (TOP) 進 Displace (TOP) 第二輸入，displace weight 降到 0.1。
2. Ramp 用紅色系、把 period 調小 → 文字被切成好幾片（R 通道橫向位移的效果）。
3. 接 Lookup (TOP)，第二輸入另接一張 Ramp 當調色盤上色。
4. 加 HSV Adjust (TOP)，在 hue offset 填 absTime.seconds * 100 % 360 → 顏色持續循環變色。Ramp 的 phase 也塞 absTime.seconds * 0.2 讓切片慢慢流動。

⚠️ HSV 的 hue offset 最大 360，超過會卡在數字不動。記得加 % 360 讓它在 0～360 循環。

八、CHOP 平滑：Filter 與 Lag

• Filter (CHOP)：平滑幅度大、變化很平緩，帶一點延遲。filter width 拉高 → 更平緩（要等更久才跟上）。
• Lag (CHOP)：一樣平滑，但動態感多一點——移動瞬間會稍微加速再減緩（像 ease out）。可分別設數值上升／下降的延遲，甚至加 overshoot 做「過彈」的彈力感。

九、Motion Graphic 心法：單一 Math 控多個 Transform

1. Circle (TOP) 佈成五顆，各接 Constant (TOP) 上色，Composite (TOP)（over）疊在深藍底＋半透明 Noise (TOP) 上。
2. 動態源：LFO (CHOP) 選 square（方波） → Lag (CHOP)（平滑方波的硬切）→ Math (CHOP)。
3. 先手動試出圖形要移動到的位置（例如 0.2），把 Math 的 range 設成對應區間（±0.1，再在綁定處各自 2、1…）。
4. 把同一串綁定貼到五個 Transform 上，只改倍率 → 一顆 Math 就同時控制五個 Transform 的移動幅度，之後只要調 LFO 週期或 Math 一個數值，五個一起變。

十、Pattern：Layout／Tile 與跑馬燈

• Layout (TOP)：把多張 TOP 自動排列，可左到右、上到下，或設格子 2×2、3×3 往下累加。
• Tile (TOP)：把單張圖直接變 2×2 拼貼。repeat x／y 控制數量。
• Transform (TOP) 的 Tile 頁：也能做 repeat，但要把 scale 縮小、讓圖小於畫布，周圍的重複圖才會出現。

⚠️ Tile 的 repeat 不能大於 2（很反直覺）。要超過 2×2，得回到前一個節點用 Crop：把 crop left 調成小於 0、crop right 大於 1（超出畫面），再把 extend 設成 repeat，就能無限複製。

常見問題 FAQ

課後練習

1. 三種輸出各試一次。 同一個畫面分別用 Save Image、Export Movie、Movie File Out (TOP) 輸出；用 Movie File Out 錄一張帶 alpha 的 PNG 與一段 h.264 影片。
2. absTime 動態。 用 Ramp (TOP) 的 circular／radial，把 phase 填 absTime.seconds 做旋轉漩渦；或在 Transform (TOP) 的 rotate 填 absTime.frame，再用 倍率 與 % 360 控速度與循環。
3. 置換文字。 照第七節做切片文字或水波文字：Text → Ramp／Noise → Displace（weight ≈ 0.1）→ Lookup 上色 → HSV Adjust（hue offset 用 % 360）。
4. 本週作業：動態海報。 拆成獨立部件，用單一 Math (CHOP) 配倍率同時驅動多個 Transform；配 LFO (CHOP) square ＋ Lag (CHOP) 做方波動態，可再用 Tile (TOP) 或 Transform repeat 做 pattern／跑馬燈。客製的調色盤節點可用 Ramp 替代。

影片章節