- ${name}
-
-
-
+ ${name}
+
+
+ `;
})
.join("");
const heightmapsHtml = heightmaps
.map(({id, name}) => {
+ drawPrecreatedHeightmap(id);
+
return /* html */ `
- ${name}
- ${name}
+ `;
})
.join("");
@@ -222,15 +233,19 @@ function drawHeights(heights) {
canvas.height = grid.cellsY;
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(grid.cellsX, grid.cellsY);
+ const scheme = getColorScheme();
+ const waterColor = scheme(1);
- heights.forEach((height, i) => {
- const h = height < 20 ? Math.max(height / 1.5, 0) : height;
- const v = (h / 100) * 255;
- imageData.data[i * 4] = v;
- imageData.data[i * 4 + 1] = v;
- imageData.data[i * 4 + 2] = v;
- imageData.data[i * 4 + 3] = 255;
- });
+ for (let i = 0; i < heights.length; i++) {
+ const color = heights[i] < 20 ? waterColor : scheme(1 - 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");
@@ -243,6 +258,13 @@ function generateHeightmap(id) {
return heights;
}
+async function drawPrecreatedHeightmap(id) {
+ const heights = await HeightmapGenerator.fromPrecreated(id);
+ const dataUrl = drawHeights(heights);
+ const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`);
+ article.querySelector("img").src = dataUrl;
+}
+
function regeneratePreview(article, id) {
const seed = generateSeed();
article.dataset.seed = seed;
diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js
index d8ec192d..71f2ea2d 100644
--- a/modules/heightmap-generator.js
+++ b/modules/heightmap-generator.js
@@ -24,7 +24,6 @@ window.HeightmapGenerator = (function () {
const fromPrecreated = id => {
return new Promise(resolve => {
- TIME && console.time("defineHeightmap");
// create canvas where 1px corresponts to a cell
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
@@ -38,31 +37,26 @@ window.HeightmapGenerator = (function () {
img.onload = () => {
ctx.drawImage(img, 0, 0, cellsX, cellsY);
const imageData = ctx.getImageData(0, 0, cellsX, cellsY);
- assignColorsToHeight(imageData.data);
+ const heights = getHeightsFromImageData(imageData.data);
canvas.remove();
img.remove();
-
- grid.cells.h = heights;
- cleanup();
- TIME && console.timeEnd("defineHeightmap");
- resolve();
+ resolve(heights);
};
});
};
const generate = async function () {
Math.random = aleaPRNG(seed);
- resetHeights();
- const id = byId("templateInput").value;
- if (HeightmapTemplates[id]) {
- TIME && console.time("generateHeightmap");
- grid.cells.h = fromTemplate(id);
- cleanup();
- TIME && console.timeEnd("generateHeightmap");
- } else {
- return fromPrecreated(id);
- }
+ TIME && console.time("defineHeightmap");
+ const id = byId("templateInput").value;
+ resetHeights();
+
+ const isTemplate = id in HeightmapTemplates;
+ grid.cells.h = isTemplate ? fromTemplate(id) : await fromPrecreated(id);
+
+ cleanup();
+ TIME && console.timeEnd("defineHeightmap");
};
function addStep(tool, a2, a3, a4, a5) {
@@ -491,13 +485,32 @@ window.HeightmapGenerator = (function () {
return rand(min * length, max * length);
}
- function assignColorsToHeight(imageData) {
- for (let i = 0; i < grid.cells.i.length; i++) {
+ function getHeightsFromImageData(imageData) {
+ const heights = new Uint8Array(grid.points.length);
+ for (let i = 0; i < heights.length; i++) {
const lightness = imageData[i * 4] / 255;
const powered = lightness < 0.2 ? lightness : 0.2 + (lightness - 0.2) ** 0.8;
heights[i] = minmax(Math.floor(powered * 100), 0, 100);
}
+ return heights;
}
- return {setHeights, resetHeights, getHeights, cleanup, generate, fromTemplate, addHill, addRange, addTrough, addStrait, addPit, smooth, modify, mask, invert};
+ return {
+ setHeights,
+ resetHeights,
+ getHeights,
+ cleanup,
+ generate,
+ fromTemplate,
+ fromPrecreated,
+ addHill,
+ addRange,
+ addTrough,
+ addStrait,
+ addPit,
+ smooth,
+ modify,
+ mask,
+ invert
+ };
})();
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 0ade51b7..f30004c1 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -1369,10 +1369,12 @@ function editHeightmap() {
grid.cells.h.forEach((height, i) => {
const h = height < 20 ? Math.max(height / 1.5, 0) : height;
const v = (h / 100) * 255;
- imageData.data[i * 4] = v;
- imageData.data[i * 4 + 1] = v;
- imageData.data[i * 4 + 2] = v;
- imageData.data[i * 4 + 3] = 255;
+
+ const n = i * 4;
+ imageData.data[n] = v;
+ imageData.data[n + 1] = v;
+ imageData.data[n + 2] = v;
+ imageData.data[n + 3] = 255;
});
ctx.putImageData(imageData, 0, 0);
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 3e53c2f2..9ff93af4 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -151,9 +151,9 @@ function toggleHeight(event) {
function drawHeightmap() {
TIME && console.time("drawHeightmap");
terrs.selectAll("*").remove();
- const cells = pack.cells,
- vertices = pack.vertices,
- n = cells.i.length;
+
+ const {cells, vertices} = pack;
+ const n = cells.i.length;
const used = new Uint8Array(cells.i.length);
const paths = new Array(101).fill("");
@@ -161,6 +161,7 @@ function drawHeightmap() {
const terracing = terrs.attr("terracing") / 10; // add additional shifted darker layer for pseudo-3d effect
const skip = +terrs.attr("skip") + 1;
const simplification = +terrs.attr("relax");
+
switch (+terrs.attr("curve")) {
case 0:
lineGen.curve(d3.curveBasisClosed);