<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>Sierpiński Carpet Ride</title>
  <style>
    html,
    body,
    canvas {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  
  <script id="vertexShader" type="x-shader/x-vertex">
    #version 300 es
    in vec4 vertexPosition;
    void main() { // no-op vertex shader
      gl_Position = vertexPosition;
    }
  </script>
  
  <script id="fragmentShader" type="x-shader/x-fragment">
    #version 300 es
    precision highp float;
  
    uniform vec2 canvasSize;
    uniform float time; // time in seconds
    out vec4 fragColor;
  
    const float QUALITY = 3.; // anti-aliasing amount
  
    vec3 draw(vec2 p, float start, float end, float iterations) {
      float iter = min(20., iterations);
      float len = end - start;
      float x = p.x - start;
      float y = p.y - start;
  
      float thresh = 0.03;
      float pct = 0.;
  
      float i;
      for (i = 0.; i < iter + 1.; i++) {
        len /= 3.;
        float xd = mod(x / len - 1. - 20. * sin(time * 0.11), 6. + 5. * cos(time * 0.5));
        float yd = mod(y / len - 1. - 4. * cos(time * 0.14), 6. + 5. * sin(time * 0.4));
        if (xd < 1. && yd < 1.) {
          pct = (smoothstep(0., thresh, xd) - smoothstep(1. - thresh, 1., xd))
            * (smoothstep(0., thresh, yd) - smoothstep(1. - thresh, 1., yd));
          if (i > iter) {
            pct *= (1. - (i - iter)); // fade in partial iterations
          }
          break;
        }
      }
  
      return mix(vec3(0.1, 0.1, 0.1), vec3(1. - i / iter, 1. - i / (iter + 5.), 1.), pct);
    }
  
    void main() {
      vec3 color = vec3(0,0,0);
      float samples = 0.;
  
      float subpixel = 1./float(QUALITY);
      for (float x=0.; x<1.; x+=subpixel) {
        for (float y=0.; y<1.; y+=subpixel) {
          vec2 fragCoord = gl_FragCoord.xy + vec2(x,y);
          vec2 coord = (2.*fragCoord - canvasSize)/min(canvasSize.x, canvasSize.y);
          float iterations = 1. + QUALITY + canvasSize.x/1000.;
  
          color += draw(coord, -1., 1., iterations);
          samples++;
        }
      }
      fragColor = vec4(color/samples, 1);
    }
  </script>

  <script>
    const gl = canvas.getContext("webgl2");
    if (!gl) {
      document.body.innerHTML = '<h2>Error: WebGL2 is <a href="https://get.webgl.org/webgl2/">not supported by your browser</a></h2>';
      throw "WebGL2 not supported";
    }
  
    function createShader(shaderType, sourceCode) {
      const shader = gl.createShader(shaderType);
      gl.shaderSource(shader, sourceCode);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw gl.getShaderInfoLog(shader);
      return shader;
    }
  
    const program = gl.createProgram();
    gl.attachShader(program, createShader(gl.VERTEX_SHADER, vertexShader.textContent.trim()));
    gl.attachShader(program, createShader(gl.FRAGMENT_SHADER, fragmentShader.textContent.trim()));
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw gl.getProgramInfoLog(program);
    gl.useProgram(program);
  
    const vertices = [[-1, -1], [1, -1], [-1, 1], [1, 1]];
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices.flat()), gl.STATIC_DRAW);
  
    const vertexPosition = gl.getAttribLocation(program, "vertexPosition");
    gl.enableVertexAttribArray(vertexPosition);
    gl.vertexAttribPointer(vertexPosition, 2, gl.FLOAT, false, 0, 0);
  
    const canvasSizeUniform = gl.getUniformLocation(program, 'canvasSize');
    const timeUniform = gl.getUniformLocation(program, 'time');
  
    function draw() {
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      canvas.width = width;
      canvas.height = height;
      gl.viewport(0, 0, width, height);
      gl.uniform2f(canvasSizeUniform, width, height);
  
      gl.uniform1f(timeUniform, performance.now() / 1000);
  
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length);
      requestAnimationFrame(draw);
    }
    draw();
  </script>
</body>
<!--
  © Adam Murray 2021
  https://adammurray.blog/

  Creative Commons License
  Attribution-NonCommercial-ShareAlike 4.0 International
  https://creativecommons.org/licenses/by-nc-sa/4.0/
-->