Rectangle algo can offset origin

public/radial.html

@@ -117,8 +117,8 @@
 
     use[href="#hex"] {
       stroke: #666;
-      /* fill: wheat; */
+      fill: wheat;
-      fill: url(#asterisk);
+      /* fill: url(#asterisk); */
     }
 
     .building [class*="elevation"] use {

src/radial.js

@@ -38,18 +38,18 @@ function getNeighbors(coords) {
 
 function generateRadialCoords(l, { q, r, s }, radius) {
   const origin = toKey(q, r, s);
-  const list = new Set(l);
+  const list = new Map(l);
   const neighbors = new Set();
 
   let next = new Set();
 
-  list.add(origin);
+  list.set(origin);
   next.add(origin);
 
   for (let i = 0; i < radius; i++) {
     next.forEach(coords => {
       getNeighbors(coords).forEach(n => {
-        list.add(n);
+        list.set(n, null);
         neighbors.add(n);
       });
     });
@@ -99,7 +99,7 @@ function generateRadialCoordsRect({ rows, columns, odd = false, equal = true } =
 }
 
 function drawHexes(el, list) {
-  list.forEach(key => {
+  for ([key, v] of list) {
     const [q, r, s] = key.split(',').map(n => +n);
 
     let x;
@@ -133,11 +133,17 @@ function drawHexes(el, list) {
     const sText = document.createElementNS(xmlns, 'text');
     sText.textContent = s;
     sText.setAttributeNS(null, 'x', -3);
-    sText.setAttributeNS(null, 'y', + 5);
+    sText.setAttributeNS(null, 'y', 5);
 
-    [use, qText, rText, sText].forEach(el => g.appendChild(el));
+    const vText = document.createElementNS(xmlns, 'text');
+    vText.textContent = v;
+    vText.style.fill = 'red';
+    vText.setAttributeNS(null, 'y', 1);
+    vText.setAttributeNS(null, 'x', -2);
+
+    [use, qText, rText, sText, vText].forEach(el => g.appendChild(el));
     el.appendChild(g);
-  });
+  }
 }
 
 function translateRadialCoords({ q, r, s }, direction, distance) {
@@ -271,36 +277,38 @@ bld2hexes.forEach(list => list.forEach(coords => grid.delete(coords)));
 
 // drawHexes(elevation1, grid);
 
-
+function generateRadialCoords2(l, { q, r, s }) {
-
-function generateRadialCoords2(l, { q, r, s }, radius) {
   const origin = toKey(q, r, s);
-  const list = new Set(l);
+  const list = new Map(l);
-  const neighbors = new Set();
+  let level = 0;
 
-  let next = new Set();
+  list.set(origin, level);
+  let queue = [origin];
 
-  list.add(origin);
+  const top = 5;
-  next.add(origin);
+  const bottom = 5;
 
-  for (let i = 0; i < radius; i++) {
+  const left = 1;
-    next.forEach(coords => {
+  const right = 1;
-      getNeighbors(coords).forEach(n => {
-        const [q, r, s] = n.split(',').map(n => +n);
 
-        const height = 7;
+  while (queue.length > 0) {
-        const width = 3;
+    level++;
-        const mod = (Math.abs(r) - height % 2) / 2;
+    const v = queue.shift();
+    getNeighbors(v).forEach(w => {
+      const [wq, wr, ws] = w.split(',').map(n => +n);
+      const rDist = Math.abs(wr - r);
+      const dr = (rDist + rDist % 2) / 2;
 
-        if (Math.abs(r) < height && Math.abs(q) - mod < width && Math.abs(s) - mod < width) {
+      if ([
-          list.add(n);
+        !list.has(w),
-          neighbors.add(n);
+        wr < bottom + r && wr > -top + r,
-        }
+        wq > -right + q - dr && wq < left + q + dr,
-      });
+        ws > -left + s - dr && ws < right + s + dr,
+      ].every(v => v)) {
+        list.set(w, dr);
+        queue.push(w);
+      }
     });
-
-    next = new Set(neighbors);
-    neighbors.clear();
   }
 
   return list;
@@ -309,10 +317,26 @@ function generateRadialCoords2(l, { q, r, s }, radius) {
 const elevation2 = document.createElementNS(xmlns, 'g');
 elevation2.classList.add('elevation-2');
 
+const list = generateRadialCoords2(new Map(), { q: 0, r: 0, s: 0 });
+// const list = generateRadialCoords2(new Map(), { q: -5, r: 5, s: 0 });
+
+// q [3, -3]
+// s [-3, 3]
+
+// const list = generateRadialCoords2(new Map(), { q: -2, r: 0, s: 2 });
+// q [1, -5]
+// s [-1, 5]
+
+// const list = generateRadialCoords2(new Map(), { q: -1, r: 2, s: -1 });
+// q [2, -4]
+// s [-4, 2]
+
+// const list = generateRadialCoords2(new Map(), { q: -5, r: 4, s: 1 });
+// q [-2, -8]
+// s [-2, 4]
 
 drawHexes(elevation2, generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, 10));
-drawHexes(elevation1, generateRadialCoords2(new Map(), { q: 0, r: 0, s: 0 }, 10));
+drawHexes(elevation1, list);
-
 
 const defs = svg.querySelector('defs');
 defs.after(elevation2);