Easy Noise
HTML
<canvas id='canvas'></canvas>
JavaScript
function randInt(low, high) {
return ~~(Math.random() * (high - low)) + low;
}
var size = 100;
var map = [];
for (var i = 0; i < size; i++) {
map.push([]);
for (var j = 0; j < size; j++) {
map[i].push(0);
}
}
for (var i = 0; i < size; i++) {
for (var j = 0; j < size; j++) {
map[i][j] = randInt(0, 255);
}
}
var Renderer = {
canvas: null,
ctx: null,
size: 512,
scale: 0,
Initialize: function () {
this.canvas = document.getElementById('canvas');
this.canvas.width = this.size;
this.canvas.height = this.size;
this.ctx = canvas.getContext('2d');
this.scale = this.canvas.width / size;
},
Update: function () {
for (var y = 0; y < size; y++) {
for (var x = 0; x < size; x++) {
var tile = map[x][y];
var color = 'rgb(' + tile + ',' + tile + ',' + tile + ')';
this.ctx.fillStyle = color;
this.ctx.fillRect(x * this.scale, y * this.scale, this.scale, this.scale);
}
}
}
};
Renderer.Initialize();
Renderer.Update();