backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 01:41:22 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

grid patterns

Browse source
This commit is contained in:
Azgaar 2021-04-10 18:59:00 +03:00
parent 38c8a20c45
commit 6fd8862d7a
5 changed files with 90 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

56
modules/ui/layers.js
View file

@ -968,6 +968,8 @@ function toggleGrid(event) {
turnButtonOn("toggleGrid");
drawGrid();
calculateFriendlyGridSize();
if (event && isCtrlClick(event)) editStyle("gridOverlay");
} else {
if (event && isCtrlClick(event)) {editStyle("gridOverlay"); return;}
@ -977,51 +979,19 @@ function toggleGrid(event) {
}
function drawGrid() {
TIME && console.time("drawGrid");
gridOverlay.selectAll("*").remove();
const type = styleGridType.value;
const size = Math.max(+styleGridSize.value || +gridOverlay.attr("size"), 2);
if (type === "pointyHex" || type === "flatHex") {
const points = getHexGridPoints(size, type);
const hex = "m" + getHex(size, type).slice(0, 4).join("l");
const d = points.map(p => "M" + p + hex).join("");
gridOverlay.append("path").attr("d", d);
} else if (type === "square") {
const pathX = d3.range(size, svgWidth, size).map(x => "M" + rn(x, 2) + ",0v" + svgHeight).join(" ");
const pathY = d3.range(size, svgHeight, size).map(y => "M0," + rn(y, 2) + "h" + svgWidth).join(" ");
gridOverlay.append("path").attr("d", pathX + pathY);
}
const pattern = "#pattern_" + (gridOverlay.attr("type") || "pointyHex");
const stroke = gridOverlay.attr("stroke") || "#808080";
const width = gridOverlay.attr("stroke-width") || .5;
const dasharray = gridOverlay.attr("stroke-dasharray") || null;
const linecap = gridOverlay.attr("stroke-linecap") || null;
const scale = gridOverlay.attr("scale") || 1;
const dx = gridOverlay.attr("dx") || 0;
const dy = gridOverlay.attr("dy") || 0;
const tr = `scale(${scale}) translate(${dx} ${dy})`;
// calculate hexes centers
function getHexGridPoints(size, type) {
const points = [];
const rt3 = Math.sqrt(3);
const off = type === "pointyHex" ? rn(rt3 * size / 2, 2) : rn(size * 3 / 2, 2);
const ySpace = type === "pointyHex" ? rn(size * 3 / 2, 2) : rn(rt3 * size / 2, 2);
const xSpace = type === "pointyHex" ? rn(rt3 * size, 2) : rn(size * 3, 2);
for (let y = 0, l = 0; y < graphHeight+ySpace; y += ySpace, l++) {
for (let x = l % 2 ? 0 : off; x < graphWidth+xSpace; x += xSpace) {points.push([rn(x, 2), rn(y, 2)]);}
}
return points;
}
// calculate hex points
function getHex(radius, type) {
let x0 = 0, y0 = 0;
const s = type === "pointyHex" ? 0 : Math.PI / -6;
const thirdPi = Math.PI / 3;
let angles = [s, s + thirdPi, s + 2 * thirdPi, s + 3 * thirdPi, s + 4 * thirdPi, s + 5 * thirdPi];
return angles.map(function(a) {
const x1 = Math.sin(a) * radius;
const y1 = -Math.cos(a) * radius;
const dx = rn(x1 - x0, 2);
const dy = rn(y1 - y0, 2);
x0 = x1, y0 = y1;
return [rn(dx, 2), rn(dy, 2)];
});
}
TIME && console.timeEnd("drawGrid");
d3.select(pattern).attr("stroke", stroke).attr("stroke-width", width).attr("stroke-dasharray", dasharray).attr("stroke-linecap", linecap).attr("patternTransform", tr);
gridOverlay.append("rect").attr("width", "100%").attr("height", "100%").attr("fill", "url(" + pattern + ")").attr("stroke", "none");
}
function toggleCoordinates(event) {