Bump mapping heightmap

by Gwyn Milcote

HTML

Size: <input type='number' id='map_size' min='16' max='128' value='64'> Seed: <input type='number' id='map_seed' min='1' max='65535' value='12345'> Roughness: <input type='number' id='map_roughness' min='1' max='50' value='5'> Tile px: <input type='number' id='tile_size' min='2' max='10' value='3'> Environs: <select id='map_env'>
    <option value='1'>Islands</option>
    <option value='2'>Desert</option>
    <option value='3'>Jungle</option>
    <option value='4'>Ocean</option>
    <option value='5'>Taiga</option>
</select>
<br><button id='generate'>Generate</button><br>

<canvas id="canvas"></canvas>
<br><div id='map_holder'></div>

CSS

#canvas, #map_holder {
    margin: 15px;
}

#map_size, #map_seed, #map_roughness, #tile_size {
    width: 50px;
}

JavaScript

// Setup the map array for use
var map = [];
var mapD = 64; // 128 with 10 roughness...
var roughness = 5; // ... or 64 with 5, same.

// ??
var unitSize = 1;

var tile_size = 3;
var env = 1;

var seed = 12345;


var canvas = document.getElementById("canvas");
canvas.width = mapD * tile_size;
canvas.height = mapD * tile_size;
var ctx = canvas.getContext("2d");

clearMap();
startDisplacement();



$("#generate").click(function(){
    generateMap();
});


function generateMap(){
    mapD = Number( $("#map_size").val() );
    roughness = Number( $("#map_roughness").val() );
    env = Number( $("#map_env").val() );
    tile_size = Number( $("#tile_size").val() );
    seed = Number( $("#map_seed").val() );
    
    canvas.width = mapD * tile_size;
    canvas.height = mapD * tile_size;
    ctx = canvas.getContext("2d");
    
    clearMap();
    startDisplacement();
}

function clearMap(){
    map = [];
    for (var x = 0; x < mapD + 1; x++){
        for (var y = 0; y < mapD + 1; y++){
            map[x] = [];
        }
    }
}




// Starts off the map generation, seeds the first 4 corners
function startDisplacement(){
  var x = mapD,
    y = mapD,
    tR, tL, t, bR, bL, b, r, l, center;

  // top left
  map[0][0] = Math.random(1.0);
  //map[0][0] = 1 / seed;
  tL = map[0][0];

  // bottom left
  map[0][mapD] = Math.random(1.0);
  //map[0][mapD] = 1 / seed;
  bL = map[0][mapD];

  // top right
  map[mapD][0] = Math.random(1.0);
  //map[mapD][0] = 1 / seed;
  tR = map[mapD][0];

  // bottom right
  map[mapD][mapD] = Math.random(1.0);
  //map[mapD][mapD] = 1 / seed;
  bR = map[mapD][mapD];

  // Center
  map[mapD / 2][mapD / 2] = map[0][0] + map[0][mapD] + map[mapD][0] + map[mapD][mapD] / 4;
  map[mapD / 2][mapD / 2] = normalize(map[mapD / 2][mapD / 2]);
  center = map[mapD / 2][mapD / 2];

  map[mapD / 2][mapD] = bL + bR + center / 3;
  map[mapD / 2][0] = tL + tR + center / 3;
  map[mapD][mapD / 2] = tR + bR + center / 3;
  map[0][mapD / 2] = tL + bL + center / 3;

  //...