Touch Designer 直播挑戰 Vol.7｜復刻復古電花鐘（Flash Clock）

課程概覽

本課程為 TouchDesigner 每週挑戰系列的第七次直播，主題是復刻一種在台灣早期與泰國常見的「電花鐘」（又稱煙火鐘、萬化鐘）。這種時鐘利用物理上的「光柵動畫」原理，透過後方旋轉的彩色片與前方固定的光柵產生迷幻的動態視覺效果。

課程大綱 / Agenda

1. 作品分享：點雲掃描（Point Cloud）、高斯潑濺（Gaussian Splatting）、DNA 音樂視覺化與行星演算。
2. 核心原理：光柵動畫與 Moiré pattern（莫列波紋）的應用。
3. 材質製作：利用 Ramp TOP 與 Twirl 濾鏡製作漩渦狀彩色基底。
4. 遮罩合成：製作放射狀黑格柵並進行旋轉疊加。
5. 進階控制：使用 CHOP 邏輯控制旋轉速度與正反轉。
6. 自動化佈局：利用數學公式（Sine/Cosine）自動排列時鐘數字。

核心概念與理論

1. 高斯潑濺 (Gaussian Splatting)

這是一項近年興起的 3D 重建技術。與傳統的點雲（Point Cloud）不同，它不僅記錄點的位置，還記錄了光影、材質與透明度，並以一個個「圓形漸層」拼湊出極其真實的場景。

2. 光柵動畫原理

電花鐘的迷幻感來自於兩層圖案的疊加：

• 底層：扭曲的彩色漸層。
• 頂層（光柵）：固定的黑色放射狀線條。 當底層旋轉時，透過黑色格柵露出的部分會隨角度改變，產生一種圖案在往外擴散或內縮的視覺錯覺。

3. 三角函式排列

在時鐘的數字佈局中，我們利用 與 的座標公式將數字排列成圓形：

• 其中 為 0 到 360 度（ 弧度）的分佈。

步驟教學 (Step‑by‑Step)

第一階段：製作彩色漩渦底圖

1. 建立基底：新增 Ramp TOP，將 Type 改為 Radial（放射狀）。
2. 設定顏色：
3. 將 Interpolate Notches 改為 Step（階梯式不混色）。
4. 在顏色條中加入紅、藍、黃、白、綠等色，並在每種顏色間插入黑色作為間隔。
5. 小撇步：點擊右下角粉紅色箭頭開啟表格，直接輸入位置數值（如 0.1, 0.2...）可確保顏色等距。
6. 週期設定：調整 Period（如 0.25）讓圖案重複出現。
7. 加入扭曲：接上一個 Trial (Twirl) 濾鏡。將中心點設為 0，調整 Twirl 數值產生漩渦弧線。

第二階段：製作放射狀光柵

1. 複製材質：複製剛才的 Ramp TOP，但將彩色的透明度（Alpha）全部降為 0，只留下黑色的線條。
2. 合成疊加：使用 Over TOP 將光柵疊在彩色層之上。

第三階段：動態與速度控制

1. 旋轉公式：在光柵或彩色層的 Rotate 參數輸入 absTime.seconds * 5。
2. 邏輯控制 (CHOP)：
3. 使用 Constant CHOP 設定一個變數 speed。
4. 接上 Speed CHOP 進行數值累加。
5. 接上 Math CHOP 將 0~1 的輸入轉為 -1~1，實現正轉、停頓、反轉的控制。

第四階段：數字自動排列

1. 建立座標：使用 Pattern CHOP 產生 Sine 與 Cosine 兩條通道。
2. 設定點數：將 Length 設為 12（代表 12 個小時）。
3. 文字渲染：新增 Text TOP，開啟 Specification Data 模式。
4. 資料綁定：將 CHOP 的 座標傳遞給文字，數字便會自動繞圓排列，無需手動調整位置。

常見問題 & 解決方案

• 問題：3D 材質疊加時發生閃爍或透明穿透？
• 方案：TD 的透明材質需要設定渲染優先順序（Render Priority）。手動設定每一層的深度，或調整渲染器的 Transparency 模式。
• 問題：旋轉時出現方形邊角穿幫？
• 方案：將旋轉層的 Scale 稍微放大（如 1.2 倍），確保旋轉時圖案能完全覆蓋畫幅。

練習任務

1. 嘗試更換不同的 Ramp 顏色組合（如螢光色系），觀察光柵動畫的視覺感受。
2. 利用 Bloom TOP 為時鐘加入發光效果，模擬真實的 LED 背光感。
3. 嘗試在 3D 空間中將四層材質（底圖、光柵、數字、邊框）分開擺放，並加入兩個 Camera 做視角切換。

總結

今天的課程我們從 2D 的漸層邏輯出發，結合了物理光柵原理，並導入了基本的數學排列公式。電花鐘不僅是一個技術練習，更是將「數位演算」與「傳統美學」結合的極佳案例。