03 Tiempo, interacción y repetición

sin, cos: cosas que se repiten

La frecuencia fija la densidad; la amplitud, la altura.

Frecuencia2.00

0.28

Amplitud0.30

0.020.45

EjercicioAjustar valores0%

Dibuja esta onda de tres períodos

Se ejecuta una vez por píxelArrastra los números o edita el código

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);
}

Lado JS

sin y cos reciben radianes y devuelven −1…1; multiplica por 0.5 y suma 0.5 para obtener 0…1.

Pruébalo

Pon la frecuencia en 1: exactamente un período
Cambia sin por cos: ¿cuánto se desplaza la onda?