wmmead logo

Project 05

Unlike project 04, which involved some pretty big changes, project 05 has only minor changes. I brought back the rounded corners, but only for two corners, hoping that the shapes would be less disturbing, but I don't think that was particularly successful.

I also updated the way elements get added to the page. Instead of placed between 0 and the width of the page, they can be placed off the left side of the page or off the top, leading to a more balanced approach. I like the tendency to get placed in a particular part of the screen, and that is something I might explore further in a different project.

Code Snippets for 05

The version of the createBox() function for this project has been updated to alter two corners and give them a border radius. Also, this was officially updated in version 4, but I changed the way boxes are positioned on the screen. In projects 1-3, they were added between 0 and the width of the screen, which meant that there was a tendency for elements to end up on the bottom right corner of the window more than in other places. I adjusted this so that elements can be added off the left side of the screen or off the top.
Updated createBox() function
function createBox()
{	
	setTimeout( function(){
		var box = document.createElement("div");
		var boxWidth = getRandomInt(10, windowWidth);
		var boxHeight = getRandomInt(10, windowHeight);
		
		// Added radius back for two corners.
		var topLeftRadius = getRandomInt(0, 50) + "%";
		var bottomLeftRadius = getRandomInt(0, 50) + "%";
		
		var boxMax = getRandomInt(1, 75);
	
		box.style.width = boxWidth + "px";
		box.style.height = boxHeight + "px";
		
		// Set radius for two corners...
		box.style.borderTopLeftRadius = topLeftRadius;
		box.style.borderBottomLeftRadius = bottomLeftRadius;
		
		box.style.webkitTransform = 'rotate('+getRandomInt(-360, 360)+'deg)'; 
		box.style.mozTransform = 'rotate('+getRandomInt(-360, 360)+'deg)';
		box.style.transform = 'rotate('+getRandomInt(-360, 360)+'deg)'; 
		
		// Updated positioning...
		box.style.top = getRandomInt(-boxHeight, windowHeight) + "px";
		box.style.left = getRandomInt(-boxWidth, windowWidth) + "px";
		
		box.style.backgroundColor = colors[getRandomInt(0, 4)];
		unfade(box);
		document.getElementById("page").appendChild(box);
		
		if( container.children.length > boxMax )
		{
			var counter = (container.children.length - boxMax)-1;
			fade(container.children[(counter)], counter);
		}
		else
		{
			createBox();	
		}
	}, 1500 );
}