第 13 课：Sine Wave

实现

uniform vec2 iResolution;
uniform float iTime;

float grid(float size) {
  vec2 center = iResolution.xy * 0.5;
  vec2 dist = abs(center - gl_FragCoord.xy);
  vec2 posInCell = fract(dist / size);

  float stroke = 1.0 / size;
  float t = step(stroke, posInCell.x);
  t *= 1.0 - step(1.0 - stroke, posInCell.x);
  t *= step(stroke, posInCell.y);
  t *= 1.0 - step(1.0 - stroke, posInCell.y);

  return 1.0 - t;
}

float sinPlot(float x) {
  float _x = (iResolution.x * 0.5 - x) / 20.0;
  float _y =sin(_x) * 0.05 * iResolution.y;
  return _y;
}

float fbm(float x) {
  float A = 5.0;
  float f = 2.0;
  float v = -100.0;
  return A*sinPlot(f*x + v*iTime);
}

void main() {
  vec2 uv = gl_FragCoord.xy / iResolution.xy;

  float smallGrid = grid(20.0);
  float bigGrid = grid(80.0);

  vec3 color = vec3(1.0);
  color = mix(color, vec3(0.9, 0.9, 0.9), smallGrid);
  color = mix(color, vec3(0.75, 0.75, 0.75), bigGrid);
  color = mix(vec3(0.0, 0.0, 0.0), color, step(1.0 / iResolution.x, abs(uv.x - 0.5)));
  color = mix(vec3(0.0, 0.0, 0.0), color, step(1.0 / iResolution.y, abs(uv.y - 0.5)));

  float y =  iResolution.y * 0.5 - fbm(gl_FragCoord.x);
  float dx = dFdx(y);

  float stroke = 3.0;
  float t = smoothstep(0.0, stroke * max(1.0, abs(dx)), abs(gl_FragCoord.y - y));
  color = mix(vec3(1.0, 0.0, 0.0), color, t);

  gl_FragColor = vec4(color, 1.0);
}