<canvas id="canvas"></canvas>

html {
  height: 100%;
  background: #222222;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 800px;
  min-height: 800px;
}

const canvas = document.getElementById("canvas");
const outputContainer = document.getElementsByClassName("wrapper")[0];
const ctx = canvas.getContext("2d");

let canvasSize = 660;
let ratio = window.devicePixelRatio || 1;
canvas.width = canvasSize * ratio;
canvas.height = canvasSize * ratio;
canvas.style.width = canvasSize + "px";
canvas.style.height = canvasSize + "px";
ctx.scale(ratio, ratio);

// const colors = parseCoolorsUrl(
//   "https://coolors.co/ef476f-ffd166-06d6a0-118ab2-073b4c"
// );

const colors = ["#ED0DD9", "#C1C6FC", "pink", "#e91e63", "#222222"];

// const colors = ["red", "orange", "#FF073A", "#222222"];

// const colors = [
//   "#3E82FC",
//   "#014D4E",
//   "#13BBAF",
//   "#33B864",
//   "#01F9C6",
//   "#FFE5AD"
// ];

let columnAmount = 26;
let columWidth = canvasSize / columnAmount;
let maxRectangleHeight = 60;

draw();

function draw() {
  let startX = 0;
  let startY = 0;

  for (let column = 0; column < columnAmount; column++) {
    while (startY < canvasSize) {
      let rectangleHeight;
      if (startY + maxRectangleHeight > canvasSize) {
        rectangleHeight = canvasSize - startY;
      } else {
        rectangleHeight = randomNum(2, maxRectangleHeight);
      }

      let gradient = ctx.createLinearGradient(
        startX,
        startY,
        startX + columWidth,
        startY + rectangleHeight
      );

      let colorStop = 0;
      let colorStopStep = 1 / (colors.length - 1);

      colors.forEach((color) => {
        gradient.addColorStop(colorStop, color);
        colorStop += colorStopStep;
      });

      ctx.fillStyle = gradient;
      ctx.fillRect(startX, startY, columWidth, rectangleHeight);
      startY = startY + rectangleHeight;
      shuffle(colors);
    }

    startY = 0;
    startX = startX + columWidth;
  }
}

document.addEventListener("click", () => {
  requestAnimationFrame(draw);
});

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function shuffle(array) {
  let currentIndex = array.length,
    randomIndex;

  // While there remain elements to shuffle...
  while (currentIndex != 0) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex],
      array[currentIndex]
    ];
  }

  return array;
}

function parseCoolorsUrl(url) {
  let colors = [];
  let urlSegments = url.split("/");
  let urlColors = urlSegments[urlSegments.length - 1];
  urlColors.split("-").forEach((color) => {
    colors.push(`#${color}`);
  });
  return colors;
}