mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-22 03:51:23 +01:00
187 lines
8.8 KiB
JavaScript
187 lines
8.8 KiB
JavaScript
"use strict";
|
|
|
|
function showEPForRoute(node) {
|
|
const points = [];
|
|
debug.select("#controlPoints").selectAll("circle").each(function() {
|
|
const i = findCell(this.getAttribute("cx"), this.getAttribute("cy"));
|
|
points.push(i);
|
|
});
|
|
|
|
const routeLen = node.getTotalLength() * distanceScaleInput.value;
|
|
showElevationProfile(points, routeLen, false);
|
|
}
|
|
|
|
function showEPForRiver(node) {
|
|
const points = [];
|
|
debug.select("#controlPoints").selectAll("circle").each(function() {
|
|
const i = findCell(this.getAttribute("cx"), this.getAttribute("cy"));
|
|
points.push(i);
|
|
});
|
|
|
|
const riverLen = (node.getTotalLength() / 2) * distanceScaleInput.value;
|
|
showElevationProfile(points, riverLen, true);
|
|
}
|
|
|
|
function closeElevationProfile() {
|
|
modules.elevation = false;
|
|
}
|
|
|
|
function showElevationProfile(data, routeLen, isRiver) {
|
|
// data is an array of cell indexes, routeLen is the distance, isRiver should be true for rivers, false otherwise
|
|
document.getElementById("elevationGraph").innerHTML = "";
|
|
|
|
$("#elevationProfile").dialog({
|
|
title: "Elevation profile", resizable: false, width: window.width,
|
|
close: closeElevationProfile,
|
|
position: {my: "left top", at: "left+20 bottom-340", of: window, collision: "fit"}
|
|
});
|
|
|
|
// prevent river graphs from showing rivers as flowing uphill
|
|
var slope = 0;
|
|
if (isRiver) {
|
|
if (pack.cells.h[data[0]] < pack.cells.h[data[data.length-1]]) {
|
|
slope = 1; // up-hill
|
|
} else if (pack.cells.h[data[0]] > pack.cells.h[data[data.length-1]]) {
|
|
slope = -1; // down-hill
|
|
}
|
|
}
|
|
|
|
// points is a chart (x going right, y going up) as opposed to the screen (x going right, y going down)
|
|
const points = [];
|
|
var prevB=0, prevH=-1, i=0, j=0, cell=0, b=0, biome, ma=0, mi=100, h=0;
|
|
for (var i=0; i<data.length; i++) {
|
|
cell = data[i];
|
|
|
|
h = pack.cells.h[cell];
|
|
if (h < 20) h = 20;
|
|
|
|
biome = pack.cells.biome[cell];
|
|
|
|
// check for river up-hill
|
|
if (prevH != -1) {
|
|
if (isRiver) {
|
|
if (slope == 1 && h < prevH) h = prevH;
|
|
else if (slope == 0 && h != prevH) h = prevH;
|
|
else if (slope == -1 && h > prevH) h = prevH;
|
|
}
|
|
}
|
|
prevH = h;
|
|
// river up-hill checks stop here
|
|
|
|
mi = Math.min(mi, h);
|
|
ma = Math.max(ma, h);
|
|
|
|
b = pack.cells.burg[cell];
|
|
if (b == prevB) b = 0;
|
|
else prevB = b;
|
|
points.push({x:j, y:h, b:b, biome:biome});
|
|
j++;
|
|
}
|
|
|
|
const w = window.innerWidth-280;
|
|
h = 100;
|
|
|
|
const xOffset = 100;
|
|
const yOffset = 80;
|
|
|
|
const chart = d3.select("#elevationGraph").append("svg").attr("width", w+200).attr("height", h+yOffset+60).attr("id", "elevationGraph");
|
|
// arrow-head definition
|
|
chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2").append("path").attr("d", "M0,0 V4 L2,2 Z");
|
|
|
|
const skyGradient = d3.scaleSequential(d3.interpolateBlues);
|
|
const skydef = chart.select("defs").append("linearGradient").attr("id", "skydef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
|
|
skydef.append("stop").attr("offset", "0%").attr("style", "stop-color:"+skyGradient(0.90)+";stop-opacity:1");
|
|
skydef.append("stop").attr("offset", "100%").attr("style", "stop-color:"+skyGradient(0.25)+";stop-opacity:1");
|
|
const sky = chart.append("g").append("rect").attr("y", yOffset).attr("x", xOffset).attr("width", w).attr("height", h).attr("fill", "url(#skydef)");
|
|
|
|
var landdef = chart.select("defs").append("linearGradient").attr("id", "landdef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
|
|
landdef.append("stop").attr("offset", "0%").attr("style", "stop-color:rgb(224,255,224);stop-opacity:1");
|
|
// landdef.append("stop").attr("offset", "0%").attr("style", "stop-color:rgb(0,192,64);stop-opacity:1");
|
|
landdef.append("stop").attr("offset", "100%").attr("style", "stop-color:rgb(0,192,64);stop-opacity:1");
|
|
|
|
var xscale = d3.scaleLinear().domain([0, points.length]).range([0, w]);
|
|
var yscale = d3.scaleLinear().domain([0, 100]).range([h, 0]);
|
|
|
|
// complete the polygon
|
|
points.push({x:points[points.length-1].x+1, y:points[points.length-1].y, biome:points[points.length-1].biome});
|
|
points.push({x:points[points.length-1].x, y:0, biome:points[points.length-1].biome});
|
|
points.push({x:0, y:0, biome:points[points.length-1].biome});
|
|
points.push({x:0, y:points[0].y, biome:points[points.length-1].biome});
|
|
|
|
// land
|
|
chart.append("g").selectAll("polygon").data([points]).enter().append("polygon").attr("fill", "url(#landdef)").attr("points", function(d) {
|
|
return d.map(function(d) {
|
|
return [xscale(d.x)+xOffset,yscale(d.y)+yOffset].join(",");
|
|
}).join(" ");
|
|
});
|
|
|
|
points.pop();
|
|
points.pop();
|
|
points.pop();
|
|
|
|
// biome / heights
|
|
const g = chart.append("g");
|
|
for(var k=0; k<points.length-1; k++) {
|
|
const x = xscale(points[k].x)+xOffset;
|
|
const y = yOffset+120;
|
|
const c = biomesData.color[points[k].biome];
|
|
const dataTip = biomesData.name[points[k].biome]+" (" + getHeight(points[k].y)+")";
|
|
|
|
g.append("rect").attr("stroke", c).attr("fill", c).attr("x", x).attr("y", y).attr("width", xscale(1)).attr("height", 40).attr("data-tip", dataTip);
|
|
}
|
|
points.pop(); // remove the fake last section we added
|
|
|
|
// y-axis labels for starting and ending heights
|
|
chart.append("text").attr("id", "epy0").attr("x", xOffset-10).attr("y", h-points[0].y + yOffset).attr("text-anchor", "end");
|
|
document.getElementById("epy0").innerHTML = getHeight(points[0].y);
|
|
chart.append("text").attr("id", "epy1").attr("x", w+100).attr("y", h-points[points.length-1].y + yOffset).attr("text-anchor", "start");
|
|
document.getElementById("epy1").innerHTML = getHeight(points[points.length-1].y);
|
|
|
|
// y-axis labels for minimum and maximum heights (if not too close to start/end heights)
|
|
if (Math.abs(ma - points[0].y) > 3 && Math.abs(ma - points[points.length-1].y) > 3) {
|
|
chart.append("text").attr("id", "epy2").attr("x", xOffset-10).attr("y", h-ma + yOffset).attr("text-anchor", "end");
|
|
document.getElementById("epy2").innerHTML = getHeight(ma);
|
|
}
|
|
if (Math.abs(mi - points[0].y) > 3 && Math.abs(mi - points[points.length-1].y) > 3) {
|
|
chart.append("text").attr("id", "epy3").attr("x", xOffset-10).attr("y", h-mi + yOffset).attr("text-anchor", "end");
|
|
document.getElementById("epy3").innerHTML = getHeight(mi);
|
|
}
|
|
|
|
// x-axis label for start, quarter, halfway and three-quarter, and end
|
|
chart.append("text").attr("id", "epx1").attr("x", xOffset-20).attr("y", h+yOffset-5).attr("text-anchor", "middle");
|
|
chart.append("text").attr("id", "epx2").attr("x", w / 4 + xOffset).attr("y", h+yOffset-5).attr("text-anchor", "middle");
|
|
chart.append("text").attr("id", "epx3").attr("x", w / 2 + xOffset).attr("y", h+yOffset-5).attr("text-anchor", "middle");
|
|
chart.append("text").attr("id", "epx4").attr("x", w / 4*3 + xOffset).attr("y", h+yOffset-5).attr("text-anchor", "middle");
|
|
chart.append("text").attr("id", "epx5").attr("x", w + xOffset + 10).attr("y", h+yOffset-5).attr("text-anchor", "middle");
|
|
document.getElementById("epx1").innerHTML = "0 " + distanceUnitInput.value;
|
|
document.getElementById("epx2").innerHTML = rn(routeLen / 4) + " " + distanceUnitInput.value;
|
|
document.getElementById("epx3").innerHTML = rn(routeLen / 2) + " " + distanceUnitInput.value;
|
|
document.getElementById("epx4").innerHTML = rn(routeLen / 4*3) + " " + distanceUnitInput.value;
|
|
document.getElementById("epx5").innerHTML = rn(routeLen) + " " + distanceUnitInput.value;
|
|
|
|
chart.append("path").attr("id", "epx12").attr("d", "M" + (w / 4 + xOffset).toString() + "," + (h+yOffset-15).toString() + "L" + (w / 4 + xOffset).toString() + ",0").attr("stroke", "lightgray").attr("stroke-width", "1");
|
|
chart.append("path").attr("id", "epx13").attr("d", "M" + (w / 2 + xOffset).toString() + "," + (h+yOffset-15).toString() + "L" + (w / 2 + xOffset).toString() + ",0").attr("stroke", "lightgray").attr("stroke-width", "1");
|
|
chart.append("path").attr("id", "epx14").attr("d", "M" + (w / 4*3 + xOffset).toString() + "," + (h+yOffset-15).toString() + "L" + (w / 4*3 + xOffset).toString() + ",0").attr("stroke", "lightgray").attr("stroke-width", "1");
|
|
|
|
// draw city labels - try to avoid putting labels over one another
|
|
var y1 = 0;
|
|
var add = 15;
|
|
points.forEach(function(p) {
|
|
if (p.b > 0) {
|
|
var x1 = p.x * w / points.length + xOffset;
|
|
y1+=add;
|
|
if (y1 >= yOffset) { y1 = add; }
|
|
var d1 = 0;
|
|
|
|
// burg name
|
|
chart.append("text").attr("id", "ep" + p.b).attr("x", x1).attr("y", y1).attr("text-anchor", "middle");
|
|
document.getElementById("ep" + p.b).innerHTML = pack.burgs[p.b].name;
|
|
|
|
// arrow from burg name to graph line
|
|
chart.append("path").attr("id", "eparrow" + p.b).attr("d", "M" + x1.toString() + "," + (y1).toString() + "L" + x1.toString() + "," + parseInt(h-p.y-3+yOffset).toString()).attr("stroke", "black").attr("stroke-width", "1").attr("marker-end", "url(#arrowhead)");
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|