JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<canvas id="map" width="512" height="512" ></canvas>

CSS

canvas:hover {width:200%; height:200%;margin-left:-256px;margin-top:-256px;}

JavaScript

var gettime = new Date().getTime();
var random = new RNG(gettime),
    mapsize = 512,
    maxheight = 250,
    minheight = 100,
    altitude = 50,
    scale = mapsize / (maxheight - minheight) + 1;

function RNG(seed) {
    //Standard PRNG values
    var m = 0x100000000,
        a = 1103515245,
        c = 12345,
        state = seed;

    //This goes to the next value in the "seed"
    this.nextInt = function () {
        state = (a * state + c) % m;
        return state;
    }

    //This returns the value from each position, usually something like: 0.10751..., then calls the next value with nextInt
    this.nextFloat = function () {
        return this.nextInt() / (m - 1);
    }

}

//Let's set up all the tiles, and make them set to 0 to start (they need values so we can subdivide from them)
var tile = [];
for (var x = 0; x < mapsize + 1; x++) {
    tile[x] = tile[x] || {};
    for (var y = 0; y < mapsize + 1; y++) {
        //Give a border so there's always deep water
        if (x < 19|| y < 19 || x > mapsize - 19 || y > mapsize - 19) {
            tile[x][y] = -1;
        } else if (x == 64 && y == 64 || x == 192 && y == 192 || x == 192 && y == 64 || x == 64 && y == 192) {
            tile[x][y] = 60;
        } else {
            tile[x][y] = 0;
        }
    }
}

//We need to define the step to the size of the map so that we can generate every 2nd tile, we will use subdivision to find the rest
var step = mapsize;

while (step > 1) {
    for (var x = 0; x < mapsize; x += step) {
        for (var y = 0; y < mapsize; y += step) {
            subdivide(x, y, x + step, y + step);
        }
    }
    step = Math.round(step * 0.5);
}

//Do some magic shit!, skip midpoints if the sources have -1 (water edges)
function subdivide(x0, y0, x1, y1) {
    var xn = Math.round((x0 + x1) * 0.5),
        yn = Math.round((y0 + y1) * 0.5);

    if (tile[x0][y0] != -1 && tile[x1][y0] != -1) {
        tile[xn][y0] = getheight(tile[x0][y0], tile[x1][y0], x1 - x0);
    }

    if...