hexes (js + svg)

class hPoint {
  constructor(x = 0, y = 0, z = 0) {
    this.x = x
    this.y = y
    this.z = 0 - (x + y)
  }

  dist({ x = 0, y = 0 }) {
    const point = new hPoint(x, y)
    return Math.max(
      Math.abs(this.x - point.x),
      Math.abs(this.y - point.y),
      Math.abs(this.z - point.z),
    )
  }
}

const PREC = 2
const DB = document.body
const ANG = Math.PI / 3
const RAD = 32
const XMat = {
  x: RAD * Math.sqrt(3),
  y: 0,
}
const YMat = {
  x: (Math.cos(ANG) * Math.sqrt(3) * RAD),
  y: (Math.sin(ANG) * Math.sqrt(3) * RAD),
}

var FLD

const pts = (new Array(6))
  .fill(0)
  .map((e, i) => ({
    y: (Math.cos(ANG * i) * RAD),
    x: (Math.sin(ANG * i) * RAD),
  }))

HTMLElement.prototype.cel = function(tag) {
  const el = document.createElement(tag)
  if (el) { this.appendChild(el) }
  return el
}

HTMLElement.prototype.cen = function(NS, tag) {
  const el = document.createElementNS(NS, tag)
  if (el) { this.appendChild(el) }
  return el
}

function hex(x, y) {
  const el = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')

  el.setAttribute(
    'points',
    pts.map(p => `${(p.x + x * XMat.x + y * YMat.x).toFixed(PREC) * 1} ${(p.y + x * XMat.y + y * YMat.y).toFixed(PREC) * 1}`).join(' ')
  )
  FLD.appendChild(el)

  return el
}

function area(x, y, rad) {
  const center = new hPoint(0, 0)
  for (let col = -rad; col <= rad; col++) {
    for (let row = -rad; row <= rad; row++) {
      if (center.dist({x: col, y: row}) <= rad) {
        hex(col + x, row + x)
      }
    }
  }
}

function rect(x, y, wt, ht) {
  for (let row = 0; row < ht; row++) {
    const off = (row / 2) << 0
    for (let col = 0; col < wt; col++) {
      hex(x + col - off, y + row)
    }
  }
}

function drop() {
  FLD.innerHTML = ''
}

(() => {
  FLD = DB.cen('http://www.w3.org/2000/svg', 'svg')
})()