mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 01:41:22 +01:00
Custom heightmap color scheme (#1013)
* feat: custom heightmap color scheme * feat: custom heightmap color scheme - add shceme on load --------- Co-authored-by: Azgaar <azgaar.fmg@yandex.com>
This commit is contained in:
parent
778bea15ee
commit
958a2c6ef8
10 changed files with 216 additions and 64 deletions
|
|
@ -325,7 +325,7 @@ function drawCellsValue(data) {
|
|||
.text(d => d);
|
||||
}
|
||||
|
||||
// helper function non-used for the generation
|
||||
// helper function non-used for the main generation
|
||||
function drawPolygons(data) {
|
||||
const max = d3.max(data),
|
||||
min = d3.min(data),
|
||||
|
|
@ -342,3 +342,28 @@ function drawPolygons(data) {
|
|||
.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");
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const ctx = canvas.getContext("2d");
|
||||
const imageData = ctx.createImageData(width, height);
|
||||
|
||||
const getHeight = height => (height < 20 ? (renderOcean ? height : 0) : height);
|
||||
|
||||
for (let i = 0; i < heights.length; i++) {
|
||||
const color = scheme(1 - getHeight(heights[i]) / 100);
|
||||
const {r, g, b} = d3.color(color);
|
||||
|
||||
const n = i * 4;
|
||||
imageData.data[n] = r;
|
||||
imageData.data[n + 1] = g;
|
||||
imageData.data[n + 2] = b;
|
||||
imageData.data[n + 3] = 255;
|
||||
}
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
return canvas.toDataURL("image/png");
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue