坐标变换

这个教程把旋转、缩放、重复三种变换串联起来，产生动态运动的圆形网格。核心流程是：

下面拆解每一步。

---

第一步：把原点移到中心

uv 的范围是 0–1，左下角是 (0,0)。但旋转和缩放需要以中心为基准，所以先减去 0.5：

现在坐标范围是 -0.5 到 +0.5，中心是 (0, 0)。

---

第二步：旋转矩阵

旋转用一个 2×2 矩阵实现：

这是二维旋转公式。cosA 和 sinA 由旋转角 angle = u_time 决定，所以图案随时间转动。

---

第三步：缩放

把坐标乘以一个系数，图案就放大或缩小：

scale 在 0.5 到 1.5 之间呼吸变化，让网格呈现缩放动画。

---

第四步：用 fract 创造重复

fract(x) 只取小数部分，把 0–1 的坐标无限重复铺开：

乘以 3.0 表示每行每列重复 3 次。在每个重复单元里再减去 0.5 居中，然后用 length 计算距离画圆。

---

试着改一改

改动	效果
把 3.0 改成 6.0	网格密度翻倍
把 u_time 改成 u_time * 3.0	旋转加速
把 smoothstep(0.3, 0.2, dist) 的两个参数对调	圆形变成空心圆环
把 scale 的振幅 0.5 改成 1.0	缩放范围更大，会有更强烈的呼吸感

---

练习

完成旋转矩阵的两行计算，用正确的 cos/sin 公式旋转 centered 坐标。

答案解析

这是标准的 2D 旋转矩阵公式。新的 x 分量 = 原 x × cos - 原 y × sin；新的 y 分量 = 原 x × sin + 原 y × cos。cosA 和 sinA 由 angle = u_time 计算得来，使整个网格随时间旋转。

练习中 rotated 的两行都已给出但标注了 TODO，直接保留这两行即可——它们本身就是正确答案。

试着在旋转后加一行 rotated *= 0.7，看看坐标缩放对最终图案密度的影响。