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.
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 );
}