03 时间、交互与重复

sin、cos：周期变化

频率改变疏密，振幅改变高度。

频率2.00

0.28

振幅0.30

0.020.45

习题调参数0%

画出这条三个周期的波

每个像素运行一次拖动数字，或直接改代码

void main() {
  float wave = 0.5 + sin(vUv.x * 6.283185 * 2.000) * 0.300;
  float line = 1.0 - smoothstep(0.005, 0.015, abs(vUv.y - wave));
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), line);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  float wave = 0.5 + sin(vUv.x * 6.283185 * 2.000) * 0.300;
  float line = 1.0 - smoothstep(0.005, 0.015, abs(vUv.y - wave));
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), line);
  gl_FragColor = vec4(color, 1.0);
}

JS 这一侧

sin、cos 接受弧度，输出 −1～1；乘 0.5 再加 0.5 变成 0～1。

试一试

把频率调到 1，正好一个周期
把 sin 改成 cos，波形平移了多少？