Random Landscape Generator
HTML
<canvas id='canvas'></canvas>
JavaScript
var Trees = {
map_size: 512,
data: [],
Generate: function () {
//Create array
for (var i = 0; i < this.map_size; i++) {
this.data.push([]);
for (var j = 0; j < this.map_size; j++) {
//Sky color
this.data[i].push(Renderer.colors[0]);
}
}
//Build one layer
for (var l = 0; l < Renderer.colors.length - 1; l++) {
var tree_count = Helpers.GetRandom(2, 2 * (4 - l));
for (var i = 0; i < tree_count; i++) {
var mid = (this.map_size / (tree_count + 1)) * (i + 1);
var start = {
x: Helpers.GetRandom(Math.max(0, mid - 10), Math.min(mid + 10, this.map_size - 1)),
y: Helpers.GetRandom(this.map_size * (0.05 * l), this.map_size * (0.15 * l))
};
var width = 1;
while (true) {
var left = Helpers.GetRandom(width * 0.25, width * 0.5);
var right = Helpers.GetRandom(width * 0.25, width * 0.5);
for (var j = start.x - left; j <= start.x + right; j++) {
if ((j < 0) || (j >= this.map_size)) continue;
this.data[~~j][~~start.y] = Renderer.colors[l + 1];
}
width += 0.7;
start.y++;
if (start.y >= this.map_size) break;
}
}
}
}
};
var Renderer = {
canvas: null,
ctx: null,
size: 512,
scale: 0,
colors: [
'#d3e5e5', //Sky
'#169952', //Back Trees (lightest)
'066a34',
'064a1f',
'03240d' //Front trees (darkest)
],
Initialize: function () {
this.canvas = document.getElementById('canvas');
this.canvas.width = this.size;
this.canvas.height = this.size;
this.ctx = canvas.getContext('2d');
this.scale =...