var canvas = document.body.appendChild(document.createElement("canvas"));
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

var gl = canvas.getContext("webgl2");

var vertexSource = `#version 300 es

in vec2 position;
in vec2 uv;

out vec2 vUV;

void main() {
  vUV = uv;
  gl_Position = vec4(position, 0, 1);
}
`;
var fragmentSource = `#version 300 es
precision highp float;

#define PI 3.141592

in vec2 vUV;
out vec4 fragColor;

uniform vec4 camera;
uniform float t;

vec3 hsl2rgb( in vec3 c ){
    vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
                             6.0)-3.0)-1.0,
                     0.0,
                     1.0 );
    rgb = rgb*rgb*(3.0-2.0*rgb);
    return c.z * mix(vec3(1.0), rgb, c.y);
}

float atan2(in float y, in float x)
{
    bool s = (abs(x) > abs(y));
    return mix(PI/2.0 - atan(x,y), atan(y,x), s);
}

vec2 cMultiply(vec2 c, float t) {
  return vec2(c.x * t, c.y * t);
}

vec2 cToPolar(vec2 c) {
    float r = length(c);
    float angle = atan2(c.y, c.x);
    return vec2(r, angle);
  }

vec2 cPow(vec2 base, float exp) {
    vec2 polar = cToPolar(base);
    return vec2(cos(polar.y * exp), sin(polar.y * exp)) * pow(polar.x, exp);
}

void main() {
  vec2 z = camera.xy + (vUV - 0.5) * camera.zw;
  vec2 c = 0.7885 * vec2(cos(t * 6.28), sin(t * 6.28));
  
  // vec2 c = vec2(-0.8, 0.156);
  
  const int maxIterations = 200;
  int n = 0;
  
  bool escaped = false;
  for (int i = 0; i < maxIterations; i++) {
    z = vec2(z.x * z.x - z.y * z.y, 2. * z.x * z.y) + c;
    
    if (length(z) > 6.) {
      escaped = true;
      n = i;
      break;
    }
  }
  
  float t = float(n) / float(maxIterations);
  //vec3 color = escaped ? vec3(t * 3., 0, (1. - t) * 0.3) : vec3(0);
  vec3 color = escaped ? hsl2rgb(vec3(pow(t, 0.25) * 2., 0.8, 1)) : vec3(0);

  fragColor = vec4(color, 1);
}
`;

var program = createProgram(vertexSource, fragmentSource);

var vertexData = new Float32Array([
  -1.0,  1.0, // top left
  -1.0, -1.0, // bottom left
  1.0,  1.0, // top right
  1.0, -1.0, // bottom right
]);
var vertexDataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);

var positionLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, gl.FALSE, 2 * 4, 0);

var uvData = new Float32Array([
  0, 0,
  0, 1,
  1, 0,
  1, 1
]);

var uvBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, uvData, gl.STATIC_DRAW);

var uvLocation = gl.getAttribLocation(program, 'uv');
gl.enableVertexAttribArray(uvLocation);
gl.vertexAttribPointer(uvLocation, 2, gl.FLOAT, gl.FALSE, 2 * 4, 0);

var cameraLocation = gl.getUniformLocation(program, "camera");
var tLocation = gl.getUniformLocation(program, "t");

// gl.uniform3f(cameraLocation, -0.7466, 0.094509, 0.007);
var scale = 1.8;
var aspect = width / height;
var angle = 0.707;
var time = 0;

loop();
function loop() {
  // angle = time / 10;
  
  gl.uniform4f(cameraLocation, 0, 0, scale * aspect, scale);
  gl.uniform1f(tLocation, angle);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  
  time += 1 / 60;
  requestAnimationFrame(loop);
}

canvas.onmousemove = function(e) {
  angle = e.clientX / width;
}

function createProgram(vertexSource, fragmentSource) {
  var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
  var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);
  
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);
  
  return program;
}

function compileShader(shaderSource, shaderType) {
  var shader = gl.createShader(shaderType);
  gl.shaderSource(shader, shaderSource);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
  }

  return shader;
}