// -------------- 
// Code is really messy, as I was just experimenting
// consider yourself warned :)
// --------------

function getH(a) {
  return a * Math.sqrt(3) / 2;
}

// vertexIndex - 0, 1, 2
// starting from the bottom left, counter clock wise
function getVertexPoints(a, aPart, vertexIndex) {
  const h = getH(a);
  const c = aPart / 2;
  const factor = aPart / a;
  const cFactor = c / a;
  const hPart = h * factor;
  const chPart = h * cFactor;
  
  const pairs = [
    [
      aPart / 2, h - hPart,
      c / 2,     h - chPart,
      c,         h,
      aPart,     h,
    ],
    [
      a - aPart,     h,
      a - c,         h,
      a - c / 2,     h - chPart,
      a - aPart / 2, h - hPart,
    ],
    [
      a / 2 + aPart / 2, hPart,
      a / 2 + c / 2,     chPart,
      a / 2 - c / 2,     chPart,
      a / 2 - aPart / 2, hPart,
    ],
  ];
  
  return pairs[vertexIndex];
}

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

const a = 100;
const h = getH(a)
const lineWidth = 2;

function roundedTriangle(i, j) {
  if (Math.random() > 0.9) {
    return '';
  }
  
  const aPart = 20;
  const factor = aPart / a;
  const hPart = h * factor;
  
  const a1 = getRandomFromRange(2, 50);
  const a2 = getRandomFromRange(2, 50);
  const a3 = getRandomFromRange(2, 50);
  
  const p1 = getVertexPoints(a, a1, 0);
  const p2 = getVertexPoints(a, a2, 1);
  const p3 = getVertexPoints(a, a3, 2);
  
  const points = [
    `${ p1[0] } ${ p1[1] }`,
    `C ${ p1[2] } ${ p1[3] } ${ p1[4] } ${ p1[5] } ${ p1[6] } ${ p1[7] } L`,
    
    `${ p2[0] } ${ p2[1] }`,
    `C ${ p2[2] } ${ p2[3] } ${ p2[4] } ${ p2[5] } ${ p2[6] } ${ p2[7] } L`,
    
    `${ p3[0] } ${ p3[1] }`,
    `C ${ p3[2] } ${ p3[3] } ${ p3[4] } ${ p3[5] } ${ p3[6] } ${ p3[7] } L`,
    
    `${ p1[0] } ${ p1[1] }`,
  ];
  
  const shouldRotate = i % 2 === 0;
  const rowOffset = j % 2 === 0 ? 0 : a / 2 + margin;
  let rotation = "";  
  
  const x = i * (a / 2 + margin) + rowOffset;
  const y = j * (h + margin);
  
  const centerX = x + a / 2;
  const centerY = shouldRotate ? y + h / 3 : y + h * 2 / 3;
  
  if (shouldRotate) {
    rotation = `rotate(180, ${ x + a / 2 }, ${ y + h / 2 })`
  }
  
  
  return `
    <path 
      transform="
        ${ rotation }
        translate(${ x }, ${ y })
      "
      fill="rgba(${ getRandomFromRange(0, 160) }, ${ getRandomFromRange(0, 160) }, 255)"
      d="M ${ points.join(' ') } Z" 
    />
  `;
 }

const columns = 12;
const rows = 8;
const margin = 0;

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', `0 0 ${ (a / 2 + margin) * columns + a } ${ (h + margin) * rows }`);
document.querySelector('body').appendChild(svg);

function generate() {
  let html = '';
  
  for (let i = 0; i < columns; i++) {    
    for (let j = 0; j < rows; j++) {
      const skip = ((j === 0 || j === rows - 1) && (i < 2 || i > columns - 3)) ||
        ((j === 1 || j === rows - 2) && (i === 0 || i === columns - 1));

      if (skip) {
        continue;
      }
      
      html += roundedTriangle(i, j);
    }
  }
  
  svg.innerHTML = html;
}

generate();

document.querySelector('button').addEventListener('click', generate);