环绕小点
9 / 14
让一个小点围绕中心做圆周运动。
一个亮蓝色的小圆点沿着圆形轨道转圈。让它的位置动起来就靠这一行：
下面拆解每个部分。
cos 和 sin 如何描述圆周运动
cos(angle) 和 sin(angle) 分别是单位圆上某个角度点的 x 和 y 坐标。
当 angle 从 0 增大到 2π 时，点就完整绕圆一圈。
cos(0) = 1, sin(0) = 0→ 右侧cos(π/2) = 0, sin(π/2) = 1→ 顶部cos(π) = -1, sin(π) = 0→ 左侧
把 u_time 作为角度传入，点的位置随时间绕圆运动。
乘以 r 控制轨道半径
vec2(cos(u_time), sin(u_time)) 生成的是半径为 1 的圆上的点（坐标绝对值最大为 1）。
乘以 r = 0.25 后，轨道半径缩小为画面宽度的 25%。再加上 center = vec2(0.5) 偏移到画面中心，圆点就在画面中央附近绕圈。
如何绘制圆点
distance(vUv, pos) 计算当前像素到圆点中心的距离。
smoothstep(0.02, 0.025, d) 在距离 0.02 到 0.025 之间生成软边缘，1.0 - 让圆内为亮，圆外为暗。
试着改一改
| 改动 | 效果 |
|---|---|
r = 0.1 | 轨道变小，圆点在中心附近转 |
r = 0.4 | 轨道变大，几乎到画面边缘 |
cos(u_time * 2.0), sin(u_time * 2.0) | 转速加倍 |
cos(u_time), sin(u_time * 2.0) | 轨道变成椭圆 |
练习
练习区的圆点固定在画面中心，把 vec2 pos = center 改成用 cos 和 sin 计算出来的轨道位置，让圆点绕圈转动。
答案解析
vec2(cos(u_time), sin(u_time))随时间描绘一个单位圆* r缩放半径到 0.25+ center把圆心定位到画面中央
起始代码里 pos = center，圆点始终在正中心。加入圆周运动的计算后，pos 随时间在轨道上移动，圆点就转起来了。
试着把 r = 0.25 改成 0.35，轨道扩大后圆点会接近画面边缘运动。