正弦波动画
9 / 18
学习使用sin函数创建波形效果，理解频率、振幅和相位的概念。
sin() 函数的输出在 −1 到 +1 之间来回震荡。用 u_time 推动相位，每一帧这条波都会向左移动：
sin() 的值范围问题
sin() 输出 −1 到 +1，但 UV 坐标在 0 到 1 之间。直接用 sin() 的值做 y 坐标会产生负数，落在画布外面。标准的修正方式是「缩放并平移」：
* 0.5：把 ±1 压缩到 ±0.5+ 0.5：向上平移，把范围从 [−0.5, +0.5] 变成 [0, 1]
结果始终在 0–1 之间，可以安全地用作 y 坐标或混合比例。
如何把波形变成一条可见的线
知道波形上每一列的 y 值之后，计算当前像素与这个 y 的距离，再用 smoothstep 把距离转化为亮度遮罩：
abs(uv.y - normalizedWave) 是像素到波形的距离，smoothstep(0.0, 0.1, d) 在距离 0–0.1 内从 0 过渡到 1，取反后近处为 1（亮），远处为 0（暗）。
颜色随时间变化
colorMix 也是一个归一化的 sin 值——它在 0 到 1 之间振荡，让波的颜色在橙色和蓝色之间交替变化。
试着改一改
| 改动 | 效果 |
|---|---|
10.0 改为 5.0 | 频率减半，波浪变稀疏 |
0.1（smoothstep 宽度）改为 0.02 | 线条变细 |
colorMix = sin(u_time) * 0.5 + 0.5 改为 colorMix = uv.x | 颜色按位置从橙到蓝，不再随时间变化 |
u_time 改为 u_time * 3.0 | 波浪流动加速，颜色切换也加速 |
练习
把 float colorMix = sin(u_time) * 0.5 + 0.5; 改为 float colorMix = uv.x;，让波的颜色按水平位置渐变，而不是随时间变化。
答案解析
原始状态：sin(u_time) * 0.5 + 0.5 让颜色在整条波上统一地随时间在橙色和蓝色之间切换。
改动后：uv.x 直接用水平坐标作为混合比例，画布左边偏橙（colorMix 接近 0），右边偏蓝（colorMix 接近 1）。波的颜色从此不再随时间变化，而是沿水平方向产生空间渐变。
这个改动展示了一个核心思路：任何 0–1 范围的值都可以作为 mix 的第三个参数，驱动颜色变化。