JSFiddle - React, Tailwind, and code Playground

by Kaeden

HTML

<div><span>Size:</span>
    <input id='mapSize' value="50"></input> <span>Seed Water%:</span>
    <input id='seedWater' value="56"></input> <span>Min Land:</span>
    <input id='minLand' value="3"></input> <span>Max Land:</span>
    <input id='maxLand' value="4"></input> <span>Runs:</span>
    <input id='runs' value="2"></input> <span>Scale:</span>
    <input id='scale' value="4"></input> <span>Factor:</span>
    <input id='factor' value="4"></input>
    <button id="generate">Generate</button>
    <button id="shrink">Shrink</button>
    <button id="grow">Grow</button>
    <button id="multiply">Multiply</button>
</div>
<div id="container">
    <div id="map"></div>
</div>
<div id="log"></div>

CSS

input {
    width: 40px;
}
button {
    margin-left:5px;
}
#container {
    overflow-x:auto;
    overflow-y:auto;
    position: absolute;
    top: 50px;
    bottom: 200px;
    left: 50px;
    right: 50px;
    border: 15px solid grey;
}
#log {
    position: absolute;
    bottom: 20px;
    height: 170px;
    left: 50px;
    right: 50px;
    overflow-y: auto;
    border: 2px solid grey;
}
#map {
    display: block;
    line-height: 0;
    /*overflow:visible;*/
    white-space: nowrap;
}

.point {
    /*height:4px;
    width:4px;*/
    margin:0;
    padding:0;
    border: 1px solid black;
    display:inline-block;
}
.water {
    background-color: blue;
}
.land {
    background-color: green;
}

JavaScript

// Cellular Automata Terrain Generator

log = function (text) {
    $('#log').append('<div>' + text + '</div>');
};

var rand = function (start, end) {
    var dif = end - start;
    var result = Math.floor((Math.random() * (dif + 1)) + Math.floor(start));
    //log("random result for range (" + start + " - " + end + ") is: " + result);
    return result;
};

var Map = function (theSize) {
    var size;
    var array = [];
    var LAND = 1;
    var WATER = 0;
    var minLand, maxLand, seedWater;
    var runs, scale, factor;

    var generate = function (n, scaleN, minLandN, maxLandN, seedWaterN, runsN, factorN) {
        scale = scaleN;
        minLand = minLandN;
        maxLand = maxLandN;
        seedWater = seedWaterN;
        runs = runsN;
        factor = factorN;
        //                log("minLand=" + minLand + ",maxLand=" + maxLand + ",seedWater=" + seedWater + ",size=" + n);
        init(n);
    };

    var multiply = function () {
        multiplyHelper();
        render();
    };

    var multiplyHelper = function () {
        var newArray = [];
        for (var i = 0; i < size * factor; i++) {
            newArray[i] = [];
        }
        for (var x = 0; x < size; x++) {

            for (var y = 0; y < size; y++) {
                var tileCount = analyzeTile(x, y);
                //log('land=' + tileCount.landCount + ",water=" + tileCount.waterCount);



                for (var x2 = 0; x2 < factor; x2++) {
                    //newArray[x * factor + x2] = [];
                    for (var y2 = 0; y2 < factor; y2++) {
                        newArray[x * factor + x2][y * factor + y2] = array[x][y];
                        //log("x,y(" + x + "," + y + ")[" + array[x][y] + "] newArray node: (" + (x * factor + x2) + ", " + (y * factor + y2) + ")");
                    }
                }
                //log("block done");

                //newArray[x][y] = tileCount.waterCount ? (rand(0, 100) >= 90 ? array[x][y] : WATER) : LAND;
            }
 ...