mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-22 12:01:23 +01:00
feat: routes editor - split route
This commit is contained in:
parent
cd45c3a01b
commit
41354a857e
5 changed files with 154 additions and 55 deletions
|
|
@ -14,11 +14,27 @@ function toHEX(rgb) {
|
|||
: "";
|
||||
}
|
||||
|
||||
const C_12 = [
|
||||
"#dababf",
|
||||
"#fb8072",
|
||||
"#80b1d3",
|
||||
"#fdb462",
|
||||
"#b3de69",
|
||||
"#fccde5",
|
||||
"#c6b9c1",
|
||||
"#bc80bd",
|
||||
"#ccebc5",
|
||||
"#ffed6f",
|
||||
"#8dd3c7",
|
||||
"#eb8de7"
|
||||
];
|
||||
const scaleRainbow = d3.scaleSequential(d3.interpolateRainbow);
|
||||
|
||||
// return array of standard shuffled colors
|
||||
function getColors(number) {
|
||||
const c12 = ["#dababf", "#fb8072", "#80b1d3", "#fdb462", "#b3de69", "#fccde5", "#c6b9c1", "#bc80bd", "#ccebc5", "#ffed6f", "#8dd3c7", "#eb8de7"];
|
||||
const cRB = d3.scaleSequential(d3.interpolateRainbow);
|
||||
const colors = d3.shuffle(d3.range(number).map(i => (i < 12 ? c12[i] : d3.color(cRB((i - 12) / (number - 12))).hex())));
|
||||
const colors = d3.shuffle(
|
||||
d3.range(number).map(i => (i < 12 ? C_12[i] : d3.color(scaleRainbow((i - 12) / (number - 12))).hex()))
|
||||
);
|
||||
return colors;
|
||||
}
|
||||
|
||||
|
|
|
|||
58
utils/debugUtils.js
Normal file
58
utils/debugUtils.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
"use strict";
|
||||
// FMG utils used for debugging
|
||||
|
||||
function drawCellsValue(data) {
|
||||
debug.selectAll("text").remove();
|
||||
debug
|
||||
.selectAll("text")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("x", (d, i) => pack.cells.p[i][0])
|
||||
.attr("y", (d, i) => pack.cells.p[i][1])
|
||||
.text(d => d);
|
||||
}
|
||||
|
||||
function drawPolygons(data) {
|
||||
const max = d3.max(data);
|
||||
const min = d3.min(data);
|
||||
const scheme = getColorScheme(terrs.select("#landHeights").attr("scheme"));
|
||||
|
||||
data = data.map(d => 1 - normalize(d, min, max));
|
||||
|
||||
debug.selectAll("polygon").remove();
|
||||
debug
|
||||
.selectAll("polygon")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("polygon")
|
||||
.attr("points", (d, i) => getGridPolygon(i))
|
||||
.attr("fill", d => scheme(d))
|
||||
.attr("stroke", d => scheme(d));
|
||||
}
|
||||
|
||||
function drawRouteConnections() {
|
||||
debug.select("#connections").remove();
|
||||
const routes = debug.append("g").attr("id", "connections").attr("stroke-width", 0.4);
|
||||
|
||||
const points = pack.cells.p;
|
||||
const links = pack.cells.routes;
|
||||
|
||||
for (const from in links) {
|
||||
for (const to in links[from]) {
|
||||
const [x1, y1] = points[from];
|
||||
const [x3, y3] = points[to];
|
||||
const [x2, y2] = [(x1 + x3) / 2, (y1 + y3) / 2];
|
||||
const routeId = links[from][to];
|
||||
|
||||
routes
|
||||
.append("line")
|
||||
.attr("x1", x1)
|
||||
.attr("y1", y1)
|
||||
.attr("x2", x2)
|
||||
.attr("y2", y2)
|
||||
.attr("data-id", routeId)
|
||||
.attr("stroke", C_12[routeId % 12]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -312,38 +312,6 @@ void (function addFindAll() {
|
|||
};
|
||||
})();
|
||||
|
||||
// helper function non-used for the generation
|
||||
function drawCellsValue(data) {
|
||||
debug.selectAll("text").remove();
|
||||
debug
|
||||
.selectAll("text")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("x", (d, i) => pack.cells.p[i][0])
|
||||
.attr("y", (d, i) => pack.cells.p[i][1])
|
||||
.text(d => d);
|
||||
}
|
||||
|
||||
// helper function non-used for the main generation
|
||||
function drawPolygons(data) {
|
||||
const max = d3.max(data);
|
||||
const min = d3.min(data);
|
||||
const scheme = getColorScheme(terrs.select("#landHeights").attr("scheme"));
|
||||
|
||||
data = data.map(d => 1 - normalize(d, min, max));
|
||||
|
||||
debug.selectAll("polygon").remove();
|
||||
debug
|
||||
.selectAll("polygon")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("polygon")
|
||||
.attr("points", (d, i) => getGridPolygon(i))
|
||||
.attr("fill", d => scheme(d))
|
||||
.attr("stroke", d => scheme(d));
|
||||
}
|
||||
|
||||
// draw raster heightmap preview (not used in main generation)
|
||||
function drawHeights({heights, width, height, scheme, renderOcean}) {
|
||||
const canvas = document.createElement("canvas");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue