predefined-heightmaps

heightmaps/import-rules.txt

@@ -0,0 +1,8 @@
+To get heightmap with correct height scale:
+1. Open tangrams.github.io
+2. Toggle off auto-exposure
+3. Set max elevation to 2000
+4. Set min elevation to -500
+5. Find region you like
+6. Render image
+7. Optionally rescale image to a smaller size (e.g. 500x300px) as high resolution is not used

main.js

@@ -253,7 +253,7 @@ function checkLoadParameters() {
 
 async function generateMapOnLoad() {
   await applyStyleOnLoad(); // apply previously selected default or custom style
-  generate(); // generate map
+  await generate(); // generate map
   focusOn(); // based on searchParams focus on point, cell or burg from MFCG
   applyPreset(); // apply saved layers preset
 }
@@ -632,7 +632,7 @@ void (function addDragToUpload() {
   });
 })();
 
-function generate() {
+async function generate() {
   try {
     const timeStart = performance.now();
     invokeActiveZooming();
@@ -643,7 +643,7 @@ function generate() {
     placePoints();
     calculateVoronoi(grid, grid.points);
     drawScaleBar();
-    HeightmapGenerator.generate();
+    await HeightmapGenerator.generate();
     markFeatures();
     markupGridOcean();
     addLakesInDeepDepressions();
@@ -929,6 +929,9 @@ function defineMapSize() {
 
   function getSizeAndLatitude() {
     const template = document.getElementById("templateInput").value; // heightmap template
+
+    if (template === "europe") return [40, 50];
+
     const part = grid.features.some(f => f.land && f.border); // if land goes over map borders
     const max = part ? 80 : 100; // max size
     const lat = () => gauss(P(0.5) ? 40 : 60, 15, 25, 75); // latitude shift

modules/heightmap-generator.js

@@ -3,13 +3,43 @@
 window.HeightmapGenerator = (function () {
   let cells, p;
 
-  const generate = function () {
-    TIME && console.time("generateHeightmap");
+  const generate = async function () {
     cells = grid.cells;
     p = grid.points;
     cells.h = new Uint8Array(grid.points.length);
 
-    const template = document.getElementById("templateInput").value;
+    const input = document.getElementById("templateInput");
+    const type = input.querySelector(`[value=${input.value}]`).parentElement.label;
+
+    if (type === "Specific") {
+      // pre-defined heightmap
+      TIME && console.time("defineHeightmap");
+      return new Promise(resolve => {
+        // create canvas where 1px correcponds to a cell
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        const {cellsX, cellsY} = grid;
+        canvas.width = cellsX;
+        canvas.height = cellsY;
+
+        // load heightmap into image and render to canvas
+        const img = new Image();
+        img.src = `./heightmaps/${input.value}.png`;
+        img.onload = function () {
+          ctx.drawImage(img, 0, 0, cellsX, cellsY);
+          const imageData = ctx.getImageData(0, 0, cellsX, cellsY);
+          assignColorsToHeight(imageData.data);
+          canvas.remove();
+          img.remove();
+          TIME && console.timeEnd("defineHeightmap");
+          resolve();
+        };
+      });
+    }
+
+    // heightmap template
+    TIME && console.time("generateHeightmap");
+    const template = input.value;
     const templateString = HeightmapTemplates[template];
     const steps = templateString.split("\n");
 
@@ -79,8 +109,8 @@ window.HeightmapGenerator = (function () {
 
     function addOneHill() {
       const change = new Uint8Array(cells.h.length);
-      let limit = 0,
-        start;
+      let limit = 0;
+      let start;
       let h = lim(getNumberInRange(height));
 
       do {
@@ -410,5 +440,13 @@ window.HeightmapGenerator = (function () {
     return rand(min * length, max * length);
   }
 
+  function assignColorsToHeight(imageData) {
+    for (let i = 0; i < cells.i.length; i++) {
+      const lightness = imageData[i * 4] / 255;
+      const powered = lightness < 0.2 ? lightness : 0.2 + (lightness - 0.2) ** 0.8;
+      cells.h[i] = minmax(rn(powered * 100), 0, 100);
+    }
+  }
+
   return {generate, addHill, addRange, addTrough, addStrait, addPit, smooth, modify};
 })();

modules/ui/heightmap-editor.js

@@ -913,11 +913,9 @@ function editHeightmap() {
 
     function uploadTemplate(dataLoaded) {
       const steps = dataLoaded.split("\r\n");
-      if (!steps.length) {
-        tip("Cannot parse the template, please check the file", false, "error");
-        return;
-      }
+      if (!steps.length) return tip("Cannot parse the template, please check the file", false, "error");
       templateBody.innerHTML = "";
+
       for (const s of steps) {
         const step = s.split(" ");
         if (step.length !== 5) {