旋转圆环
12 / 14
旋转极角并给圆环着色。
一个从蓝到粉的渐变圆环在不停旋转。让它旋转的关键是在计算角度时加入时间：
下面拆解每个部分。
atan 如何计算角度
atan(y, x) 返回点 (x, y) 相对于原点的角度，范围是 -π 到 π（即 -3.14 到 3.14 弧度）。
这个角度描述了当前像素在圆环上的哪个位置——0 是右侧，π/2 是顶部，π 是左侧，-π/2 是底部。
加上 u_time 让环旋转
a = atan(p.y, p.x) + u_time 让角度随时间增大。
这等于每一帧，颜色分布整体转动了一点，视觉上圆环就在旋转。
把角度映射为颜色
a + π 把范围从 -π～π 移到 0～2π，再除以 2π 换算到 0.0～1.0。
mix 在蓝色和粉色之间插值，t 越大越靠近粉色。
如何只在圆环区域显示颜色
d 是到圆心的距离。abs(d - 0.28) 是到半径 0.28 的"距离"——越接近 0.28，值越小。
smoothstep 让这个距离在 0.02 到 0.026 之间从 0 变到 1，1.0 - 反转后，只有半径约 0.28 的薄圆环处为亮。
试着改一改
| 改动 | 效果 |
|---|---|
+ u_time * 2.0 | 旋转速度加倍 |
- u_time | 反向旋转 |
0.28 改为 0.15 | 圆环变小 |
abs(d - 0.28) 改为 abs(d - 0.28) * 3.0 | 圆环变细 |
练习
练习区的圆环是静止的，在 float a = atan(p.y, p.x) 后面加上 + u_time，让圆环旋转起来。
答案解析
atan(p.y, p.x)计算当前像素在圆上的角度位置+ u_time让角度随时间增大，颜色分布整体旋转
起始代码里 a = atan(p.y, p.x)，没有时间项，颜色分布是固定的。加入 + u_time 后，每帧的角度偏移量增大，环上的颜色随之旋转。
试着把 + u_time 改成 + sin(u_time) * 3.0，圆环会来回摆动而不是持续转圈。