$(document).ready(drawGaussian);

var canvasContext;
var points;
var noise = 0;

function drawGaussian()
{	
	canvasContext = document.getElementById("gaussian-canvas").getContext("2d");
	
	document.getElementById("gaussian-canvas").onclick = cycleNoise;
	
	cycleNoise();
}

function cycleNoise()
{	
	canvasContext.clearRect(0, 0, 400, 400);
	 
	var m = Math.random() > .4
	var amount = Math.round(Math.random() * 20000);
	var size = Math.round(Math.random() * 3)+1;
	
	document.getElementById("particles").innerHTML = amount;
	document.getElementById("size").innerHTML = size;
	
	switch(noise)
	{
		case 0:
			drawGaussianField(amount, size, 200, 200, 400, 100, m);
			document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Field";
			break;
		case 1:
			drawGaussianCurves(amount, size, 200, 200, 400, 150, m);
			document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Curves";
			break;
		case 2:
			drawGaussianDiamond(amount, size, 200, 200, 400, 130, m);
			document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Diamond";
			break;
		case 3:
			drawGaussianOval(amount, size, 200, 200, 300, 300, m);
			document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Circle";
			break;
		case 4:
			drawGaussianBurst(amount, size, 200, 200, 120, 120, m);
			document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Burst";
			break;
	}
	
	noise++;
	
	if(noise > 4) noise = 0;
}
	

function drawGaussianField(amount, thickness, x, y, width, height, monochromatic)
{
	for(i = 0; i < amount; i++)
	{
		points = getGaussianPoints();
	
		setColor(monochromatic);
		canvasContext.fillRect(x + ((width*.5) * points[3]), y + ((height*.5) * points[2]), thickness, thickness);  
	}
}

function drawGaussianCurves(amount, thickness, x, y, width, height, monochromatic)
{
	for(i = 0; i < amount; i++)
	{
		points = getGaussianPoints();
	
		setColor(monochromatic);
		canvasContext.fillRect(x + ((width*.5) * points[0]), y + ((height*.5) * points[2]), thickness, thickness);  
	}
}

function drawGaussianDiamond(amount, thickness, x, y, width, height, monochromatic)
{
	for(i = 0; i < amount; i++)
	{
		points = getGaussianPoints();
	
		setColor(monochromatic);
		canvasContext.fillRect(x + ((width*.5) * points[0]), y + ((height*.5) * points[3]), thickness, thickness);  
	}
}

function drawGaussianOval(amount, thickness, x, y, width, height, monochromatic)
{
	for(i = 0; i < amount; i++)
	{
		points = getGaussianPoints();
	
		setColor(monochromatic);
		canvasContext.fillRect(x + ((width*.5) * points[0]), y + ((height*.5) * points[1]), thickness, thickness);  
	}
}

function drawGaussianBurst(amount, thickness, x, y, width, height, monochromatic)
{
	for(i = 0; i < amount; i++)
	{
		points = getGaussianPoints();
	
		setColor(monochromatic);
		canvasContext.fillRect(x + ((width*.5) * points[2]), y + ((height*.5) * points[3]), thickness, thickness);  
	}
}

function setColor(val)
{
	if(val)
	{
		canvasContext.fillStyle = '#ffffff';
	}
	else
	{
		canvasContext.fillStyle = "#"+Math.floor(Math.random()*16777215).toString(16);
	}
}

function getGaussianPoints()
{
	var x1, x2, w, y1, y2;
	
	do {
		x1 = 2.0 * Math.random() - 1.0;
		x2 = 2.0 * Math.random() - 1.0;
		w = x1 * x1 + x2 * x2;
	} while ( w >= 1.0 );
	
	w = Math.sqrt( (-2.0 * Math.log( w ) ) / w );
	y1 = x1 * w;
	y2 = x2 * w;
	
	return [x1, x2, y1, y2];
}