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

Separated height gradient and biome/height data

Browse source
This commit is contained in:
Evolvedexperiment 2020-05-11 14:12:47 +00:00
parent 418d364259
commit 41ccb50e4b
1 changed files with 30 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

56
modules/ui/elevation-profile.js
View file

@ -33,7 +33,7 @@ function showElevationProfile(data, routeLen, isRiver) {
$("#elevationProfile").dialog({ $("#elevationProfile").dialog({
title: "Elevation profile", resizable: false, width: window.width, title: "Elevation profile", resizable: false, width: window.width,
close: closeElevationProfile, close: closeElevationProfile,
position: {my: "left top", at: "left+20 bottom-240", of: window, collision: "fit"} position: {my: "left top", at: "left+20 bottom-340", of: window, collision: "fit"}
}); });
// prevent river graphs from showing rivers as flowing uphill // prevent river graphs from showing rivers as flowing uphill
@ -84,7 +84,7 @@ function showElevationProfile(data, routeLen, isRiver) {
const xOffset = 100; const xOffset = 100;
const yOffset = 80; const yOffset = 80;
const chart = d3.select("#elevationGraph").append("svg").attr("width", w+200).attr("height", h+yOffset).attr("id", "elevationGraph"); const chart = d3.select("#elevationGraph").append("svg").attr("width", w+200).attr("height", h+yOffset+60).attr("id", "elevationGraph");
// arrow-head definition // 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"); 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");
@ -94,38 +94,42 @@ function showElevationProfile(data, routeLen, isRiver) {
skydef.append("stop").attr("offset", "100%").attr("style", "stop-color:"+skyGradient(0.25)+";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)"); const sky = chart.append("g").append("rect").attr("y", yOffset).attr("x", xOffset).attr("width", w).attr("height", h).attr("fill", "url(#skydef)");
// biome colors var landdef = chart.select("defs").append("linearGradient").attr("id", "landdef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
for (var k=0; k<biomesData.color.length; k++) { landdef.append("stop").attr("offset", "0%").attr("style", "stop-color:rgb(224,255,224);stop-opacity:1");
var grad = chart.select("defs").append("linearGradient").attr("id", "grad"+k).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%"); // landdef.append("stop").attr("offset", "0%").attr("style", "stop-color:rgb(0,192,64);stop-opacity:1");
grad.append("stop").attr("offset", "0%").attr("style", "stop-color:"+biomesData.color[k]+";stop-opacity:1"); landdef.append("stop").attr("offset", "100%").attr("style", "stop-color:rgb(0,192,64);stop-opacity:1");
grad.append("stop").attr("offset", "100%").attr("style", "stop-color:"+biomesData.color[k]+";stop-opacity:1");
}
var xscale = d3.scaleLinear().domain([0, points.length]).range([0, w]); var xscale = d3.scaleLinear().domain([0, points.length]).range([0, w]);
var yscale = d3.scaleLinear().domain([0, 100]).range([h, 0]); 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+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});
var poly=[]; // land
for(var k=0; k<points.length-1; k++) { chart.append("g").selectAll("polygon").data([points]).enter().append("polygon").attr("fill", "url(#landdef)").attr("points", function(d) {
poly=[]; return d.map(function(d) {
return [xscale(d.x)+xOffset,yscale(d.y)+yOffset].join(",");
}).join(" ");
});
const b=points[k].biome;
poly.push({x:points[k].x, y:0});
poly.push({x:points[k].x, y:points[k].y});
poly.push({x:points[k+1].x, y:points[k+1].y});
poly.push({x:points[k+1].x, y:0});
poly.push({x:points[k].x, y:0});
const he = points[k].y;
chart.append("g").selectAll("polygon").data([poly]).enter().append("polygon").attr("data-tip", biomesData.name[b]+" (" + getHeight(he)+")").attr("stroke", biomesData.color[b]).attr("fill", "url(#grad"+b+")").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();
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 // 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"); chart.append("text").attr("id", "epy0").attr("x", xOffset-10).attr("y", h-points[0].y + yOffset).attr("text-anchor", "end");