<!-- RESOLUTION -->
<shader-doodle>
  <script type="x-shader/x-fragment">
    void main() {
      vec2 st = gl_FragCoord.xy / u_resolution.xy;
      vec3 color = vec3(st.x, st.y, 1.);
      gl_FragColor = vec4(color, 1.);
    }
  </script>
</shader-doodle>
<!-- TIME -->
<shader-doodle>
  <script type="x-shader/x-fragment">
    void main() {
      vec2 st = gl_FragCoord.xy / u_resolution.xy;
      vec3 color = vec3(st.x, st.y, abs(sin(u_time)));
      gl_FragColor = vec4(color, 1.);
    }
  </script>
</shader-doodle>
<!-- MOUSE -->
<shader-doodle>
  <script type="x-shader/x-fragment">
    void main() {
      vec2 p = gl_FragCoord.xy / u_resolution.xx;
      vec2 m = u_mouse / u_resolution.xx;

      vec3 color = vec3(0.);

      color = mix(
        color,
        vec3(1., 0., 0.),
        1. - smoothstep(.03, .035, length(p - m.xy))
      );

      gl_FragColor = vec4(color, 1.);
    }
  </script>
</shader-doodle>
<!-- MOUSEDRAG -->
<shader-doodle>
  <script type="x-shader/x-fragment">
    float distanceToSegment(vec2 a, vec2 b, vec2 p) {
      vec2 pa = p - a;
      vec2 ba = b - a;
      float h = clamp(dot(pa, ba) / dot(ba, ba), 0., 1.);
      return length(pa - ba * h);
    }

    void main(){
      vec2 p = gl_FragCoord.xy / u_resolution.xx;
      vec4 m = u_mousedrag / u_resolution.xxxx;

      vec3 color = vec3(0.);

      // yellow line
      if(m.z > 0.) {
        float d = distanceToSegment(m.xy, m.zw, p);
        color = mix(
          color,
          vec3(1., 1., 0.),
          1. - smoothstep(.004, .008, d));
      }

      // red dot
      color = mix(
        color,
        vec3(1., 0., 0.),
        1. - smoothstep(.03, .035, length(p - m.xy))
      );

      // blue dot
      color = mix(
        color,
        vec3(0., 0., 1.),
        1. - smoothstep(.03, .035, length(p - abs(m.zw)))
      );

      gl_FragColor = vec4(color, 1.);
    }
  </script>
</shader-doodle>
<!-- TEXTURE -->
<shader-doodle>
  <sd-texture src="https://cdn.glitch.com/58ce9b6c-c856-4442-980a-75acac77fb48%2Fpeppers.jpg?v=1583569319608"></sd-texture>
  <script type="x-shader/x-fragment">
    uniform sampler2D u_texture0;

    void main() {
      vec2 st = gl_FragCoord.xy / u_resolution.xy;
      float distortion = sin(st.y * 25. + u_time * 5.) * .005;
      vec4 texture = texture2D(u_texture0, vec2(
        st.x + distortion * u_mouse.x / 100.,
        st.y + distortion * u_mouse.y / 100.
      ));

      gl_FragColor = texture;
    }
  </script>
</shader-doodle>
<!-- VIDEO TEXTURE -->
<shader-doodle>
  <sd-texture src="https://cdn.glitch.com/58ce9b6c-c856-4442-980a-75acac77fb48%2Fballet.mp4?v=1583570209002"></sd-texture>
  <script type="x-shader/x-fragment">
    uniform sampler2D u_texture0;

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

      float distortion = sin(uv.y * 20. + u_time * 5.) * .02;

      float r = texture2D(u_texture0, uv).r;
      
      uv = vec2(uv.x + distortion, uv.y);
      vec2 gb = texture2D(u_texture0, uv).gb;

      gl_FragColor = vec4(r, gb, 1.);
    }
  </script>
</shader-doodle>
<!-- CAMERA TEXTURE -->
<shader-doodle>
  <sd-texture webcam></sd-texture>
  <script type="x-shader/x-fragment">
    uniform sampler2D u_texture0;

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

      // mirror uv for camera
      uv.x = (uv.x - 1.) * -1.;

      float distortion = sin(uv.y * 20. + u_time * 5.) * .02;

      float r = texture2D(u_texture0, uv).r;
      
      uv = vec2(uv.x + distortion, uv.y);
      vec2 gb = texture2D(u_texture0, uv).gb;

      gl_FragColor = vec4(r, gb, 1.);
    }
  </script>
</shader-doodle>
<!-- CANVAS TEXTURE -->
<style>
  #canvas {
    position: absolute;
    opacity: 0;
    height: 1px;
    width: 1px;
  }
</style>
<canvas id="canvas"></canvas>
<shader-doodle>
  <sd-texture src="#canvas"></sd-texture>
  <script type="x-shader/x-fragment">
    uniform sampler2D u_texture0;

    void main() {
      vec2 uv = gl_FragCoord.xy / u_resolution.xy;
      float distortion = sin(uv.y * 50. + u_time * 1.) * .01;
      vec4 texture = texture2D(u_texture0, vec2(
        uv.x + distortion,
        uv.y - u_time * .05
      ));

      gl_FragColor = texture;
    }
  </script>
</shader-doodle>
<script>
  const text = 'L  O  R  E  M     I  P  S  U  M';
  const canvas = document.getElementById("canvas");
  canvas.height = 1024; canvas.width = 1024;
  const ctx = canvas.getContext("2d");
  ctx.font = "Bold " + canvas.width / 12 + "px 'Helvetica'";
  ctx.textAlign = "center";
  ctx.textBaseline = "top";
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#fff';
  ctx.translate(canvas.width / 2, 0);
  for (var i = -1; i < 6; i++) {
    ctx.fillText(text, 0, i * canvas.height / 6);
  }
</script>
<!-- AUDIO TEXTURE -->
<shader-doodle>
  <sd-audio
    src="https://s.halvves.com/majortunage.mp3"
    autoplay
    loop
    crossorigin="anonymous"
  ></sd-audio>
  <script type="x-shader/x-fragment">
     uniform sampler2D u_audio0;

    // audio is a 512x2 texture

    // row 1 is freq data
    float fft(sampler2D audio, float f) {
      return texture2D(audio, vec2(f, .25)).x;
    }

    // row 2 is sound wave
    float wave(sampler2D audio, float t) {
      return texture2D(audio, vec2(t, .75)).x;
    }

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

      float a = fft(u_audio0, uv.x * .65);
      float w = wave(u_audio0, uv.x * .65);

      // spectrum and wave viewer from:
      // https://www.shadertoy.com/view/Xds3Rr
      // convert frequency to colors
      vec3 col = vec3(a, 4. * a * (1. - a), 1. - a) * a;

      // add wave form on top	
      col += 1. - smoothstep(0., .15, abs(w - uv.y) );

      // output final color
      gl_FragColor = vec4(col, 1.);
    }
  </script>
</shader-doodle>
<!-- NODES (EXPERIMENTAL) -->
<shader-doodle>
  <sd-node name="motionblur" prevbuffer>
    <sd-node name="rotate">
      <sd-node name="basic_gl">
        <script type="x-shader/x-fragment">
          void main() {
            vec2 st = gl_FragCoord.xy / u_resolution.xy;
            vec3 color = vec3(st.x, st.y, abs(sin(u_time)));

            gl_FragColor = vec4(color, 1.);
          }
        </script>
      </sd-node>
      <script type="x-shader/x-fragment">
        uniform sampler2D basic_gl;

        const float PI = 3.1415926;

        void main() {
          vec2 st = gl_FragCoord.xy / u_resolution.xy;

          float angle = 2. * PI * (.5 + .5 * cos(u_time));
          float scale = .7 + .4 * cos(u_time);

          mat2 rotation = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
          vec2 p = (st - vec2(.5)) * rotation / scale + vec2(.5);

          gl_FragColor = p.x < 0. || p.x > 1. || p.y < 0. || p.y > 1.
          ? vec4(0., 0., 0., 1.)
          : texture2D(basic_gl, p);
        }
      </script>
    </sd-node>
    <script type="x-shader/x-fragment">
      uniform sampler2D rotate, u_prevbuffer;

      void main () {
        vec2 st = gl_FragCoord.xy / u_resolution.xy;
        gl_FragColor = vec4(mix(
          texture2D(rotate, st),
          texture2D(u_prevbuffer, st),
          .8
        ).rgb, 1.);
      }
    </script>
  </sd-node>
  <script type="x-shader/x-fragment">
    uniform sampler2D motionblur;

    void main() {
      vec2 st = gl_FragCoord.xy / u_resolution.xy;
      gl_FragColor = texture2D(motionblur, st);
    }
  </script>
</shader-doodle>