WIP: radial hex grid

2025-06-16 22:41:31 -07:00 · 2025-06-16 22:41:31 -07:00 · df21cd8271
commit df21cd8271
parent 515323feaa
2 changed files with 127 additions and 0 deletions
--- a/public/radial.html
+++ b/public/radial.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      polygon {
+        fill: none;
+        stroke: black;
+        stroke-width: 0.5px;
+      }
+
+      svg {
+        border: 1px solid slategray;
+      }
+
+      text {
+        font-size: 4px;
+        text-anchor: middle;
+        user-select: none;
+        font-family: sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <svg viewBox="-150 -100 300 200" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+      </defs>
+    </svg>
+    <script src="radial.js"></script>
+  </body>
+</html>
--- a/src/radial.js
+++ b/src/radial.js
@ -0,0 +1,96 @@
+if (window.IS_DEV) {
+  const source = new EventSource('/esbuild');
+  source.addEventListener('change', () => location.reload());
+}
+
+function toKey(q, r, s) {
+  return `${[q, r, s]}`;
+}
+
+function getNeighbors(coords) {
+  const [q, r, s] = coords.split(',').map(n => +n);
+
+  return [
+    toKey(q + 1, r, s - 1),
+    toKey(q - 1, r, s + 1),
+    toKey(q + 1, r - 1, s),
+    toKey(q - 1, r + 1, s),
+    toKey(q, r + 1, s - 1),
+    toKey(q, r - 1, s + 1),
+  ]
+}
+
+function generateRadialCoords({ q, r, s }, radius) {
+  const origin = toKey(q, r, s);
+  const list = new Set();
+  const neighbors = new Set();
+
+  let next = new Set();
+
+  list.add(origin);
+  next.add(origin);
+
+  for (let i = 0; i < radius; i++) {
+    next.forEach(coords => {
+      getNeighbors(coords).forEach(n => {
+        list.add(n);
+        neighbors.add(n);
+      });
+    });
+
+    next = new Set(neighbors);
+    neighbors.clear();
+  }
+
+  return list;
+}
+
+const hex = {
+  inradius: 8.66,
+  circumradius: 10,
+}
+
+const horzSpacing = hex.inradius;
+const vertSpacing = hex.circumradius * 3 / 2;
+
+const list = generateRadialCoords({ q: 0, r: 0, s: 0 }, 5);
+const svg = document.querySelector('svg');
+const xmlns = 'http://www.w3.org/2000/svg';
+
+list.forEach(key => {
+  const [q, r, s] = key.split(',').map(n => +n);
+
+  let x;
+
+  if (q === s)
+    x = 0;
+  else if (q > -1 && s > -1 || q < 0 && s < 0)
+    x = Math.abs(q - s);
+  else
+    x = Math.abs(q) + Math.abs(s);
+
+  x = (q > s ? -1 : 1) * x * horzSpacing;
+  y = r * vertSpacing;
+
+  const use = document.createElementNS(xmlns, 'use');
+  use.setAttributeNS(null, 'href', '#hex');
+  use.setAttributeNS(null, 'x', x);
+  use.setAttributeNS(null, 'y', y);
+
+  const qText = document.createElementNS(xmlns, 'text');
+  qText.textContent = q;
+  qText.setAttributeNS(null, 'x', x - 3);
+  qText.setAttributeNS(null, 'y', y - 3);
+
+  const rText = document.createElementNS(xmlns, 'text');
+  rText.textContent = r;
+  rText.setAttributeNS(null, 'x', x + 5);
+  rText.setAttributeNS(null, 'y', y + 1.5);
+
+  const sText = document.createElementNS(xmlns, 'text');
+  sText.textContent = s;
+  sText.setAttributeNS(null, 'x', x - 3);
+  sText.setAttributeNS(null, 'y', y + 5);
+
+  [use, qText, rText, sText].forEach(el => svg.appendChild(el));
+});