Rectangle algo can offset origin
This commit is contained in:
parent
6192367671
commit
1574631834
@ -117,8 +117,8 @@
|
|||||||
|
|
||||||
use[href="#hex"] {
|
use[href="#hex"] {
|
||||||
stroke: #666;
|
stroke: #666;
|
||||||
/* fill: wheat; */
|
fill: wheat;
|
||||||
fill: url(#asterisk);
|
/* fill: url(#asterisk); */
|
||||||
}
|
}
|
||||||
|
|
||||||
.building [class*="elevation"] use {
|
.building [class*="elevation"] use {
|
||||||
|
@ -38,18 +38,18 @@ function getNeighbors(coords) {
|
|||||||
|
|
||||||
function generateRadialCoords(l, { q, r, s }, radius) {
|
function generateRadialCoords(l, { q, r, s }, radius) {
|
||||||
const origin = toKey(q, r, s);
|
const origin = toKey(q, r, s);
|
||||||
const list = new Set(l);
|
const list = new Map(l);
|
||||||
const neighbors = new Set();
|
const neighbors = new Set();
|
||||||
|
|
||||||
let next = new Set();
|
let next = new Set();
|
||||||
|
|
||||||
list.add(origin);
|
list.set(origin);
|
||||||
next.add(origin);
|
next.add(origin);
|
||||||
|
|
||||||
for (let i = 0; i < radius; i++) {
|
for (let i = 0; i < radius; i++) {
|
||||||
next.forEach(coords => {
|
next.forEach(coords => {
|
||||||
getNeighbors(coords).forEach(n => {
|
getNeighbors(coords).forEach(n => {
|
||||||
list.add(n);
|
list.set(n, null);
|
||||||
neighbors.add(n);
|
neighbors.add(n);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -99,7 +99,7 @@ function generateRadialCoordsRect({ rows, columns, odd = false, equal = true } =
|
|||||||
}
|
}
|
||||||
|
|
||||||
function drawHexes(el, list) {
|
function drawHexes(el, list) {
|
||||||
list.forEach(key => {
|
for ([key, v] of list) {
|
||||||
const [q, r, s] = key.split(',').map(n => +n);
|
const [q, r, s] = key.split(',').map(n => +n);
|
||||||
|
|
||||||
let x;
|
let x;
|
||||||
@ -133,11 +133,17 @@ function drawHexes(el, list) {
|
|||||||
const sText = document.createElementNS(xmlns, 'text');
|
const sText = document.createElementNS(xmlns, 'text');
|
||||||
sText.textContent = s;
|
sText.textContent = s;
|
||||||
sText.setAttributeNS(null, 'x', -3);
|
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);
|
el.appendChild(g);
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function translateRadialCoords({ q, r, s }, direction, distance) {
|
function translateRadialCoords({ q, r, s }, direction, distance) {
|
||||||
@ -271,36 +277,38 @@ bld2hexes.forEach(list => list.forEach(coords => grid.delete(coords)));
|
|||||||
|
|
||||||
// drawHexes(elevation1, grid);
|
// drawHexes(elevation1, grid);
|
||||||
|
|
||||||
|
function generateRadialCoords2(l, { q, r, s }) {
|
||||||
|
|
||||||
function generateRadialCoords2(l, { q, r, s }, radius) {
|
|
||||||
const origin = toKey(q, r, s);
|
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;
|
return list;
|
||||||
@ -309,10 +317,26 @@ function generateRadialCoords2(l, { q, r, s }, radius) {
|
|||||||
const elevation2 = document.createElementNS(xmlns, 'g');
|
const elevation2 = document.createElementNS(xmlns, 'g');
|
||||||
elevation2.classList.add('elevation-2');
|
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(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');
|
const defs = svg.querySelector('defs');
|
||||||
defs.after(elevation2);
|
defs.after(elevation2);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user