WmMead

Project 16

This iteration includes major changes. First, the createBox function was getting really long, so I pulled the parts of the function out that actually create the various elements (rectangles, circles, letters and words) and made separate functions. These functions are then called inside switch statements in the createBox function. I knew I was going to get more numerous and more complex elments to add to the page. This change in structure paves the way for that.

Then I created a function for making boxes with borders, which has a lot of variability and is quite long. The function breaks down to three parts. First, I need two colors from the color scheme (one for the background and one for the borders). Then I determing the size of the borders, and finally, I decide to either put borders on all sides, two sides or one side. You will notice I set two of the segments to display boxes with borders so that they come up frequently in this version.

Code Snippets for 16

You can see in the createBox function I have added a switch statement to run the appropriate function to add either a box, circle, letter or word. This one is set with boxes with borders to come up twice, as I was testing the function for making different types of boxes with different types of borders
Updated createBox function
function createBox()
{	
	setTimeout( function(){
		var box = document.createElement("div");
		var boxWidth = getRandomInt(10, windowWidth);
		var boxHeight = getRandomInt(10, windowHeight);
		
		//Three variables below for opacity...
		var randomOpacity = getRandomInt(50, 100)/100;
		var opacitySettings = new Array (randomOpacity, 1, 1);
		var targetOpacity = opacitySettings[Math.floor(Math.random()*opacitySettings.length)];
		//var counter = 1;
		
		//Box or circle section...
		var element = getRandomInt(1, 100);
		
		switch( true ) {
			
			case element > chanceArray[0]: addBorderBox( box, boxWidth, boxHeight ); break;
			case element > chanceArray[1]: addBorderBox( box, boxWidth, boxHeight ); break;
			case element > chanceArray[2]: addSimpleCircle( box, boxWidth ); break;
			case element > chanceArray[3]: addLetter( box ); break;
			default: addWord( box );
			
		}
		
		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.top = getRandomInt(-boxHeight, windowHeight) + "px";
		box.style.left = getRandomInt(-boxWidth, windowWidth) + "px";
		
		
		// fade elements to a random opacity...
		unfadeto(box, targetOpacity);
		document.getElementById("page").appendChild(box);
		
		var boxMax = getRandomInt(1, 200);
		
		if( container.children.length > boxMax )
		{
			var counter = (container.children.length - boxMax)-1;
			fade(container.children[(counter)], counter);
		}
		else
		{
			createBox();	
		}
	}, 1000 );
}
Most of these functions for creating the different elements on the page are pretty simple, but because the createBox function was getting long, it made sense to pull them out.
Functions for creating different elements for the page
function addSimpleBox( element, width, height ) {
	element.style.width = width + "px";
	element.style.height = height + "px";
	element.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
}

function addSimpleCircle( element, width ) {
	element.style.width = width + "px";
	element.style.height = width + "px";
	element.style.borderRadius = "50%";
	element.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
}

function addLetter( element ) {
	var getLetter = getRandomInt(0, letterCount);
	var content = document.createTextNode(letters[getLetter]);
	var myFontSize = getRandomInt(50, windowWidth);
	element.style.color = colors[Math.floor(Math.random()*colors.length)];
	element.style.fontSize = myFontSize + "px";
	element.appendChild(content);
}

function addWord( element ) {
	var getWord = theWords[ getRandomInt(0, 5007) ];
	var content = document.createTextNode(getWord);
	var myFontSize = getRandomInt(50, windowWidth);
	element.style.color = colors[Math.floor(Math.random()*colors.length)];
	element.style.fontSize = myFontSize + "px";
	element.appendChild(content);			
}
The function for making rectangles with borders is much longer because there are so many possible configurations. I had to get two colors out of the array, one for the background of the rectangle and one for the borders.
Functions for creating different elements for the page
function addBorderBox( element, width, height ) {
	
	var numOfBorders = new Array("allsides", "twosides", "oneside");
	var borderType = new Array( "solid", "dashed", "dotted");
	var borderSelect = numOfBorders[Math.floor(Math.random()*numOfBorders.length)];
	var borderTypeSelect = borderType[Math.floor(Math.random()*borderType.length)];
	
	/*
		This part of this function ensures that the color picked
		for the border is different than the background color of the element.
	*/
	
	// Make a copy of the current color scheme array... (you have to use slice to make a copy of the array)
	var currentColorScheme = colors.slice(0);
	
	// Get a random color position
	var bgColorPos = getRandomInt(0, (currentColorScheme.length - 1));
	
	// Set the bg color
	var bgColor = currentColorScheme[bgColorPos];
	
	// Remove that color from the temporary array
	currentColorScheme.splice(bgColorPos, 1);
	
	// Set the border color to one of the remaining colors
	var bdrColor = currentColorScheme[Math.floor(Math.random()*currentColorScheme.length)];
	
	
	/*
		This next section sets the border size. It takes the 
		short side of the rectangle, and makes sure that the border is no
		more than 45% the width of that side. For very skinny rectangles, it
		sets the border to 2 px wide.
	*/
	var borderSize = 0;
	if( width > height ) {
		var maxBorder = Math.floor(height * .45);
		if( maxBorder > 4 ){
			borderSize = getRandomInt(4, maxBorder);
		}
		else { borderSize = 2; }
	}
	else {
		var maxBorder = Math.floor(width * .45);
		if( maxBorder > 4 ){
			borderSize = getRandomInt(4, maxBorder);
		}
		else { borderSize = 2; }
	}
	//console.log(borderSize + "px");
	
	element.style.width = width + "px";
	element.style.height = height + "px";
	element.style.backgroundColor = bgColor;
	
	if( borderSelect == "allsides" ) {
		element.style.borderWidth = borderSize + "px";
		element.style.borderColor = bdrColor;
		element.style.borderStyle = "solid";
	}
	
	else if ( borderSelect == "twosides" ) {
		element.style.borderTopWidth = borderSize + "px";
		element.style.borderTopColor = bdrColor;
		element.style.borderTopStyle = "solid";
		element.style.borderBottomWidth = borderSize + "px";
		element.style.borderBottomColor = bdrColor;
		element.style.borderBottomStyle = "solid";
	}
	else {
		element.style.borderLeftWidth = borderSize + "px";
		element.style.borderLeftColor = bdrColor;
		// Elements with only one border could end up with solid, dashed or dotted border...
		element.style.borderLeftStyle = borderTypeSelect;
	}
}