JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Seed: <input type='number' id='select_seed' min='1' max='65530' value='12345'> 
<!-- Tile size: <input type='number' id='select_tileSize' min='2' max='10' value='3'> -->
Chunks wide: <input type='number' id='select_mapWidth' min='1' max='6' value='3'> 
Chunks high: <input type='number' id='select_mapHeight' min='1' max='6' value='3'> 
Scale: <input type='number' id='select_scale' min='5' max='40' value='15'> 
<br>
Biome: <select id='select_biome'>
    <option value='1'>Islands</option>
    <option value='2'>Desert</option>
    <option value='3'>Forest</option>
    <option value='4'>Mountains</option>
    <option value='5'>Tundra</option>
    <option value='6'>Jungle</option>
    <option value='7'>Volcano</option>
    <option value='8'>Ice Cave</option>
    <option value='9'>Sea Cave</option>
    <option value='10'>Underwater</option>
</select> 
Method: <select id='select_method'>
    <option value='1' selected>Simplex</option>
    <option value='2'>Perlin</option>
</select> 
Shape: <select id='select_shape'>
    <option value='0' selected>Normal</option>
    <option value='1'>Island/Peak</option>
    <option value='2'>Lake/Crater</option>
    <option value='3'>Island Ring</option>
    <option value='4'>Lake Ring</option>
</select>  
ShapeMod: <input id='select_shapeMod' type='number' min='1' max='20' value='5'>
Turbulence: <input id='select_turbulence' type='number' min='0' max='40' value='30'>
Show values? <select id='select_showInfo'>
    <option value='1'>Yes</option>
    <option value='0' selected>No</option>
</select>
Buildings? <select id='select_showBuildings'>
    <option value='1' selected>Yes</option>
    <option value='0'>No</option>
</select>

<br><button id='output_button'>Output settings</button>
<div id='output_settings'></div>

<button id='generate_button'>Generate</button> <button id='randomise_button'>Randomise!</button> Current seed: <span id='seed_test'></span><br>

<canvas id='canvas'></canvas>

<p><span id='render_time'></span></p>
<div...

CSS

canvas {
  box-shadow: 0 0 10px #777;
  max-width: 800px;
  max-height: 800px;
  margin: 15px auto;
}
body {
  background-color: #eee;
}
#info {
    font-family: monospace;
    border: 1px solid grey;
    padding: 15px;
}

input {max-width: 50px;}

JavaScript

/*
* Perlin and simplex noise. 
* Edited from code by josephg on github
*/
(function(global){
    var module = global.noise = {};

    function Grad(x, y, z){
        this.x = x; this.y = y; this.z = z;
    }
  
    Grad.prototype.dot2 = function(x, y){
        return this.x*x + this.y*y;
    };

    var grad3 = [
        new Grad(1,1,0),new Grad(-1,1,0),new Grad(1,-1,0),new Grad(-1,-1,0),
        new Grad(1,0,1),new Grad(-1,0,1),new Grad(1,0,-1),new Grad(-1,0,-1),
        new Grad(0,1,1),new Grad(0,-1,1),new Grad(0,1,-1),new Grad(0,-1,-1)
    ];

    var p = [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];
  
    // To remove the need for index wrapping, double the permutation table length
    var perm = new Array(512);
    var gradP = new Array(512);

    // This isn't a very good seeding function, but it works ok. It supports 2^16
    // different seed values. Write something better if you need more seeds.
    module.seed = function(seed){
        if(seed > 0 && seed < 1){
            // Scale the seed out
            seed *= 65536;
        }

        seed =...