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

feat: custom heightmap color scheme - add shceme on load

Browse source
This commit is contained in:
Azgaar 2023-11-17 03:46:28 +04:00
parent 2ce83643a6
commit 1fe553532d
4 changed files with 29 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

5
modules/ui/layers.js
View file

@ -297,11 +297,6 @@ function drawHeightmap() {
TIME && console.timeEnd("drawHeightmap");
}
function getColorScheme(scheme = "bright") {
if (scheme in heightmapColorSchemes) return heightmapColorSchemes[scheme];
throw new Error(`Unsupported color scheme: ${scheme}`);
}
function getColor(value, scheme = getColorScheme("bright")) {
return scheme(1 - (value < 20 ? value - 5 : value) / 100);
}

23
modules/ui/style.js
View file

@ -37,20 +37,37 @@ function editStyle(element, group) {
}, 1500);
}
// Color schemes
const heightmapColorSchemes = {
bright: d3.scaleSequential(d3.interpolateSpectral),
light: d3.scaleSequential(d3.interpolateRdYlGn),
natural: d3.scaleSequential(d3.interpolateRgbBasis(["white", "#EEEECC", "tan", "green", "teal"])),
green: d3.scaleSequential(d3.interpolateGreens),
olive: d3.scaleSequential(d3.interpolateRgbBasis(["#ffffff", "#cea48d", "#d5b085", "#0c2c19", "#151320"])),
livid: d3.scaleSequential(d3.interpolateRgbBasis(["#BBBBDD", "#2A3440", "#17343B", "#0A1E24"])),
monochrome: d3.scaleSequential(d3.interpolateGreys)
};
// add color schemes to the lists
// add default color schemes to the list of options
byId("styleHeightmapScheme").innerHTML = Object.keys(heightmapColorSchemes)
.map(scheme => `<option value="${scheme}">${scheme}</option>`)
.join("");
function addCustomColorScheme(scheme) {
const stops = scheme.split(",");
heightmapColorSchemes[scheme] = d3.scaleSequential(d3.interpolateRgbBasis(stops));
byId("styleHeightmapScheme").options.add(new Option(scheme, scheme, false, true));
}
function getColorScheme(scheme = "bright") {
if (!(scheme in heightmapColorSchemes)) {
const colors = scheme.split(",");
heightmapColorSchemes[scheme] = d3.scaleSequential(d3.interpolateRgbBasis(colors));
}
return heightmapColorSchemes[scheme];
}
// Toggle style sections on element select
styleElementSelect.addEventListener("change", selectStyleElement);
function selectStyleElement() {
@ -575,9 +592,7 @@ openCreateHeightmapSchemeButton.addEventListener("click", function () {
const stops = openCreateHeightmapSchemeButton.dataset.stops;
if (stops in heightmapColorSchemes) return tip("This scheme already exists", false, "error");
heightmapColorSchemes[stops] = d3.scaleSequential(d3.interpolateRgbBasis(stops.split(",")));
byId("styleHeightmapScheme").options.add(new Option(stops, stops, false, true));
addCustomColorScheme(stops);
terrs.attr("scheme", stops);
drawHeightmap();

4
modules/ui/stylePresets.js
View file

@ -97,9 +97,7 @@ function applyStyle(style) {
// add custom heightmap color scheme
if (selector === "#terrs" && attribute === "scheme" && !(value in heightmapColorSchemes)) {
const colors = value.split(",");
heightmapColorSchemes[value] = d3.scaleSequential(d3.interpolateRgbBasis(colors));
document.getElementById("styleHeightmapScheme").options.add(new Option(value, value));
addCustomColorScheme(value);
}
}
}