<main>
  <h1>Understanding Waves</h1>
  <shader-doodle>
    void main() {
      float interval = u_resolution.x * 0.04;
      vec2 uv = gl_FragCoord.xy / interval;
    
      // Wave forms
      // gradient moving downwards
      // dot adds 0. to 1. intervals to each uv.x coord
      float phase1 = dot(uv, vec2(0.00, 1.00)) + u_time * 1.338;

      // gradient moving left and down
      float py2t = 0.112 * sin(u_time * 0.378);
      float phase2 = dot(uv, vec2(0.09, py2t)) + u_time * 0.566;

      // Parallel lines moving according to wave forms
      float pt = phase1 + sin(phase2) * 3.0;
      pt = abs(fract(pt) - 0.5) * interval * 0.5;

      // Gradient shift to contract lines
      /*
        Using dot on the uv with a fixed vec2 will return the distance between
        the two vectors. Eg if you drew a line across the middle of the uv grid,
        the each pixel will be given a value of how far it is from that line. This
        gives a gradient across the uv space.
    
        eg dot(uv, vec2(0., 1.)) will give a 45deg gradient
    
        Need to work out where the width comes from
      */
      float linewidth = dot(uv, vec2(0.08, 0.11)) + u_time * 0.5;
      float lw = 2.3 + sin(linewidth) * 1.9; // min + expanded sin
      vec3 col = vec3(clamp(lw - pt, 0., 1.));
            
      gl_FragColor = vec4(col, 1.);
    }
  </shader-doodle>
  <p>View HTML for comments. Based on <a href="https://github.com/keijiro/ShaderSketches/blob/master/Fragment/Waves.glsl">waves.glsl</></p>
</main>