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

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

body {
  margin: 0;
}

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let canvasSize = 900;
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);

let pixelSize = 6;
let plantHeight = 240;
let amountOfArms = 12;
let amountOfPlants = 5;

let startX = canvasSize / 2;
let startY = 840;

draw();

function draw() {
  ctx.fillStyle = "#222222";
  ctx.fillRect(0, 0, canvasSize, canvasSize);
  ctx.fillStyle = "#666666";
  ctx.fillRect(0, startY - 20, canvasSize, canvasSize);

  for (let arm = 0; arm < amountOfArms; arm++) {
    let x = startX;
    let y = startY;

    let mainDirection = randomNum(0, 2);
    for (let i = 0; i < plantHeight; i++) {
      if (mainDirection == 0) {
        // Straight
        let direction = randomNum(0, 6);
        if (direction == 0) {
          y = y - pixelSize;
        } else if (direction == 1 || direction == 5) {
          x = x - pixelSize;
        } else if (direction == 2 || direction == 6) {
          x = x + pixelSize;
        } else if (direction == 3) {
          y = y - pixelSize;
          x = x - pixelSize;
        } else if (direction == 4) {
          y = y - pixelSize;
          x = x + pixelSize;
        }
      } else if (mainDirection == 1) {
        // Left
        let direction = randomNum(0, 5);
        if (direction == 0) {
          y = y - pixelSize;
        } else if (direction == 1) {
          y = y - pixelSize;
          x = x + pixelSize;
        } else if (direction == 2) {
          x = x + pixelSize;
        } else if (direction == 3) {
          y = y - pixelSize;
          x = x - pixelSize;
        } else {
          x = x - pixelSize;
        }
      } else {
        // Right
        let direction = randomNum(0, 5);
        if (direction == 0) {
          y = y - pixelSize;
        } else if (direction == 1) {
          y = y - pixelSize;
          x = x + pixelSize;
        } else if (direction == 2) {
          x = x - pixelSize;
        } else if (direction == 3) {
          y = y - pixelSize;
          x = x - pixelSize;
        } else {
          x = x + pixelSize;
        }
      }

      if ((i + 1) % 40 == 0) {
        let random = randomNum(0, 1);
        if (random == 0) {
          ctx.fillStyle = "#FF0789";
        } else {
          ctx.fillStyle = "#D726DE";
        }
        ctx.fillRect(x, y, pixelSize * 2, pixelSize * 2);
      } else {
        // Normal pixel
        let color = randomNum(0, 3);
        if (color == 1) {
          ctx.fillStyle = "#2DFE54";
        } else if (color == 2) {
          ctx.fillStyle = "#10A674";
        } else if (color == 3) {
          ctx.fillStyle = "#32BF84";
        } else {
          ctx.fillStyle = "green";
        }

        ctx.fillRect(x, y, pixelSize, pixelSize);
      }
    }
  }
}

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

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