WmMead

Project 03

Project 03 is another very small step forward from 01 and 02. For this version, in an effort to get something other than boxes, and perhaps some shapes with some softness, I added random amounts of border radius to each corner of each box.

This certainly does create a different effect, however, I found the shapes to be rather disturbing. They remind me of body parts, and I found that was a direction that I was not so interested in going.

Art 03 Snippets

You can see that this version of the createBox() function has been modified to include four variables that will randomly set each corner radius to an amount between 0% and 50%. These amounts get applied to each corner of the box individually starting on line 19.
The new createBox() function..
function createBox()
{
	var timer = setInterval( function(){
		
		var box = document.createElement("div");
		var boxWidth = getRandomInt(10, windowWidth);
		var boxHeight = getRandomInt(10, windowHeight);
		
		// create random corner radii..
		var topLeftRadius = getRandomInt(0, 50) + "%";
		var topRightRadius = getRandomInt(0, 50) + "%";
		var bottomLeftRadius = getRandomInt(0, 50) + "%";
		var bottomRightRadius = getRandomInt(0, 50) + "%";
		
		box.style.width = boxWidth + "px";
		box.style.height = boxHeight + "px";
		
		// Apply random corner radii to each corner of the box...
		box.style.borderTopLeftRadius = topLeftRadius;
		box.style.borderTopRightRadius = topRightRadius;
		box.style.borderBottomLeftRadius = bottomLeftRadius;
		box.style.borderBottomRightRadius = bottomRightRadius;
		
		box.style.webkitTransform = 'rotate('+getRandomInt(-360, 360)+'deg)'; 
		box.style.mozTransform = 'rotate('+getRandomInt(-360, 360)+'deg)';
		box.style.transform = 'rotate('+getRandomInt(-360, 360)+'deg)';
		
		box.style.opacity = Math.random() + .01;
		
		box.style.top = getRandomInt(0, windowHeight) + "px";
		box.style.left = getRandomInt(0, windowWidth) + "px";
		
		box.style.backgroundColor = colors[getRandomInt(0, 4)];
		document.getElementById("page").appendChild(box);
		
		var boxMax = getRandomInt(0, 150);
		
		if( container.children.length > boxMax )
		{
			for( var i=0; i<boxMax; i++ )
			{
				container.removeChild(container.children[i]);
			}
		}
	
	}, 1500 );

}