角度可视化

atan(y, x) 能算出一个点相对于原点的方向角，把它归一化后就能驱动颜色，关键代码是：

下面拆解这两步的含义。

---

atan 返回什么

atan(y, x) 是极坐标里的角度函数，它返回从正 x 轴（右侧）出发，逆时针到向量 (x, y) 的角度，单位是弧度：

• 正右方（3点钟）→ 0
• 正上方（12点钟）→ +π/2（约 1.57）
• 正左方（9点钟）→ +π 或 -π（边界）
• 正下方（6点钟）→ -π/2（约 -1.57）

范围是 [-π, +π]，中间有个跳变（从 +π 跳到 -π）。

---

归一化到 [0, 1]

加上 π 把范围从 [-π, π] 变成 [0, 2π]，再除以 2π 压缩到 [0, 1]。这样整个圆圈：

• 正右方（3点钟）→ t = 0.5
• 逆时针转一圈 → t 从 0 平滑增加到 1

用这个 t 做灰度输出，就能看到一个围绕中心旋转的灰度角度轮。

---

试着改一改

改动	效果
用 t 代替灰度，改成 mix(vec3(1,0,0), vec3(0,0,1), t)	从红色到蓝色的色相环
把 p = uv - 0.5 里的 0.5 改为 0.3	圆心偏移，角度轮跟着移动
把 t 乘以 3.0 再取小数 fract(t * 3.0)	角度分成 3 段重复
加上 u_time * 0.3 让角度随时间旋转	画面不断旋转

---

练习

练习代码中坐标已经居中到 p，但 a 和 t 都还没计算。补全这两行，让画面输出一个从 0 到 1 的灰度角度轮。

答案解析

起始代码里 t 未定义或为 0，画面全黑。

atan(p.y, p.x) 计算每个像素相对于画布中心的方位角，范围 [-π, π]。加 π 后变成 [0, 2π]，除以 2π 得到 [0, 1]。每个像素的 t 值就是它在圆上的相对位置，所以灰度图像呈现出一个绕中心平滑变化的角度轮盘。

试着把 gl_FragColor = vec4(vec3(t), 1.0) 换成 vec4(t, 1.0-t, 0.5, 1.0)，看看彩色角度轮的效果。