<canvas id="canvas" title="Click to generate a new pattern!"></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 = {
  useRandomValuesInstead: true,
  lineWidth: 3,
  nrOfStripes: 6,
  size: 42,
  colorWheelOffset: 0,
};

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);
      for(let i = 0; i < config.nrOfStripes + 1; i++) {
        let y1 = -this.R * i / config.nrOfStripes;
        let y2 = y1 + this.t / 2;
        ctx.beginPath();
        ctx.moveTo(0, y1);
        ctx.lineTo(this.r, y2);
        
        ctx.strokeStyle = this.calculateColor(this.x, this.y);
        ctx.stroke();
      }
    }
    ctx.restore();
  }
  
  calculateColor(x, y) {
    let deltax = w / 2 - x;
    let deltay = h / 2 - y;
    let angle = Math.atan2(deltay, deltax);
    let hue = angle * 180 / Math.PI + config.colorWheelOffset;

    let dist = Math.sqrt(deltax * deltax + deltay * deltay);
    let saturation = dist/Math.min(w, h) * 100;
    return `hsl(${hue}, ${saturation}%, 50%)`;
  }
}

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 = "black";
  ctx.lineWidth = config.lineWidth;
  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() {
  if(config.useRandomValuesInstead) {
    config.lineWidth = Math.random() * 3 + 1;
    config.nrOfStripes = Math.ceil(Math.random() * 8);
    config.size = Math.random() * 70 + 10;
    config.colorWheelOffset = Math.random() * 360;
  }
  setupHexagons();
  ctx.fillRect(0, 0, w, h);
  hexagons.forEach(h => {
    h.draw();
  });
}

setup();