Random Distribution in Javascript

Full source code

core.js


var ctx = null;

var tileW, tileH;
var canvasW, canvasH;

var currentSecond = 0, frameCount = 0, framesLastSecond = 0;
var gameTime = 0, lastFrame = 0, lastUpdate = 0, updateDelay = 2000;

var paused		= false;
var stepFrame	= false;
var reset		= false;

var Map = {
	tiles	: [],
	width	: 60,
	height	: 40,
	
	generate : function(w, h)
	{
		this.tiles.splice(0, this.tiles.length);
		
		tileW = canvasW / w;
		tileH = canvasH / h;
		
		this.width = w;
		this.height = h;
		
		for(var i = 0; i < w*h; i++) { this.tiles.push(0); }
	}
};

window.onload = function()
{
	ctx = document.getElementById("display").getContext('2d');
	
	canvasW	= document.getElementById("display").width;
	canvasH	= document.getElementById("display").height;
	
	Map.generate(60, 40);
	
	document.addEventListener('keypress', function(e) {
		if(String.fromCharCode(e.which).toLowerCase()=='p') { paused = !paused; }
		else if(String.fromCharCode(e.which).toLowerCase()=='s' && paused) { stepFrame = true; }
		else if(String.fromCharCode(e.which).toLowerCase()=='r') { reset = true; }
		else if(String.fromCharCode(e.which).toLowerCase()=='d')
		{
			updateDelay+= 200;
			if(updateDelay>=2000) { updateDelay = 200; }
		}
	});
	
	requestAnimationFrame(updateDisplay);
};

function updateDisplay()
{
	if(ctx==null) { return; }
	
	ctx.fillStyle = "#000000";
	ctx.fillRect(0, 0, canvasW, canvasH);
	
	// Framerate & game time calculations
	var sec = Math.floor(Date.now()/1000);
	if(sec!=currentSecond)
	{
		currentSecond = sec;
		framesLastSecond = frameCount;
		frameCount = 1;
	}
	else { frameCount++; }
	
	var now = Date.now();
	gameTime+= (now-lastFrame);
	lastFrame = now;
	
	if(reset)
	{
		reset = false;
		
		Map.generate(Map.width, Map.height);
	}
	if((paused && stepFrame) || (!paused && updateDelay!=0 && (gameTime-lastUpdate)>=updateDelay))
	{
		updateCells();
		lastUpdate = gameTime;
		stepFrame = false;
	}
	
	for(var y = 0; y < Map.height; y++)
	{
		var ySum = y * Map.width;
		
		for(var x = 0; x < Map.width; x++)
		{
			var hex = Map.tiles[(ySum + x)].toString(16);
			hex = (hex.length==1 ? "0" + hex : hex);
			
			ctx.fillStyle = "#" + hex + hex + hex;
			
			ctx.fillRect(x*tileW, y*tileH, tileW, tileH);
		}
	}
	
	ctx.fillStyle = "#ffffff";
	ctx.textAlign = "end";
	ctx.fillText("Framerate: " + framesLastSecond +
		(paused ? " (Paused)" : ""), canvasW-50, 20);
	
	ctx.textAlign = "start";
	ctx.fillText("s to Step when paused, r to reset", 10, canvasH - 30);
	ctx.fillText("Auto step time: " + updateDelay + "ms (d to change)", 10, canvasH - 15);
	
	requestAnimationFrame(updateDisplay);
}

function updateCells()
{
	// 10% random update
	for(var i = 0; i < (Map.width * Map.height) / 10; i++)
	{
		var idx = Math.floor(Math.random() * Map.tiles.length);
		Map.tiles[idx]+= 10;
		if(Map.tiles[idx] > 255) { Map.tiles[idx] = 255; }
	}
}

Index.htm


<!DOCTYPE html>
<html>
<head>

</head>
<body>

	<canvas id="display" width="400" height="300"></canvas>
	
	<script type="text/javascript" src="core.js"></script>

</body>
</html>
Page loaded in 0.011 second(s).