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

body, html {
  margin: 0;
  overflow: hidden;
}

canvas {
  display: block;
  cursor: pointer;
}

/*
  Johan Karlsson, 2020
  https://twitter.com/DonKarlssonSan
  MIT License, see Details View
*/

let config = {};
let canvas;
let ctx;
let w, h;
let hexagons;

class Hexagon {
  constructor(x, y, R, r, t) {
    this.x = x;
    this.y = y;
    this.R = R;
    this.r = r;
    this.t = t;
  }
  
  draw() {
    ctx.save();
    ctx.translate(this.x, this.y);
    let angle = Math.PI * 2 / 3;
    let nrOfRotations = 3;
    for(let rot = 0; rot < nrOfRotations; rot++) {
      ctx.rotate(angle);
      // Few lines on top ow the cube,
      // but more on the sides to create
      // a shadow illusion.
      let nrOfStripes = Math.ceil(Math.random() * 8 + rot * 2);
      for(let i = 0; i < nrOfStripes + 1; i++) {
        let y1 = -this.R * i / nrOfStripes;
        let y2 = y1 + this.t / 2;
        ctx.beginPath();
        ctx.moveTo(0, y1);
        ctx.lineTo(this.r, y2);
        ctx.stroke();
      }
    }
    ctx.restore();
  }
}

function setup() {
  canvas = document.querySelector("#canvas");
  ctx = canvas.getContext("2d");
  window.addEventListener("resize", resize);
  canvas.addEventListener("click", draw);
  resize();
}

function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  ctx.fillStyle = "white";
  ctx.lineCap = "round";
  ctx.lineJoin = "round";
  draw();
}

function setupHexagons() {
  hexagons = [];
  let r = config.size;
  let R = r / Math.cos(Math.PI / 6);
  let t = r * 2 / Math.sqrt(3);
  let rows = w / (r * 2) + 1;
  let cols = h / R;
  for(let x = 0; x < rows; x++) {
    for(let y = 0; y < cols; y++) {
      let xOffset = y % 2 === 0 ? r : 0;
      let xPixel = r * x * 2 + xOffset;
      let yPixel = (t/2 + R) * y;
      let hexagon = new Hexagon(xPixel, yPixel, R, r, t);
      hexagons.push(hexagon);
    }
  }
}

function draw() {
  ctx.lineWidth = Math.random() + 1;
  config.size = Math.random() * 60 + 15;
  setupHexagons();
  ctx.fillRect(0, 0, w, h);
  hexagons.forEach(h => {
    h.draw();
  });
}

setup();