const canvas = document.createElement("canvas")
const gl = canvas.getContext("webgl2")

document.body.innerHTML = ""
document.body.appendChild(canvas)
document.body.style = "margin:0;touch-action:none;overflow:hidden"
canvas.style.width = "100%"
canvas.style.height = "auto"
canvas.style.userSelect = "none"

const dpr = window.devicePixelRatio

function resize() {
  const {
    innerWidth: width,
    innerHeight: height
  } = window

  canvas.width = width * dpr
  canvas.height = height * dpr

  gl.viewport(0, 0, width * dpr, height * dpr)
}

window.onresize = resize

const vertexSource = `#version 300 es
  #ifdef GL_FRAGMENT_PRECISION_HIGH
  precision highp float;
  #else
  precision mediump float;
  #endif

  in vec4 position;

  void main(void) {
    gl_Position = position;
  }
`

const fragmentSource = `#version 300 es
  /*********
   * made by Matthias Hurrle (@atzedent) 
   */
  #ifdef GL_FRAGMENT_PRECISION_HIGH
  precision highp float;
  #else
  precision mediump float;
  #endif

  out vec4 fragColor;

  uniform vec2 resolution;
  uniform float time;
  uniform vec2 touch;
  uniform int pointerCount;
  
  #define mouse (touch/resolution)
  #define P pointerCount
  #define T time
  #define S smoothstep

  mat2 rot(float a) {
    float c = cos(a), s = sin(a);
    return mat2(c, -s, s, c);
  }

  float smin(float a, float b, float k) {
      float h = clamp(
          .5+.5*(b-a)/k,
          .0,
          1.
      );

      return mix(b,a,h)-k*h*(1.-h);
  }

  float sabs(float a, float s) {
      return sqrt(a*a+s);
  }


  float disc(vec3 p, vec2 s, float r) {
      vec2 e = vec2(
        length(abs(p.xz)),
        abs(p.y)
      ) - s;

      return length(max(e, .0)) +
          min(.0, max(e.x, e.y)) - r;
  }

  float map(vec3 p) {
      p.x -= 3.*T;
      p.y += exp(1.+sin(p.x+T*5.2)*.1)*1.4;
      p.y -= sin(p.x*.8)*.8;
      p.y -= cos(.5*p.z)*.4;
      p.x = sabs(p.z, 1.);

      float d = disc(p, vec2(10, .25), .0);

      return smin(d, -(length(p)-1.5), -.5);
  }

  void cam(inout vec3 p) {
      if (P > 0) {
        p.yz *= rot(-mouse.y*.78+.39);
        p.xz *= rot(.39-mouse.x*.39);
      } else {
        p.yz *= rot(.35);
        p.xz *= rot(.5);
      }
  }

  void main(void) {
      vec2 uv = (
          gl_FragCoord.xy -.5 * resolution
      ) / min(resolution.x, resolution.y);

      
      vec3 col = vec3(0),
      ro = vec3(0,0,-30),
      rd = normalize(vec3(uv, 1));

      cam(ro);
      cam(rd);

      vec3 p = ro;

      const float steps = 400., maxd = 400.;

      for (float i = .0; i<steps; i++) {
          float d = map(p)*.5;

          if (d < 1e-2) {
              col += (steps-i)/steps;
              break;
          }

          if (d > maxd) {
              col += 1.-vec3(.05,.95,1);
              break;
          }

          p += rd*d;
      }

      fragColor = vec4(col, 1);
  }
`

function compile(shader, source) {
  gl.shaderSource(shader, source)
  gl.compileShader(shader)

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error(gl.getShaderInfoLog(shader))
  }
}

let program

function setup() {
  const vs = gl.createShader(gl.VERTEX_SHADER)
  const fs = gl.createShader(gl.FRAGMENT_SHADER)

  compile(vs, vertexSource)
  compile(fs, fragmentSource)

  program = gl.createProgram()

  gl.attachShader(program, vs)
  gl.attachShader(program, fs)
  gl.linkProgram(program)

  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error(gl.getProgramInfoLog(program))
  }
}

let vertices, buffer;

function init() {
  vertices = [
    -1,-1, 1,
    -1,-1, 1,
    -1, 1, 1,
    -1, 1, 1
  ]
  buffer = gl.createBuffer()
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)

  const position = gl.getAttribLocation(program, "position")

  gl.enableVertexAttribArray(position)
  gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0)

  program.resolution = gl.getUniformLocation(program, "resolution")
  program.time = gl.getUniformLocation(program, "time")
    program.touch = gl.getUniformLocation(program, "touch")
    program.pointerCount = gl.getUniformLocation(program, "pointerCount")
}

const mouse = {
  x: 0,
  y: 0,
  touches: new Set(),
  update: function(x, y, pointerId) {
    this.x = x * dpr
    this.y = (innerHeight - y) * dpr
    this.touches.add(pointerId)
  },
  remove: function(pointerId) { this.touches.delete(pointerId) }
}

function loop(now) {
  gl.clearColor(0, 0, 0, 1)
  gl.clear(gl.COLOR_BUFFER_BIT)
  gl.useProgram(program)
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
  gl.uniform2f(program.resolution, canvas.width, canvas.height)
  gl.uniform1f(program.time, now * 1e-3)
  gl.uniform2f(program.touch, mouse.x, mouse.y)
  gl.uniform1i(program.pointerCount, mouse.touches.size)
  gl.drawArrays(gl.TRIANGLES, 0, vertices.length * .5)
  requestAnimationFrame(loop)
}

setup()
init()
resize()
loop(0)

window.addEventListener("pointerdown", e => mouse.update(e.clientX, e.clientY, e.pointerId))
window.addEventListener("pointerup", e => mouse.remove(e.pointerId))
window.addEventListener("pointermove", e => {
  if (mouse.touches.has(e.pointerId))
    mouse.update(e.clientX, e.clientY, e.pointerId)
})