/* Canvas set-up */
var canvas = document.getElementsByTagName("canvas")[0];
var gl = canvas.getContext("webgl", {
  antialias: false,
  preserveDrawingBuffer: false,
});

function resizeCanvas() {
  const scl = (p) => Math.trunc(p / 2);

  var width = scl(gl.canvas.clientWidth);
  var height = scl(gl.canvas.clientHeight);

  if (gl.canvas.width != width || gl.canvas.height != height) {
    gl.canvas.width = width;
    gl.canvas.height = height;

    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  }

  return [width, height];
}

resizeCanvas();

/* WebGL set-up */
gl.clearColor(0.0, 0.0, 0.0, 0.0);

/* Fetch shader programs */
const fetchText = async (url) => (await fetch(url)).text();

var vsSrc = await fetchText("/shader/bg.vert");
var fsSrc = await fetchText("/shader/bg.frag");

/* Compile vertex shader */
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, vsSrc);
gl.compileShader(vs);

/* Compile fragment shader */
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, fsSrc);
gl.compileShader(fs);

/* Create and use program */
var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram(program);

/* Get attributes and uniforms */
var a_position = gl.getAttribLocation(program, "a_position");
var u_time = gl.getUniformLocation(program, "u_time");
var u_resolution = gl.getUniformLocation(program, "u_resolution");

/* Vertices */
const verts = new Float32Array([
  -1.0, +1.0, -1.0, -1.0, +1.0, +1.0, +1.0, -1.0,
]);

/* Create vertex buffer */
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);

/* Bind vertices */
gl.vertexAttribPointer(
  a_position,
  2,
  gl.FLOAT,
  false,
  verts.BYTES_PER_ELEMENT * 2,
  0,
);
gl.enableVertexAttribArray(a_position);

/* Draw */
var startTime = performance.now();
function draw() {
  requestAnimationFrame(draw);

  /* Get time */
  var nowTime = performance.now() - startTime;
  if (nowTime >= 8.0) {
    startTime = 0;
  }
  nowTime /= 1000;

  /* Resize canvas */
  resizeCanvas();

  /* Set uniforms */
  gl.uniform1f(u_time, nowTime);
  gl.uniform2fv(u_resolution, [gl.drawingBufferWidth, gl.drawingBufferHeight]);

  // Draw triangles
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

/* Start !! */
requestAnimationFrame(draw);