TouchDesigner 互動狀態機:Timer/Logic 串起轉場、碰撞與幸運轉輪防呆|IVD487 W13

想用 TouchDesigner 串起一套完整的互動流程?這篇整理用 Logic (CHOP) 與 Timer (CHOP) 打造互動狀態機的做法:鍵盤切換影像加轉場、2D 碰撞判定、閒置自動回預設、Trigger (CHOP) 幸運轉輪防呆。附節點速查表、Switch vs Cross 對照與章節時間戳,上完課回來掃一遍就能接回流程。

Jun 1, 2026
🧰 TouchDesigner 工具庫 | Luxmin Institute on Patreon
我們把接案與展場現場累積下來的 TouchDesigner 元件、專案檔與製作系統,整理發佈在 Patreon,部分工具與 Demo 免費開放下載。
https://www.patreon.com/cw/LuxminInstitute
⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑

TouchDesigner 互動狀態機:Timer/Logic 串起轉場、碰撞與幸運轉輪防呆

前幾週都在講互動控制的「感測」端——感測器、感測軟體、一點 AI(像上週的 MediaPipe 手勢辨識)。這一週轉向比較硬核的主題:互動系統設計。也就是把訊號接上效果之後,用邏輯與狀態機把整段互動流程串得順、串得穩。
關鍵觀念先講:互動 = 訊號 + 效果。 訊號確定後,剩下就是用 Logic (CHOP)Timer (CHOP)Trigger (CHOP) 這些節點把「什麼時候切、切多久、切去哪」講清楚。這篇是重點整理,上完課回來掃一遍就能把四個效果接回來。
讀完這篇你會知道:
  • 鍵盤切換影像的兩種寫法:CHOP Execute (DAT) 寫 Python,或純節點用 Logic (CHOP)Fan (CHOP)
  • Switch (TOP)Cross (TOP) 差在哪、怎麼選
  • 怎麼用 Logic (CHOP) 偵測「數值變化」再接 Timer (CHOP) 做轉場
  • 2D 碰撞判定的完整節點鏈
  • 互動狀態機:沒人互動時自動回預設畫面
  • Trigger (CHOP)Speed (CHOP) 做幸運轉輪,加上展場防呆
Video preview
本週四個互動效果總覽:
互動效果
訊號來源
核心節點鏈
鍵盤切換影像+轉場
Keyboard In (CHOP)
Logic → Fan → Switch;轉場走 Logic(value change) → Timer → Filter → Cross
2D 碰撞判定
Mouse In (CHOP)Circle (TOP)
Circle × Multiply → Analyze(max) → TOP to CHOP → Select(alpha) → Logic → Level
互動狀態機(閒置回預設)
Mouse In (CHOP)
Math(combine) → Logic(value change) → Timer → running → Filter → Switch
幸運轉輪
Button (COMP)
Trigger(ADSR) → Math(0→360) → Speed → 旋轉

一、鍵盤切換影像:兩種寫法

按鍵盤 1~5 切換不同影片,是最基礎的 VJ 式影像控制。同一件事有兩條路。
方法一:Rename (CHOP)CHOP Execute (DAT) 寫 Python
Keyboard In (CHOP) 的 channel 名稱從 k1k2… 用 Rename (CHOP) 改成 15,再用 CHOP Execute (DAT) 在按鍵觸發時執行一行程式:
python
op('switch1').par.index = channel.name
逐字拆解這一行:
  • op('switch1'):指定那顆 Switch (CHOP) 節點。
  • .par:進到它右側的參數欄(所有參數都在 par 底下)。
  • .index:指到 Index 這個參數(點開參數就能看到它的內部名稱)。
  • = channel.name:把剛被觸發的那個 channel 名稱(已 rename 成 1~5 的數字)指派進去。
所以「按幾號 → Switch 的 index 變幾」就成立了。這行屬於 CHOP Execute (DAT) 的回呼;想進一步玩條件判斷,可延伸:TouchDesigner Python 條件運算/三元表達式
方法二:Logic (CHOP) radio button + Fan (CHOP),不寫程式
其實不一定要寫 Python。Keyboard In (CHOP) 後面接 Logic (CHOP),在 Channel Pre-OP 選 Radio Button(把 5 個鍵變成單選,停在最後按的那個),再接 Fan (CHOP)Fan In,把「多 channel 的開關」壓成「單一 channel 的數值」,最後接 Null (CHOP) 連到 Switch 的 Index。全程用節點就做完。
Logic (CHOP) 的常用模式先整理成表:
設定
位置
效果
Off When 0 or Less
Convert Input
≤0 → 0,>0 → 1(預設)
Off When 0
Convert Input
只要不等於 0 就變 1
Value Change
Convert Input
只在數值「變動」的瞬間送出 1(轉場、狀態機偵測用)
Invert
Channel Pre-OP
0 與 1 對調
Toggle
Channel Pre-OP
開關型,按一下切換一次
Radio Button
Channel Pre-OP
多按鍵變單選,停在最後選的那個
💡 Fan (CHOP) 從 0 開始數: 切到第 1 個按鍵,右側顯示的數值是 0,之後依序 1、2、3、4。程式邏輯從 0 起算,接 Index 時心裡先有底,不然會覺得「怎麼差一號」。
📺 影片段落:4:435:107:088:169:29

二、Switch vs Cross:什麼時候用哪個

切換與漸變有兩個節點可選,差別很清楚:
Switch (TOP)
Cross (TOP)
input 數量
無限個,可一直接
只有 2 個
切換方式
預設硬切;開 Blend Between Inputs 可微微漸變
只有 0–1 漸變
適用場景
通用,多畫面切換首選
明確只需要兩個畫面漸變時
建議
不確定就用它,可用範圍最廣
特定用途再選
CHOPTOP 都有 Switch。一般優先選 Switch——硬切、漸變都能用數值控制;只有在你確定只需要兩個畫面對切、想要乾淨漸變時,才選 Cross
📺 影片段落:10:37

三、加轉場:偵測數值變化 → Timer → Filter → Cross

硬切太生硬,想在切換瞬間蓋一張轉場圖。邏輯是:偵測到有人切換 → 讓轉場畫面漸入蓋住 → 蓋住的瞬間偷換底下的素材 → 轉場再漸出。
接法:
  1. 在切換訊號後面再接一顆 Logic (CHOP),Convert Input 選 Value Change——只在你按鍵切換的那一瞬間送出訊號。
  2. 用這個訊號觸發 Timer (CHOP)(例如設 3 秒)。Timer 跑動時的 running channel 剛好是 1/結束回 0。
  3. Select (CHOP) 把 running 取出來,接 Filter (CHOP)(或 Lag (CHOP))做漸進,再接 Null (CHOP) 連到 Cross (TOP),控制轉場圖漸入漸出。
⚠️ Timer (CHOP) 前面兩個 input 別接錯: 滑鼠移上去會顯示,第一個是 Initialize Trigger(重設),第二個才是 Start Trigger(開始)。訊號一定要接到第二個;接到第一個等於一直在重設,Timer 永遠不會跑,轉場也永遠觸發不了。
做完會發現一個時機問題:影片先切了、轉場才蓋上來,那轉場就白做了。要讓底下的素材延後一點、等轉場蓋滿再換。
⚠️ 影片先切、轉場才到?加一顆 Delay (CHOP) 在通往 Switch 的數值變化路徑上插 Delay (CHOP),把它的 Length 綁成 Timer 的 Length ÷ 2(在 Timer 的 Length 上按右鍵 Copy Parameter,貼成 Path Reference 再除以 2)。這樣不管 Timer 調多長,切換點永遠落在轉場「蓋滿畫面」的中間,換得神不知鬼不覺。
📺 影片段落:15:5920:02

四、2D 碰撞判定:Circle × Multiply → Analyze → Logic → Level

判斷「滑鼠控制的圓」有沒有碰到目標圖,靠的是混合模式的老觀念:Multiply (TOP) 只留兩張圖都有顏色的重疊處。完整節點鏈:
  1. Mouse In (CHOP) 控制 Circle (TOP) 的位置(跟以前畫圖一樣)。
  2. Circle (TOP) 與目標圖 Multiply (TOP)——只有兩者重疊時,畫面才會出現一點點內容。
  3. Analyze (TOP),把模式從 Average 改成 Max(直接抓最大值,重疊就跳出來)。
  4. TOP to CHOP (CHOP) 把畫面轉成數值。
  5. Select (CHOP) 只取 alpha channel(碰撞優先看 alpha,重疊時接近 1)。
  6. 有了 0/1 的開關,就能去控制任何效果——例如接 Level (TOP) 拉透明度,讓一張圖(示範用蝴蝶)在碰到時跳出來。
⚠️ 碰撞判定記得再壓一顆 Logic (CHOP) 圖像邊角有抗鋸齒平滑,alpha 在邊緣會出現像 0.8863 這種半透明小數。加一個 Logic (CHOP),只要「不是 0」就變 1,把訊號壓成乾淨的 0/1,開關才不會在邊角糊掉。
💡 合成前先用 Fit (TOP) 把幾張圖統一成同一比例(例如 1280×720),再進 Composite (TOP)Over 疊起來,畫面才不會被拉伸。
📺 影片段落:22:0223:3724:5025:51

五、互動狀態機:閒置自動回預設

需求是兩個狀態:預設狀態播一段循環影片;互動狀態在有人操作時進入,一段時間沒人動就自動退回預設。設計互動作品前,先把功能列清單(更完整會畫互動流程圖),再開始接節點。
接法:
  1. Mouse In (CHOP)tx、ty(橫軸、縱軸)。
  2. 不必分辨動的是 x 還是 y,用 Math (CHOP)Combine Channels 把兩軸相加——只要其一在動,總和就在變。
  3. Logic (CHOP)Value Change:數值一變就送出 1,停了變 0,這就是「有沒有人在互動」的開關。
  4. 把這個開關接到 Timer (CHOP)第二個 input。只要持續互動,Timer 就一直被 reset、不會歸零;一旦停手,倒數走完。
  5. 取 Timer 的 running channel → Filter (CHOP) 漸進 → Null (CHOP)Switch,時間到就切回預設影片。
閒置時間依現場需求設定,展場常設得更長,讓沒人時仍留在預設畫面(記得在預設畫面放提示文字,告訴觀眾怎麼開始互動)。
最後一個優化:如果互動狀態用到先前教過的 Feedback (TOP) 迴圈(小畫家式繪製效果),回到預設後畫布還殘留筆跡。可以做手動 reset——在 Mouse In (CHOP) 設一個 right button channel 綁到 Feedback (TOP) 的 pause/reset;或直接把 running 訊號綁到 Feedback (TOP) 的 pause,讓它每次「從 0 變成大於 0」時自動清一次畫布,每個人上手都是乾淨的畫面。
📺 影片段落:28:0931:3833:3536:04

六、幸運轉輪:Trigger → Speed 持續旋轉+展場防呆

需求:按按鈕開始旋轉、約 5 秒後停、轉速可調、而且不能被重複狂按弄壞。素材先在繪圖軟體切好三層(底圖、會轉的盤面、盤面上的文字),再進 TouchDesigner 整合。
接法與三個關鍵坑:
  1. Button (COMP),Button Type 選 Momentary——按下瞬間觸發一次就自動關掉(不要 Toggle,那會變按一下開、再按一下關)。
  2. Trigger (CHOP):它是 ADSR 波形產生器(和合成器的波形產生器同源),按 push 會送出一段 0→1→回落的波形。想看清波形,到 Common 把 Time Slice 關掉,才看得到整段變化。
  3. 中間插 Math (CHOP):Trigger 只有 0~1,用 From Range 把 0→1 映射成 0→360,旋轉幅度才夠。
  4. Trigger 直接綁旋轉會轉過去又轉回來(因為它是觸發開關,數值會歸位)。要在 Math 與旋轉之間插 Speed (CHOP)——它是「持續累加器」,輸入是多少就每秒累加多少,於是按一下就持續往同方向轉,波形回 0 後累加停止、盤面自然停下。
調 ADSR 讓它更像真轉輪:把 Peak Length 拉到約 5 秒(維持高速那段)、Sustain Level 設 0(去掉停在 0.5 的頓點)、Attack 與 Decay 各拉長到約 1 秒(起步與收尾都漸進)。嫌不夠快就把 Math 的 To Range 上限從 360 拉到 1000,Speed 的累加就更猛。
⚠️ 展場一定做防呆。 觀眾在展場一定會狂按按鈕試著弄出 bug。把防呆做進 Trigger:觸發旋轉後,不論中途怎麼按,都照樣在 5 秒後停,不會被連按疊加成無限旋轉。能預判觀眾的怪操作並先擋好,體驗才穩;有餘力還能在怪操作下藏彩蛋。
📺 影片段落:38:1742:5345:0447:33

常見問題 FAQ

Q1:op('switch1').par.index = channel.name 每個字什麼意思?op('switch1') 是指定那顆 Switch (CHOP) 節點;.par 進到它的參數欄;.index 指到 Index 這個參數;= channel.name 把剛被觸發的 channel 名稱(已 rename 成數字)指派進去。合起來就是「按幾號,Switch 的 index 就變幾」。
Q2:Switch (TOP)Cross (TOP) 差在哪、該選哪個?Switch input 無限、預設硬切、開 Blend Between Inputs 可漸變,通用性高;Cross 只有 2 個 input、只做 0–1 漸變。不確定就用 Switch,只有明確要兩畫面漸變才選 Cross
Q3:Logic (CHOP) 的 Off When 0 / Value Change 各是什麼?
Off When 0 or Less 是 ≤0 為 0、>0 為 1;Off When 0 是只要不等於 0 就變 1;Value Change 只在數值「變動的那一瞬間」送出 1——轉場與狀態機的偵測都靠它。
Q4:Fan (CHOP) 切到第 1 個,為什麼顯示 0?
因為程式邏輯從 0 起算。第 1 個按鍵對應數值 0,之後才是 1、2、3、4。接 Switch 的 Index 時把這個位移記著就不會差一號。
Q5:Timer (CHOP) 前面兩個 input 差在哪?
第一個是 Initialize Trigger(重設),第二個是 Start Trigger(開始)。訊號要接第二個才會讓 Timer 跑起來;接到第一個等於一直重設,永遠觸發不了。
Q6:碰撞判定都取到 alpha 了,為什麼還要再加 Logic (CHOP)
因為圖像邊角有抗鋸齒平滑,alpha 在邊緣會是 0.88 這種半透明小數。多壓一顆 Logic (CHOP),把「不是 0」都變 1,訊號才會是乾淨的 0/1,開關不會在邊角糊掉。

課後練習

  1. 鍵盤切換影像+轉場(純節點版)。Keyboard In → Logic(radio button) → Fan(fan in) → Null → Switch 做切換,再接 Logic(value change) → Timer → Filter → Cross 做轉場,並用 Delay Length ÷ 2 修正切換時機。全程不寫 Python。
  2. 2D 碰撞判定。 Circle × Multiply → Analyze(max) → TOP to CHOP → Select(alpha) → Logic → Level,讓圓碰到目標圖時跳出一張圖。記得用 Logic 把 alpha 壓成 0/1、合成前用 Fit 統一比例。
  3. 幸運轉輪防呆。 Button(momentary) → Trigger → Math(0→360) → Speed → 旋轉,調 ADSR 讓它轉約 5 秒漸停,並確認「觸發後怎麼狂按都照樣停」。
  4. (進階)閒置回預設狀態機。 Mouse In(tx+ty) → Math(combine) → Logic(value change) → Timer,用 running 接 Filter → Switch,做出沒人互動就自動退回預設影片。

影片章節

時間
內容
本週四個互動效果預告
方法一:RenameCHOP Execute (DAT)Switch,拆解 op('switch1').par.index
Logic channel pre-op:invert/toggle/radio button
Fan (CHOP) 多 channel 轉單一數值
Switch (TOP) vs Cross (TOP)
Logic value change → Timer (CHOP) 觸發轉場
Delay (CHOP) Length ÷ 2 修正切換時機
2D 碰撞:Circle × Multiply (TOP)
Analyze (TOP) 改 Max → TOP to CHOP
Select 取 alpha → Logic 壓 0/1
Level (TOP) 讓圖出現 + Fit 統一比例
狀態機需求:預設/互動兩狀態
Mouse In → Math(combine) → Logic 偵測互動
Timer running → FilterSwitch 回預設
Feedback (TOP) 手動/自動 reset
幸運轉輪需求+防呆機制、Button 選 momentary
Trigger (CHOP) ADSR 波形(關 Time Slice 看)
Math From Range 0→360 + Speed (CHOP) 累加旋轉
調 Trigger Peak Length 至約 5 秒
小遊戲標靶:碰撞判定+狀態機的綜合應用
想把這些互動節點接回整體工作流,回顧支柱文章:TouchDesigner 入門全攻略
 
⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑
Luxmin Institute (互動研究院) on Patreon
教學講的是觀念,工具則是我們在真實展場裡跑過、改過、確定能用的東西。TD 元件、專案檔、校正與製作流程都陸續發佈在 Patreon 上,免費層可以先看 Demo 與公開工具,付費層取得完整檔案與更新:
https://www.patreon.com/cw/LuxminInstitute
最新的活動動態與報名資訊:
https://www.threads.com/@luxmin.institute
 
如有相關專案或其他需求,請洽 luxmin.art