<html>
<head>
<style>
body {padding:0px;margin:0px;}
</style>
</head>
<body>
<canvas id="demo"></canvas>
<script>
var c=document.getElementById('demo');
var cc=c.getContext("2d");

window.addEventListener("load",setDimensions);
window.addEventListener("resize",setDimensions);

setInterval(draw,1000/25); //takes care of the drawing
setInterval(bwColor,1000/20); //generates a day/night effect

function setDimensions() {
	c.width=window.innerWidth;
	c.height=window.innerHeight;
	c.style.backgroundColor="#222";
	
	//add shadow
	cc.shadowBlur=7;
	cc.shadowColor="black";
	cc.shadowOffsetX = 5;
	cc.shadowOffsetY = 5;
};

var blobarray = [ ];

//array of gray colors - these are very similar colors, let's hope this works out well.
var colors = ["#FFF300","#FFD500","#B7A132","#9C8A30","#8AA0B9","#86DA2C"];

function draw() {

	var blob = {
		x:c.width/2, 
		y:c.height/2,
		bStroke:Math.round(Math.random()), //assign 0 or 1 (true or false)
		color:colors[Math.floor(Math.random()*colors.length)], // random color from array "colors"
		size:Math.floor(Math.random() * 50) + 80, //random square-size between 80 and 130
		xSpeed:(Math.random() < 0.5 ? -1 : 1) * Math.floor(Math.random() * 15) + 1,  //random square-size between -15 and +15
		ySpeed:(Math.random() < 0.5 ? -1 : 1) * Math.floor(Math.random() * 15) + 1  //random square-size between -15 and +15		
		};

	blobarray.push(blob);
		
	cc.clearRect(0,0,c.width,c.height);	//if you comment this line out, the blocks leave a trace
	
	for (var i=0;i<blobarray.length;i++) {
	
		blob=blobarray[i];		
		
		if (blob.x==c.width/2) { //first time, the square needs to be placed in the middle of the screen
			blob.x=(c.width/2)-(blob.size/2); 
			blob.y=(c.height/2)-(blob.size/2);
			
		} else {
			blob.x=blob.x += blob.xSpeed;
			blob.y=blob.y += blob.ySpeed;
		};		
		
		
		//if bStroke=1, create a stroke, otherwise, create a fill
		if (blob.bStroke==1) {
			cc.strokeStyle=blob.color;
			cc.strokeRect (blob.x,blob.y,blob.size,blob.size);
			} 
			else 
			{
			cc.fillStyle=blob.color;
			cc.fillRect (blob.x,blob.y,blob.size,blob.size);
			};
			
		blob.size=blob.size * 0.98; //makes the blocks smaller with every step
				
		if (blob.size<2) {
			blobarray.splice(blob, 1); //remove blob items when they're smaller than 2px;	
		};		
	};
	
	//let's add the number of current moving drops using another Google font
	cc.fillStyle='gray';		
	cc.globalAlpha=0.5; //turns transparency on
	cc.fillRect (30,30,225,60); //create a transparent rectangle first!	
	cc.globalAlpha=1; //turns transparency off
	cc.font="1.3em Arial"; // set a second Google font (Love Ya Like A Sister)
	cc.fillStyle="#DCDCDC";
	cc.fillText ("Nmbr of squares: " + blobarray.length,42,65);		
	cc.globalAlpha=0.6;
};

//Colorfunctions - experimental... needs finetuning...
//used for bw background colors of the canvas
var minusBW=Math.round(Math.random());
colorBW=Math.round(Math.random() * 255);

function bwColor() {
	
	if (colorBW>254 || minusBW) {
		minusBW=true;
		colorBW--;		
		if (colorBW<1) {minusBW=false;}
	} else {
		colorBW++;		
	};
		
	c.style.backgroundColor='rgb(' + colorBW + ',' + colorBW + ',' + colorBW + ')';
	
	};

</script>
</body>
</html>