// Universal constants
const TAU = Math.PI * 2;
// Prepare canvas
const canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "source-over";

// Fill canvas
function clearCanvas(color) {
  let temp = ctx.globalCompositeOperation;
  ctx.globalCompositeOperation = "source-over";
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = temp;
}

const noiseSize = 2 ** 8;
const smoothSteps = 70;
const sqSz = Math.floor(canvas.height / noiseSize / 3);

function loopedSmoothNoise() {
  let noise = [];
  for (let i = 0; i < noiseSize; i++) {
    let arr = [];
    for (let j = 0; j < noiseSize; j++) {
      arr.push(Math.random());
    }
    noise.push(arr);
  }
  const dxy = [
    [-1, -1],
    [0, -1],
    [1, -1],
    [-1, 0],
    [1, 0],
    [-1, 1],
    [0, 1],
    [1, 1]
  ];

  let noise2 = [];
  for (let t = 0; t < smoothSteps; t++) {
    noise2 = [];
    for (let i = 0; i < noiseSize; i++) {
      let arr = [];
      for (let j = 0; j < noiseSize; j++) {
        // console.log('ij',noise[i][j])
        let mean = dxy
          .map(([dx, dy]) => {
            // let tx = i + dx > 0 && i + dx < noiseSize ? i + dx : 0;
            // let ty = j + dy > 0 && j + dy < noiseSize ? j + dy : 0;
            let tx =
              i + dx < 0 ? noiseSize - 1 : i + dx >= noiseSize ? 0 : i + dx;
            let ty =
              j + dy < 0 ? noiseSize - 1 : j + dy >= noiseSize ? 0 : j + dy;
            return noise[tx][ty];
          })
          .reduce((acc, curr) => {
            // console.log(acc,curr)
            return acc + curr;
          }, noise[i][j]);
        mean = mean / 9;
        arr.push(mean);
      }
      noise2.push(arr);
    }
    noise = noise2;
  }

  // Normalise
  const minVal = Math.min(...noise.flat());
  const maxVal = Math.max(...noise.flat());
  for (let i = 0; i < noiseSize; i++) {
    for (let j = 0; j < noiseSize; j++) {
      noise[i][j] = (noise[i][j] - minVal) * (1 / (maxVal - minVal));
    }
  }
  const NminVal = Math.min(...noise.flat());
  const NmaxVal = Math.max(...noise.flat());
  // console.log(minVal, maxVal, NminVal, NmaxVal);
  return noise;
}

const noise = loopedSmoothNoise();

// Draw noise
let frameNumber = 0;
const outerRadius = (noiseSlice, i) => canvas.height * (noiseSlice[i]) * 0.1 + canvas.height * 0.25;
// const outerRadius = (noiseSlice, i) => canvas.height * (noiseSlice[i]) * 0.6;

const SPEED_ADJUST = 0.03;
function drawFrame(time = 0) {
  window.requestAnimationFrame(drawFrame);

  frameNumber++;

  clearCanvas("#012");

  let noiseSlice = noise[Math.floor(time * SPEED_ADJUST) % noiseSize];

  let gradient = ctx.createConicGradient(
    0,
    canvas.width * 0.5,
    canvas.height * 0.5
  );

  let startAngle = -TAU/4;
  let radius;
  radius = outerRadius(noiseSlice, 0);
  ctx.beginPath();
  // ctx.moveTo(
  //   canvas.width * 0.5 + Math.sin(startAngle) * radius,
  //   canvas.height * 0.5 + Math.cos(startAngle) * radius
  // );
  for (let i = 0; i < noise.length; i++) {
    radius = outerRadius(noiseSlice, i);
    ctx.lineTo(
      canvas.width * 0.5 + Math.sin(startAngle + (i * TAU) / noiseSlice.length) * radius,
      canvas.height * 0.5 + Math.cos(startAngle + (i * TAU) / noiseSlice.length) * radius
    );
  }
  ctx.closePath();

  // if (false) {
  //   radius = canvas.height * (1 - noiseSlice[0]) * 0.05 + canvas.height * 0.1;
  //   // ctx.beginPath();
  //   ctx.moveTo(
  //     canvas.width * 0.5 + Math.sin(0) * radius,
  //     canvas.height * 0.5 + Math.cos(0) * radius
  //   );
  //   for (let i = noise.length - 1; i >= 0; i--) {
  //     radius = canvas.height * (1 - noiseSlice[i]) * 0.05 + canvas.height * 0.1;
  //     ctx.lineTo(
  //       canvas.width * 0.5 + Math.sin((i * TAU) / noiseSlice.length) * radius,
  //       canvas.height * 0.5 + Math.cos((i * TAU) / noiseSlice.length) * radius
  //     );
  //   }
  //   ctx.closePath();
  // }
  
  const getColorValue = (noiseSlice,i) => `rgba(255,255,255,${noiseSlice[i]})`
  // gradient.addColorStop(0, getColorValue(noiseSlice,0));
  for (let i = 0; i < noise.length; i++) {
    gradient.addColorStop(
      (1 / noiseSize) * i,
      getColorValue(noiseSlice,i)
      // `hsla(${noiseSlice[i]*365},100%,50%,1)`
    );
  }
  // Set the fill style and draw a rectangle
  ctx.fillStyle = gradient;
  ctx.fill();
}

window.requestAnimationFrame(drawFrame);