Bonus：多媒體互動展演技術規劃：HDMI 傳輸距離、佈線與電力計算實戰｜IVD487 W18
一場互動展演在現場能不能順跑，關鍵不在軟體，而在基礎設施。這篇以體感作品「地面鬥技場」為範例，一層一層把技術規劃圖填滿：USB 線材與速度、顯示三大類、投影機規格、HDMI 傳輸距離解法、影像分配、音訊 PA、網路協定、電力計算、佈線與遠端監控。附多張對照表與章節時間戳，規劃前掃一遍就能跟廠商對得上話。
🧰 TouchDesigner 工具庫 ｜ Luxmin Institute on Patreon
我們把接案與展場現場累積下來的 TouchDesigner 元件、專案檔與製作系統，整理發佈在 Patreon，部分工具與 Demo 免費開放下載。
→ https://www.patreon.com/cw/LuxminInstitute
⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑
我們把接案與展場現場累積下來的 TouchDesigner 元件、專案檔與製作系統，整理發佈在 Patreon，部分工具與 Demo 免費開放下載。
→ https://www.patreon.com/cw/LuxminInstitute
⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑
TouchDesigner Customize Component 自訂參數教學：打造專屬控臺
上一週把互動邏輯收進互動狀態機，這一週把鏡頭轉向「人怎麼操作」——控臺與 UI。現場表演或互動作品要即時調參數時，總不能對著滿畫面節點亂拉，一不小心就動到不該動的連線。
這篇是重點整理，主軸放在三件事：用 Customize Component 自訂參數把要調的東西暴露成乾淨控臺、TD 內建 UI 元件與
Container (COMP) 整合，以及用手機／平板當觸控介面的 TouchOSC。上完課回來掃一遍就能把流程接回來。讀完這篇你會知道：
- 三種控制方式（keyboard／MIDI、滑鼠、觸控 UI）各適合什麼場合
- 怎麼用 Customize Component 把參數暴露成乾淨控臺
- 為什麼綁定要用 pass point 而不是 reference
- 十種自訂參數類型怎麼選
- TD 內建 UI 元件、
Container (COMP)整合，以及 TouchOSC 十三種元件與連線設定
一、三種控制方式
做一個有功能的控臺，常見的控制路線有三種：
- keyboard／MIDI： 兩者本質一樣，都是「按鍵觸發」，差別只在傳輸協定不同（電腦鍵盤 vs. Launchpad／MIDI keyboard）。表演時常用「按 1、2、3 切換視覺」，畫面一區放輸出、一區留節點區，臨時要加
Level (TOP)調亮度／對比也快。 - 滑鼠： 直接拖參數。最簡易的做法是把節點的 parameter view 分割到左側，但缺點明顯（見下）。
- 觸控 UI： 有觸控螢幕或平板時最順手，也就是本週主角——自訂 UI。
滑鼠分割 parameter view 的坑： 這種分割是三個視窗共用，在不同 view 之間切換時，parameter 會全部跳成「最後選取的那個節點」，而且每次重開檔案都得重設，保存性差。能用，但不建議大量依賴。
二、Customize Component：把要調的參數暴露出來
比分割 view 更好的做法，是用 Customize Component 自訂節點欄位。所有
COMP 都能自訂參數，但首選是 Base (COMP)——它是最乾淨的 COMP，像個空資料夾，不帶多餘參數干擾設計，最適合當「容器」把內部節點包起來、只暴露你真正要調的參數。Container (COMP) 也行，但綁定用途上較少用。流程：
- 建一個
Base (COMP)，對它按右鍵 → Customize Component。 - 在跳出的介面新增一個 page（等同一個 tab）。
- 選到該 page，新增參數，挑好類型。
- 對參數做 binding（下一節）——剛建好的參數還沒連任何東西，不綁定不會有作用。
綁好之後，把內部節點的 viewer 關掉，畫面就只剩一區輸出、一區你保留的參數。好處是介面乾淨、只留真正要碰的旋鈕，不會不小心拉錯參數影響整體視覺。
💡 綁定的目標參數不一定要放在這顆COMP裡面，放外面也連得起來；但實務上建議針對COMP內部節點做綁定，物件化、好維護。
三、Binding：pass point 優於 reference
綁定的做法是：對自訂參數按右鍵 → copy parameter，再到目標參數上按右鍵 → pass point（別選另外兩個）。
為什麼是 pass point？因為它雙向同步：控臺和內部節點兩邊都能改值，而且手動拉動也不會斷連。反觀舊有的 reference 是單向的——你雖然能從控臺控制，但只要在另一端手動一調，連結就斷掉、不再同步。
綁定方式 | 方向 | 手動拉動時 | 適用場合 |
copy parameter → pass point | 雙向同步 | 不會斷 | Customize Component 首選 |
reference | 單向 | 一手動就斷連 | 只在確定不需回控時才用 |
⚠️ 在 Customize Component 一律用 pass point，別用 reference。 reference 只要手動調就斷連，控臺會失效。除非你很確定這條資料不需要雙向回控，否則預設就是 pass point。
四、自訂參數類型總覽
新增參數時有一整排類型可選，先給速查表：
類型 | 一句話用途 |
manual | 下拉式選單（menu），常拿來控 index／切換 |
float | 小數；float1 有 slider，float2 以上要按住左右拖 |
int | 整數 |
rgba | 顏色 |
uvw | 材質座標相關 |
xyzw | 位移相關 |
toggle | 開關（按一下開、再按關） |
momentary | 按著才有訊號、放開即消失 |
pulse | 觸發一次 |
sequence | 一組可複製的參數陣列，類似 Constant，用加減增減 block |
float、uvw、xyzw 三者實際用起來幾乎沒差、都是以小數為主，命名主要是方便辨別「這個參數用在哪一類」，混用通常也不會出錯。另外最上面那排 TOP／COMP／DAT／CHOP 資料類型可以直接 drag and drop 拉來綁；拉失敗就代表不適用該類型資料。五、實作：自訂一顆 custom COMP
以一個「螺旋圖片切換器」為例，先想好要控哪些參數，一次建齊再逐一綁定：
- manual → 控
Switch (TOP)的 index（切換圖片），命名switch。 - 兩個 float → 控 trail 與 size。
- xyzw（取 2 軸）→ 控 center point（螺旋中心），命名
translate。 - rgba（取 3 色）→ 控 color。
全部用 copy parameter → pass point 綁過來，測一下切換與拖動都有反應就完成。接著把內部節點 viewer 關掉，這顆
Base (COMP) 就是一個乾淨控臺。兩個常見卡點：
- float 綁過來預設是 0，但 0 在某些節點看不出效果。到參數的 default value 設一個初值（例如把 trail 設成 10），再綁定過來。
- slider 只能拉 0～1，若初值超過這個範圍會很難用。到 range 的 min／max 把範圍拉開（例如設 0～20），初值就會落在中間、上下都能調。這一步等於在 slider 內建一個
Math的 rearrange。
⚠️ float 記得設初值與 range。 預設 0 常常「看起來沒作用」，而 slider 死守 0～1；先在 default 設初值、再把 range min／max 拉到夠用的區間，控制才靈活。
六、TD 內建 UI 元件與 Container 整合
自訂參數之外，TD 的
COMP 分類下（panel 那列）還有一整組現成 UI 元件：Button (COMP)、Field (COMP)、Slider (COMP) 最常用。- 要互動得先點開 viewer active，才能按按鈕、拉 slider。數值可以往右拉一個節點觀察變化——
Slider (COMP)是數值（CHOP，預設 0～1）、Field (COMP)存文字（DAT）。 Button (COMP)可切類型： 預設是 toggle（按一下開、再按關）；改成 momentary 就變成「按著才有訊號、放開消失」。
別從零手刻。 除了單純的 button，大多情況直接到左側 Palette → Basic Widget 拉現成元件（slider、x／y、radio、下拉選單，甚至按鈕疊圖／slider 疊變化結果），再基於它微調就好，省去重複建置的時間。
用
Container (COMP) 整合成一個控臺： 把多個 UI 元件整合進一顆 Container (COMP)，正式使用時把容易誤觸的連線藏在後面、只留可控元件。💡 UI 類節點是「上下連」，不是左右連。 一般節點由左（output）連到右（input）；UI 元件則是從下往上連，整合進上方的Container (COMP)。在 Container 裡設align為 children（例如 top to bottom）排列子元件，就能排出乾淨的控制面板。
七、TouchOSC：手機／平板觸控介面
想要更豐富、可觸控的介面，用外部軟體 TouchOSC。行動裝置版要付費，桌面版可直接用（試用限制是開啟時要等 7 秒）。
介面操作重點：
- 左側是帶尺規的編輯區，右側設 width／height（表演場合背景多用黑色，暗場才不顯眼）。
- 按 ＋ 新增元件，編輯模式下只能移動／改大小。
- 想實際操作要點 blade 符號進入控制模式；要切回編輯模式按小圓點，別按 ✕（✕ 會關掉程式）。
Help → Examples有大量現成介面（混音臺、DJ 控臺、drum pad 等）可參考。
TouchOSC 十三種元件：
元件 | 用途 |
box | 純圖形展示（裝飾），可用訊息／腳本控制移動 |
pattern | 圖形＋外框，可設點擊種類（單點／切換） |
label | 單行文字，框為主體、背景可切換 |
text | 多行文字，文字固定在框內 |
fader | 即 slider；可上下或以中心調整，可設 pull back |
xy | 2D 滑桿，一次控 x／y 兩軸 |
radio | 旋鈕，仿實體、轉到底再回，可設中心停留 |
encoder | 無段旋鈕，會記錄旋轉角度 |
radar | 特殊元件，記錄「角度＋距離」兩個值 |
button | 按鈕 |
group | 把多個元件群組成一個群集 |
page | 分頁，在有限空間放更多控制 |
grid | 快速批量生成同類型元件（給數量） |
TouchOSC 走的是 OSC，和先前 W10 用手機控制 TD 是同一套協定；而且它能雙向傳 OSC，所以能做出「介面控 TD、TD 再回傳控介面」的複合操作。
八、TouchOSC 連 TD 與復古小遊戲
TouchOSC 連 TD 一樣走 OSC（區域網路）：
- 同一臺電腦：TouchOSC 端目標填
localhost；用平板則要先查電腦 IP、填進平板。 - TouchOSC 送出 port 設 10000，TD 端建一個
OSC In (CHOP)、接收 port 預設 10000 不用動。 - 進入播放模式後，按 TouchOSC 上的按鈕／slider，TD 的
OSC In (CHOP)就會跑出對應數值與 channel 名稱。
對應功能有兩種做法： 把
OSC In (CHOP) 的 channel rename 成對應名稱，或用 Select (CHOP) 挑出想要的 channel 去替換原本的內建 UI。綁定復古小遊戲（左右轉＋前進＋射擊）： 左右轉用 slider／
fader 控制，但 fader 預設 0～1、中心是 0.5，直接接會一直朝同方向轉。兩個關鍵處理：- 加
Math (CHOP)做 rearrange，把 0～1 映射成 −1～1，中心點才會落在 0（0 = 不轉、−1／1 = 左右轉）。 - 在 fader 設 pull back，放開手就回 0，避免持續旋轉。
⚠️ slider／fader 記得設 pull back 回 0。 沒設回復值的 slider 一離手仍停在原位，用在「左右轉」這類控制會停不下來；設 pull back 讓它一放開就彈回 0，才好操作。
常見問題 FAQ
Q1：keyboard 和 MIDI 到底差在哪？
本質一樣，都是「按鍵觸發」，差別只在傳輸協定不同。keyboard 指電腦／筆電鍵盤，MIDI 是 Launchpad、MIDI keyboard 那類裝置，資訊連結方式不同而已。
本質一樣，都是「按鍵觸發」，差別只在傳輸協定不同。keyboard 指電腦／筆電鍵盤，MIDI 是 Launchpad、MIDI keyboard 那類裝置，資訊連結方式不同而已。
Q2：pass point 和 reference 差在哪？該選哪個？
pass point 是雙向同步、手動拉動也不斷連；reference 是單向，另一端一手動就斷。Customize Component 一律用 pass point，除非確定不需雙向回控才用 reference。
pass point 是雙向同步、手動拉動也不斷連；reference 是單向，另一端一手動就斷。Customize Component 一律用 pass point，除非確定不需雙向回控才用 reference。
Q3：綁定的節點一定要放在
不用，放外面也連得起來。但實務上建議針對
COMP 裡面嗎？不用，放外面也連得起來。但實務上建議針對
COMP 內部節點綁定，物件化、好維護。Q4：uvw、xyzw、float 有什麼差？
實際用起來幾乎沒差，都是以小數為主，命名主要是幫你辨別參數用在材質（uvw）、位移（xyzw）還是通用（float）。混用通常不會出錯。
實際用起來幾乎沒差，都是以小數為主，命名主要是幫你辨別參數用在材質（uvw）、位移（xyzw）還是通用（float）。混用通常不會出錯。
Q5：float 綁過來看不出效果、slider 只能拉 0～1 怎麼辦？
到參數的 default value 設一個初值（例如 10），再到 range 的 min／max 把範圍拉開（例如 0～20）。這等於在 slider 內建一個
到參數的 default value 設一個初值（例如 10），再到 range 的 min／max 把範圍拉開（例如 0～20）。這等於在 slider 內建一個
Math rearrange，控制會靈活很多。Q6：TouchOSC 的 slider 為什麼轉不停？怎麼接 TD？
連線走 OSC：同機填
連線走 OSC：同機填
localhost、平板填電腦 IP，port 用 10000，TD 端接 OSC In (CHOP)。左右轉停不下來是因為 fader 沒設 pull back（放開回 0），另外中心要用 Math (CHOP) 把 0～1 rearrange 成 −1～1。課後練習
- 自訂一顆控臺 COMP。 用
Base (COMP)的 Customize Component 新增 page，綁 manual（控Switch (TOP)index）、float（trail／size）、xyzw（center）、rgba（color），全部用 copy parameter → pass point。記得幫 float 設 default 與 range。 - 內建 UI 整合。 從 Palette 的 Basic Widget 拉 button 與 slider，用
Container (COMP)（上下連、align children）整合成一個乾淨面板，開 viewer active 測試數值連動。 - TouchOSC 連線。 在 TouchOSC 建 fader＋button，桌面同機用
localhost、port 10000 送給 TD 的OSC In (CHOP)，用 rename 或Select (CHOP)對應 channel。 - 復古小遊戲（本週挑戰）。 把 TouchOSC 的訊號綁上小遊戲：左右轉的 fader 設 pull back 回 0，並用
Math (CHOP)把 0～1 rearrange 成 −1～1，讓中心為 0。
影片章節
時間 | 內容 |
三種常用控制方式：keyboard／MIDI、滑鼠、觸控 UI | |
滑鼠分割 parameter view 的缺點 | |
Customize Component 是什麼 | |
優先用 Base (COMP)：最乾淨的容器 | |
右鍵 → 新增 page 與 parameter | |
copy parameter → pass point 綁定 | |
pass point vs reference：雙向 vs 單向 | |
自訂參數類型總覽 | |
sequence：一組可複製的參數陣列 | |
實作自訂 custom COMP | |
float 設 default 與 range（等於內建 Math rearrange） | |
TD 內建 UI 元件：要 viewer active 才能互動 | |
Button (COMP)：momentary／toggle 切換 | |
Palette → Basic Widget 拉現成元件 | |
Container (COMP) 整合多 UI（上下連、align children） | |
TouchOSC 介紹（桌面版試用開啟等 7 秒） | |
TouchOSC 介面：blade 控制模式、切回按小圓點 | |
TouchOSC 十三種元件 | |
TouchOSC 連 TD：localhost／IP、port 10000、OSC In (CHOP) | |
綁定復古小遊戲：Math (CHOP) rearrange −1～1 |
⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑
⭑Luxmin Institute (互動研究院) on Patreon
教學講的是觀念，工具則是我們在真實展場裡跑過、改過、確定能用的東西。TD 元件、專案檔、校正與製作流程都陸續發佈在 Patreon 上，免費層可以先看 Demo 與公開工具，付費層取得完整檔案與更新：
→ https://www.patreon.com/cw/LuxminInstitute
教學講的是觀念，工具則是我們在真實展場裡跑過、改過、確定能用的東西。TD 元件、專案檔、校正與製作流程都陸續發佈在 Patreon 上，免費層可以先看 Demo 與公開工具，付費層取得完整檔案與更新：
→ https://www.patreon.com/cw/LuxminInstitute
最新的活動動態與報名資訊：
→ https://www.threads.com/@luxmin.institute
→ https://www.threads.com/@luxmin.institute
TouchDesigner Line 討論群組：
→ https://line.me/ti/g2/5IkAcg_6dF_CbR0oChIRWVoTRWQdSEHEVmcjtw
→ https://line.me/ti/g2/5IkAcg_6dF_CbR0oChIRWVoTRWQdSEHEVmcjtw
如有相關專案或其他需求，請洽 luxmin.art
相關文章
Bonus:：MadMapper 光雕投影教學：描圖、遮罩與投影機規格判讀｜IVD487 W17
光雕投影（projection mapping）其實不難，難在動畫與腳本。這篇把 IVD487 第 17 週的 MadMapper 光雕工作坊整理成重點複習：從常用軟硬體、投影機五大規格判讀（ANSI 流明、支援 vs 實際解析度、投射比、光源、DLP vs 3LCD），到 MadMapper 平面描圖、Multiply 窗景、Mask／Invert Mask 與立體逐面 mapping。附投影機規格表與章節時間戳，上完課回來掃一遍就能接回來。
TouchDesigner 互動狀態機：Timer／Logic 串起轉場、碰撞與幸運轉輪防呆｜IVD487 W13
想用 TouchDesigner 串起一套完整的互動流程？這篇整理用 Logic (CHOP) 與 Timer (CHOP) 打造互動狀態機的做法：鍵盤切換影像加轉場、2D 碰撞判定、閒置自動回預設、Trigger (CHOP) 幸運轉輪防呆。附節點速查表、Switch vs Cross 對照與章節時間戳，上完課回來掃一遍就能接回流程。