JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Was pattern generator. Now testing heightmaps.

<div id='map-container'>
    <canvas id='map-canvas'></canvas>
</div>

<hr>

<b>Biome:</b> 
<select id='select-biome'>
    <option value='1'>World Map (full palette)</option>
    <option value='2'>Forest (umm)</option>
    <option value='3'>Desert (little water)</option>
    <option value='4'>Ocean (mostly water, some small islands)</option>
</select>
<br>
<b>Seed:</b> <input id='select-seed' type='number' min='1' max='65000' value='1'> 
<b>Type:</b> <select id='select-noise'>
    <option value='1'>Perlin</option>
    <option value='2'>Simplex</option>
</select> 
<b>Inverse?</b> <select id='select-inverse'>
    <option value='1'>No</option>
    <option value='2'>Yes</option>
</select>
<br>
<b>Freq (map zoom):</b> <input id='select-freq' type='number' step='0.1' min='0.2' max='1' value='0.5'> <b>FreqCo (smoothing):</b> <input id='select-freqco' type='number' step='0.1' min='0.3' max='0.5' value='0.4'>
<b>AmpCo (detail):</b> <input id='select-ampco' type='number' step='0.1' min='0.5' max='0.7' value='0.6'>
<br>
Rivers? <select id='select-rivers'>
    <option value='1'>No</option>
    <option value='2'>Yes</option>
</select>
Landmarks? <select id='select-landmarks'>
    <option value='1'>No</option>
    <option value='2'>Yes (1)</option>
    <option value='3'>Yes (2)</option>
    <option value='4'>Yes (3)</option>
</select>
<br>
<b>Season:</b> <select id='select-season'>
    <option value='1'>Spring</option>
    <option value='2'>Summer</option>
    <option value='3'>Autumn</option>
    <option value='4'>Winter</option>
</select> 
<b>Shadow?</b> <select id='select-shadow'>
    <option value='1'>No</option>
    <option value='2'>Yes</option>
</select>
<br>
<b>Height:</b> <input id='select-height' type='number' min='100' max='300' value='100'> 
<b>Width:</b> <input id='select-width' type='number' min='100' max='300' value='100'>
<br>
<b>Pixel zoom:</b> <input id='select-zoom' type='number' min='1' max='4' value='3'>...

CSS

#map-container {
    background-color: #eee;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

#map-container #map-canvas {
    border: 1px solid black;
}

input[type = "number"] {
    width: 50px;
}

JavaScript

/*
* Edited from ogus/noise-map on github.
* https://github.com/ogus/noise-map
*/

var TABLE = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,190,6,148,
    247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,174,20,125,136,171,168,68,175,74,
    165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,
    25,63,161,1,216,80,73,209,76,132,187,208,89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,
    226,250,124,123,5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,248,
    152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,178,185,112,104,218,246,
    97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,14,239,107,49,192,214,31,181,199,106,157,184,
    84,204,176,115,121,50,45,127,4,150,254,138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];

var SIMPLEX_SKEW = 0.5 * (Math.sqrt(3) - 1);
var SIMPLEX_UNSKEW = (3 - Math.sqrt(3)) / 6;

  // Permutation, gradient
var permTable = [];
var gradTable = [
    {x: 1, y: 1}, {x: -1, y: 1}, {x: 1, y: -1}, {x: -1, y: -1},
    {x: Math.SQRT1_2, y: Math.SQRT1_2}, {x: -Math.SQRT1_2, y: Math.SQRT1_2},
    {x: Math.SQRT1_2, y: -Math.SQRT1_2}, {x: -Math.SQRT1_2, y: -Math.SQRT1_2}
  ];

function generatePermutationTable(seed){
    permTable = new Array(512);
    var v = 0;
    for(var i = 0; i < 256; i++){
        if(i & 1){
            v = TABLE[i] ^ (seed & 255);
        }else{
            v = TABLE[i] ^ ((seed>>8) & 255);
        }
        permTable[i] = permTable[i + 256] = v;
    }
}

  /**
   * Create noise values for a 2D map by adding successive noise octaves
   * at different amplitudes and frequencies.
   * The result is a 1D Array of size width*height
   * @param width Width of the map
   * @param height Height of the map
   * @param...