🌀 TouchDesigner 技术解析：What’s the Angle？用 Ramp 生成角度的艺术

作者：阿南
教程来源：Paka12 – What’s the Angle in TouchDesigner
关键词：Ramp、Angle、Instancing、GPU计算、交互视觉

---

🎯 导语：从“点阵”到“角度场”

在 TouchDesigner 中，很多效果都需要计算角度（Angle）或方向（Direction）——
比如粒子指向鼠标、向量场、或者线条的旋转方向。

通常我们会用 Math CHOP 或 Python 脚本 计算这些角度，但这会增加 CPU 负担。
而 Paka12 在他的《What’s the Angle?》教程中，用纯 TOP 节点（即 GPU 纹理逻辑）就实现了这一切。

本文带你完整拆解这套逻辑，帮你理解如何仅用 Ramp TOP + Instancing，
实现鼠标交互的角度控制与线条绘制。

---

🧩 一、项目目标

“让每一个点都朝向鼠标绘制线条。”

我们将：

• 生成一个点阵（Spread）

• 获取鼠标位置

• 为每个点计算指向鼠标的角度

• 绘制线条并控制长度

• 加入阈值与颜色，使画面更具表现力

---

🪜 二、完整节点结构

以下是项目核心节点结构（你可以用 Network Editor 复现）：

---

⚙️ 三、详细步骤解析

1️⃣ 生成点阵（Spread）

📸 截图建议：
显示最终点阵的效果（白色点散布在黑色背景上）。

---

2️⃣ 捕捉鼠标位置（Mouse Position）

• 使用 Panel CHOP

• 输出参数：Inside U、Inside V

• 重命名：mx, my

• 通过 Fit TOP 映射到与点阵相同的分辨率

• 命名为 position

📸 截图建议：显示鼠标坐标实时变化（CHOP Monitor）

---

3️⃣ 实例化线条（Instancing Lines）

创建：

在 Geo 的 Instancing 页中：

• tx, ty → 来自点阵（spread）

• Rotate Z → 来自角度贴图（rotation）

• Scale X → 来自长度贴图（length）

📸 截图建议：显示一堆线从鼠标发射出去。

---

4️⃣ 利用 Ramp 计算角度（Angle）

调整中心点：

📸 截图建议：展示 Ramp 中心随鼠标移动的视觉效果。

---

5️⃣ 用 Circular Ramp 控制距离与长度

• 添加第二个 Ramp TOP

• Type: Circular

• 通过 Multiply 控制半径缩放（例如 2 → 半径 0.5）

将结果用作 Instancing 的 Scale X 或遮罩。
若只想显示某一范围的线，可加入：

---

6️⃣ 为线条添加随机颜色

• 添加 Noise TOP (RGB)

  • Resolution 与 Spread 一致

  • Format: 32-bit RGB

• 输出到 Cd 通道（R, G, B）

• 在 Constant Material 中关闭 Base Color，启用 Vertex Color。

📸 截图建议：显示彩色线条放射效果。

---

7️⃣ 渲染与视觉优化

---

💡 四、关键原理：用 Ramp 代替数学函数

这种方式让所有计算都在 GPU 上完成，避免 CPU 运算瓶颈。
因此你可以轻松处理 成千上万个点 的实时视觉。

---

🌈 五、进阶延伸

可以将这套系统应用于：

• 粒子朝向（粒子群自动面向目标）

• 声音驱动的方向场

• Shader 交互（例如 Flow Field 特效）

• 摄像头目标追踪发射线

甚至可以把 Ramp 输出输入 Shader GLSL，实现更复杂的流体方向控制。

---

🪞 六、总结与灵感

这种“用视觉图像代替逻辑计算”的思想非常 TouchDesigner——
让数学变成视觉，让算法变成画面。