03 Time, interaction and repetition

sin, cos: things that repeat

Frequency sets how dense, amplitude how tall.

Frequency2.00

0.28

Amplitude0.30

0.020.45

ExerciseTune values0%

Draw this wave with three periods

Runs once per pixelDrag numbers, or edit the code

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 side

sin and cos take radians and return −1…1; multiply by 0.5 and add 0.5 to get 0…1.

Try it

Set the frequency to 1: exactly one period
Change sin to cos: how far does the wave shift?