二维旋转矩阵

旋转坐标系只需要一个 mat2，然后乘上坐标点：

下面拆解它。

---

什么是旋转矩阵

旋转一个点，本质是对它的 x 和 y 分量做混合计算。公式是：

把这四个系数排成 2×2 矩阵，就是 mat2(c, -s, s, c)。左乘坐标向量，一步完成旋转。

角度 a 用弧度表示，a = u_time * 0.8 让旋转速度随时间推进，乘以 0.8 只是让它慢一些。

---

为什么要先减 0.5

mat2 旋转是以原点（0, 0）为中心旋转的。vUv 的范围是 0–1，原点在左下角，直接旋转会绕左下角转圈。

所以先 p = vUv - 0.5，把中心移到 (0, 0)，再旋转，旋完之后不需要加回去——后续的 abs 和 smoothstep 只关心相对位置。

---

正方形怎么画的

旋转后用 max(abs(p.x), abs(p.y)) 计算"Chebyshev 距离"，它给出的是一个以原点为中心的正方形：

• 离中心的距离 < 0.22 → box 遮罩为 1（绿色前景）
• 超过 0.23 → box 遮罩为 0（深色背景）

smoothstep(0.22, 0.23, d) 在两个值之间做极窄的柔化，边缘只有 1 像素宽，几乎像硬边，但不会有锯齿。

---

试着改一改

改动	效果
把 0.8 改成 2.0	旋转加速
把 0.22 和 0.23 改成 0.15 和 0.16	正方形变小
把 max(abs(p.x), abs(p.y)) 改成 length(p)	正方形变成圆形
把 u_time * 0.8 改成固定值 1.0	停止旋转，固定倾斜 45°

---

练习

在 p = vUv - 0.5 之后，用 rot(u_time * 0.8) 旋转坐标 p。

答案解析

rot(u_time * 0.8) 返回一个随时间变化的旋转矩阵，左乘 p 将坐标绕原点旋转。练习的起始状态缺少这一行，所以正方形是静止的（或者方向固定）。加上这行后正方形就开始旋转。

rot 函数已经定义好了，你只需要调用它并把结果赋回给 p。

试着把角度改成 u_time * 0.8 + 3.14159 * 0.25，让正方形以倾斜 45° 的初始姿态开始旋转。