TouchDesigner 2D 碰撞偵測教學：高效圖像乘法法打造多目標互動系統
本篇教學介紹如何運用 Multiply (TOP) 與 Analyze (TOP)，打造高效、無人數限制的 2D 碰撞偵測系統。適用於 LiDAR 投影互動、牆面/地板觸碰感測、手電筒追蹤等場景，完整圖像運算流程與進階精準度技巧一次解析。
目錄
我們開課囉！
本月開設課程 TD101 (TouchDesigner 101 - Intro, TD 入門介紹) 以及 IAI-01 (AI 工作坊 - StreamDiffusionTD 入門操作)，歡迎報名參加~
⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑
一、TouchDesigner 是什麼？為何成為互動設計的首選工具之一？
TouchDesigner 是什麼？
TouchDesigner 是由加拿大公司 Derivative 所開發的一款節點式視覺程式設計工具，專門用於即時視覺、互動體驗、舞台設計、投影控制、視覺藝術裝置等應用。它廣泛用於新媒體藝術、VJ、展演科技、沉浸式體驗和感測器互動設計等領域。
它的特色是：
- 即時運算、可視化流程（visual programming）
- 節點式架構（node-based）
- 可整合 MIDI、OSC、DMX、Kinect、LiDAR、NDI、音訊、AI 模型等外部資料流
- 與 Python 緊密整合，可用於邏輯控制與資料處理
Derivative 介紹與歷史背景
Derivative 是一間位於加拿大多倫多的軟體公司，由 Greg Hermanovic 創立。Greg 是早期視覺效果軟體 Houdini 的共同創辦人之一，Houdini 是由 Side Effects Software 開發的 3D 程式式建模與動畫軟體，至今仍在電影與動畫產業佔有一席之地。
Derivative 的成立背景：1990 年代後期，Greg Hermanovic 從 Houdini 的開發中看見了節點式設計的巨大潛力。他希望建立一個更適合即時互動、媒體藝術與舞台演出的工具，而非主要為離線渲染設計。於是創立 Derivative，並在 2000 年左右推出 TouchDesigner 的初代版本。
為何成為互動設計的首選工具之一？
TouchDesigner 能在創意與技術之間取得平衡，是互動設計領域中少見的全方位工具。它以節點式架構為核心，讓使用者能直覺且快速地建構即時互動邏輯，並支援眾多感測器與協議：MIDI、OSC、DMX… 等多種資料輸入與整合。TouchDesigner 能快速實現從視覺生成、空間控制到沉浸式體驗的各種需求。
同時它也提供 Python 編程能力、模組化設計與活躍的社群支援，讓設計師、工程師、藝術家都能用自己的方式進行創作。這使 TouchDesigner 不只是一個軟體工具，更像是一個互動體驗的創作系統。
與其他類似產品比較
工具名稱 | 是否有節點 | 程式語言 | 擅長領域 | 特點關鍵詞 | 難易度 | 商業使用授權 | 備註 |
TouchDesigner | ⭕️ | Python | 互動設計、即時視覺、沉浸式空間、生成式藝術 | 即時處理、多協議整合、模組化、感測器串接強 | ⭐️⭐️ | 商用需購買 | 易學難精，需要花時間去探索各式節點的功能與組合 |
vvvv (gamma) | ⭕️ | VL/C# | 系統整合、感測資料流、建構邏輯 | 物件導向邏輯、低階控制、穩定長時運行 | ⭐️⭐️⭐️ | 免費/商用需授權 | 雖有節點，但節點邏輯接近於 C# 程式邏輯，如沒有程式基礎不易上手 |
Smode.fr | ❌ | - | 現場表演、VJ、影音效果 | 2D/3D 合成強、預覽與輸出同步、實演導向、圖層 | ⭐️⭐️ | 分版本，商用授權收費 | 類似於即時領域的 After Effect |
Processing / p5.js | ❌ | Java / javascript | 生成藝術、視覺實驗 | 極簡程式介面、開源、學習入門佳 | ⭐️ | 完全免費（開源） | 完全基於程式，是 Library |
Notch | ⭕️ | - | 視覺特效、演出、XR、LED 牆 | GPU 即時渲染強、適合大型演出、與 Disguise 整合佳 | ⭐️⭐️ | 年費/商用高價授權 | 高階的即時特效軟體，效能超級強大輕易就可以做出很厲害的視覺，但是價格也是很厲害 |
Cables.gl | ⭕️ | Javascript | 網頁互動、即時視覺（WebGL） | 雲端執行、輕量快速、原生 WebGL | ⭐️⭐️ | 免費 | 基於網頁的互動軟體，算是滿新的一個選擇，接近於網頁版的 TouchDesigner 了 |
Max / MSP / Jitter | ⭕️ | - | 音訊處理、互動藝術 | 聲音編程領域王者、配合 Ableton Live、MIDI 佳 | ⭐️⭐️⭐️ | 需購買 | Max for Live 與音樂搭配極佳 |
Unreal Engine | ⭕️(Blueprint) | C++ | 沉浸式空間、虛擬製作、建模動畫 | 高擬真 3D 實時渲染、Nanite/Lumen、XR 支援 | ⭐️⭐️⭐️⭐️⭐️ | 免費但商業抽成（依收入而定） | 整體來說無可挑剔，畫面效果、物理模擬、互動支援都很好，唯一需要注意是學習與開發難度開，開發時常通常也是最長的 |
Unity | ❌ | C# | 遊戲開發、跨平台應用 | 巨大生態系、插件豐富、適合 App 與互動內容 | ⭐️⭐️⭐️⭐️ | 商用有分層收費 | 相較 Unreal 較為容易上手一些，社群龐大，近年有發生更改收費規則爭議需要注意一下 |
二、TouchDesigner 能做什麼？實際應用案例
實際使用案例
Made with Love: deadmau5 Cube V3 × TouchDesigner
知名電子音樂製作人 deadmau5 長期以來都是 TouchDesigner 的愛用者。他不僅用它來打造現場演出中的視覺效果，甚至將它整合進自己的工作流程中，實現即時音視同步的創作。這篇由 Derivative 發布的專訪深入探討了他如何運用 TouchDesigner 打造獨特的互動視覺體驗，展現了這套軟體在創意領域的無限可能。
Moment Factory × TouchDesigner：掌握改變場域體驗的藝術
多媒體創意公司 Moment Factory 擅長打造沉浸式體驗，而在這篇專訪中，他們分享了如何運用 TouchDesigner 快速原型設計、實現複雜的互動裝置。無論是大型展演還是臨時空間，他們靈活運用 TouchDesigner 的即時處理能力，讓視覺設計與空間互動無縫整合，展現出短暫場域中最具衝擊力的創意表現。
Gran Telescopio Canarias × TouchDesigner：打造天文觀測的數位分身
Control Room 42 打破傳統廣播框架，運用 TouchDesigner 打造一個高度模組化、即時互動的製播環境。透過其靈活的節目控制與視覺整合能力，他們重新定義了現代廣播的製作流程，展現 TouchDesigner 在媒體科技領域的創新潛力。
Gran Telescopio Canarias × TouchDesigner：打造天文觀測的數位分身
在這個專案中，TouchDesigner 被用來為世界最大光學望遠鏡之一——加那利大望遠鏡（GTC）打造數位分身。團隊運用其強大的 3D 可視化與數據串流能力，將複雜的天文資料轉化為直觀的視覺介面，不僅支援研究，也為公眾展示提供了創新方式，突顯 TouchDesigner 在科學與數據視覺化領域的應用潛力。
常見使用場景
1. 互動展覽與藝術裝置
- 感測器互動（IR、Kinect、LiDAR、攝影機追蹤）
- 即時視覺生成與觀眾參與互動
- 光雕投影 / 建築投影 / 互動牆面
- 情緒偵測 / 姿勢辨識 / 手勢控制
2. Live Performance & VJ 視覺表演
- 與 DJ / 樂團即時同步
- 音訊反應式視覺（Audio-Reactive）
- MIDI、OSC 控制整合
- 即時混影、影像處理、Layer Blend
3. 沉浸式空間設計 & 多感官體驗
- 穹頂投影 / 沉浸房間 / 虛擬導覽
- 多面投影同步 / 多螢幕矩陣控制
- 空間聲音對應 + 光影反應
- 搭配 Unreal Engine、Notch、Resolume 等其他軟體使用
4. 即時互動介面與控制系統
- 展場互動 UI / UX 控制面板設計
- 控制燈光（DMX/ArtNet）、機構、雷射
- 建立自訂演出控制器（UI、手機控制、WebSocket）
- OSC、MIDI 等協定整合
5. 資料視覺化 & AI 融合應用
- 使用外部資料（API、Websocket、CSV、SQL）生成互動圖像
- AI 生成圖像（如 Stable Diffusion、StyleGAN）
- 感測資料視覺化（心跳、壓力感測器、IMU、位置資料）
- 與 Python / AI 模型（OpenAI、MediaPipe、HuggingFace）整合
6. 即時影像處理與視覺實驗
- 攝影機影像處理（色彩、變形、合成、Tracking）
- 網路攝影機串流、NDI/Syphon/Spout 整合
- 視覺濾鏡實驗與創意處理流程
- 滿足藝術家、設計師即時視覺實驗需求
7. 教學、實驗與原型開發
- 快速原型開發：從感測器接收、數據處理到畫面輸出
- 搭配 Arduino、ESP32、Raspberry Pi 做物聯網整合
三、TouchDesigner 基礎概念
環境介紹
- 紫色的為核心 Network Editor (節點網路編輯區)，大概 80% 的時間，都會在這裡操作。
- 右側藍色的為 Parameters (參數設定)，每個節點都有不同的參數可以做調整，TD 的節點網路就是由連線與參數設定所構成的。
- 左側綠色的為 Palette (預製功能調色盤)，裡面有許多官方預製好的功能模組，包含光雕、音樂分析、AR VR 功能… 等等都包含其中。
- 下方黃色的為 Timeline (時間軸)，可以設定 FPS 與循環時長。
- 偏上方紅色的為 Panel Bar，可以讓你客製化界面，看是想要分割成自己喜歡的不同功能區
節點基本概念
- 節點的順序是由左至右的，連線的順序影響功能順序，而擺放的位置不會影響
- 不同類型顏色的節點，彼此的線無法互相連接
- 如果想要跨節點類型做資料傳輸，會有一個帶有箭頭的灰色虛線做呈現
六大操作元件類型（Operators）分類簡介
TouchDesigner 的操作元件（Operators）依照功能大致可分為以下六大類：
1. TOP（Texture Operator）– 處理影像與視覺效果
TOP 主要處理 2D 影像資料，例如影片播放、影像合成、濾鏡特效與圖像輸出。常見用途包括即時影像處理、視覺特效生成、攝影機輸入處理等。
✅ 輸出為影像（texture）格式，適合做畫面合成與顯示。
2. CHOP（Channel Operator）– 控制數據與音訊處理
CHOP 用來處理隨時間變化的數值資料，如音訊、控制器數據（如 MIDI、OSC）、LFO 等。它是實現互動與動態控制的關鍵元件。
✅ 可控制其他 OP 參數，也常用於動畫與同步控制。
3. SOP（Surface Operator）– 建立與操作 3D 幾何
SOP 用來建立與編輯 3D 幾何結構，包括點、線、面等。這是建立立體模型、動畫路徑、粒子系統等的基礎。
✅ 適用於建立自訂的 3D 造型與結構。
4. DAT（Data Operator）– 處理文字與表格資料
DAT 處理文字、表格與邏輯資料，如 JSON、CSV、Python Script 等。常用於參數控制、資料交換、程式邏輯等用途。
✅ 可以整合資料庫、網路 API、甚至用作 Script 控制介面。
5. MAT（Material Operator）– 材質與著色器設定
MAT 用來為 SOP 幾何套用材質或 GLSL 著色器。從基本的 Phong 材質到自訂 Shader，MAT 提供 3D 呈現的視覺風格。
✅ 搭配 SOP 與光源使用，呈現更具層次的 3D 畫面。
6. COMP（Component Operator）– 組織與封裝操作元件
COMP 是 TouchDesigner 的封裝與互動模組單位，可以將多個 OP 打包成一個功能模組，如 UI 介面、控制面板、3D 視角等。
✅ 支援繼承與自訂邏輯，是建構大型專案與模組化的核心。
操作元件的互動方式
TouchDesigner 的各種 Operators 彼此之間可透過連接線（wires）互相傳遞資料，使用者可根據專案需求將 TOP、CHOP、SOP 等混合運用。例如，使用 CHOP 控制 SOP 幾何的變形，或用 DAT 匯入外部資料驅動 TOP 中的影像效果。
這種模組化、即時反饋的操作方式，讓創作者能夠快速實驗與調整，實現高自由度的互動內容開發。
四、推薦學習資源 & 練功管道
目前 TouchDesigner 的社群與資源仍以國外（特別是加拿大與德國）為主要重心，因此大多數教學、討論與文件仍以英文為主。對於中文使用者而言，這可能成為初期學習的一道門檻。
中文課程與社群
在這裡也和大家分享我們 —— Luxmin Institute 致力於在中文圈推廣互動設計與科技藝術的相關知識，TouchDesigner 是其中的重要一環。
每月定期課程
我們目前每月定期開設「TouchDesigner 100 系列基礎課程」，並延伸到：生成式 AI 應用、感測器與電子電路整合、互動裝置設計等主題。
Discord 社群
只要參加過任一堂課程，即可加入我們的 Discord 社群。你可以在裡面：發問技術問題、與其他學員交流創作經驗、參加社群限定活動與工作坊。
目前我們採取「非公開申請制」，目的是培養一個 願意交流、共同成長 的小型社群，而不只是提供一個資料倉庫。這樣能讓學習氛圍更緊密、有溫度。
完整線上系列課程推薦
以下為完整的系列課程，由淺入深的架構式教學，可以讓人輕易了解 TD 的相關資訊
- TouchDesigner for Video Artists by Philosophical Tools：以影像藝術家為主的系列課程
- TouchDesigner Curriculum：TD 官方的教案
- Matthew Ragan - AME 394 | Compositional and Computational Principles for Media Arts：TD 圈最資深且專業的老師之一，在大學開設的入門課程
- Matthew Ragan - THP 494 & 598 | Generative Media for Live Performance：TD 圈最資深且專業的老師之一，在大學開設的中階課程
- Matthew Ragan - Python in TouchDesigner：Matthew Ragan 老師開設的 Python 進階課程，有系統的講授所有在 TD 中使用的 Python 用法
案例課程推薦
這些會是多為案例導向影片，帶著你做出某些功能或是視覺效果
其他相關資源
TD 社群蓬勃，官方以及非官方都有許多相關資源可以不斷的精進
- allTD：一個收錄很多教學影片連結，並且做好分類的優良網站
- Forum derivative：官方論壇，時不時會有發布新技術或是問題，社群與官方也會協助解答
- Tutorials derivative：官方的發文區，主要由社群成員發布相關的教學內容
五、TouchDesigner 的學習心法與進階方向
TouchDesigner 是一套功能強大、結構靈活的節點式程式設計工具。由於自由度極高，每位使用者在操作上都會發展出自己獨特的習慣與工作方式。因此，不必急於求成，依照自己的步調穩定前進，就是最好的學習方式。
那如果你問：「有沒有什麼方法可以更快上手、加速成長？」這裡整理出 3 個實用的學習方向，幫助你更有效率地掌握 TouchDesigner 的核心概念與應用思維：
1. 善用 Operator Snippets：快速理解節點功能與應用方式
TouchDesigner 內建的 Operator Snippets 是學習各種操作元件（Operators）最實用的資源之一。這個官方提供的範例庫，整理了大量節點的實作範例，展示每個節點的基本用途、常見連接方式，以及延伸應用。
透過點開每個節點對應的 Snippet，不只能看到其輸入與輸出結果，還能即時調整參數、觀察變化，非常適合快速上手或解決特定技術問題。
2. 多看案例、多操作、多學習：累積實戰經驗與邏輯思維
只要在 YouTube 搜尋 TouchDesigner Tutorial，你就能找到來自全球創作者的豐富教學影片。這些教學不僅展示創作成果，更無私地一步步引導你重現整個過程，是學習 TouchDesigner 最直接有效的方式之一。
透過不斷實作、觀察不同創作者的工作邏輯，你會發現背後的思維差異：有些偏工程導向、強調流程與效率，有些則來自藝術視角，更著重視覺表現與直覺操作。這樣的多元學習過程，能幫助你逐步建立屬於自己的創作系統與技術風格。
3. 一定要學會 Python：解鎖 TouchDesigner 的進階潛力
Python 是 TouchDesigner 的核心能力之一，能讓你跳脫節點連接的限制，實現更靈活、更高階的控制邏輯。在 TD 環境中內建了大量專用的 Python 類別與函式，能直接存取節點、參數、操作資料與事件。
當你熟悉 Python，就能進一步：
- 自動化流程與邏輯判斷
- 操作資料結構（如表格、JSON、API）
- 建立更有彈性的互動與控制介面
學會 Python，等於打開了 TouchDesigner 的另一扇門，讓創作不再受限於視覺流程，進入更自由與可擴展的開發領域。
開始你的互動創作之路吧！
⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑
Luxmin Institute 互動研究院 策劃了一系列關於互動體驗技術、科技藝術與多媒體整合為核心的主題課程、工作坊、社群、聚會，以及 TXRX 互動體驗大會
關注我們最新的活動動態與報名資訊：https://www.threads.com/@luxmin.institute
相關文章
TouchDesigner 發送 SMPTE 時間碼至 Resolume Arena：完整教學與設定指南
深入解析如何在 TouchDesigner 中透過 LTC Out CHOP 產生 SMPTE 時間碼，並使用虛擬音訊通道（如 iShowU Audio Capture）將其傳送至 Resolume Arena，實現多媒體內容的精準同步控制。
TouchDesigner 節點網路的註解與組織教學：使用 Annotate (COMP)、Network Box 與 Comment
學會在 TouchDesigner 中使用 Annotate (COMP)、Network Box 與 Comment 來組織節點、標註說明與提升節點網路可讀性。這些工具能讓專案架構更清晰，特別適合多人協作與複雜專案管理。