WmMead

Project 17

For project 17, I wanted to make circles that have a border as well. I pulled the part that gets two colors from the color scheme out of the addBorderBox function and made a separate helper function to do this, so it could also be used on circles.

I also created the function to make circles with a 50% border, which ends up looking like a half circle. I really liked the look of that, and wanted it in my project. I set these to come up frequently in this version, to test out the feature.

Code Snippets for 17

I pulled the part of the addBorderbox function that pulls two colors from the color scheme array out and turned it into a helper function. That way I can use two colors on other elements I make (such as circles).
The new getTwoColors helper function
function getTwoColors() {
	// 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 color1Pos = getRandomInt(0, (currentColorScheme.length - 1));
	
	// Set the bg color
	var color1 = currentColorScheme[color1Pos];
	
	// Remove that color from the temporary array
	currentColorScheme.splice(color1Pos, 1);
	
	// Set the border color to one of the remaining colors
	var color2 = currentColorScheme[Math.floor(Math.random()*currentColorScheme.length)];
	
	var twoColors = new Array(color1, color2);
	
	return twoColors;
}
You can see how, on line 8, the new helper function is being used, then further down the addBorderBox function where the colors are applied on lines 35, 39, 45, 48 and 53.
The updated addBorderBox function
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)];
	
	var elementColors = getTwoColors();
	
	/*
		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 = elementColors[0];
	
	if( borderSelect == "allsides" ) {
		element.style.borderWidth = borderSize + "px";
		element.style.borderColor = elementColors[1];
		element.style.borderStyle = "solid";
	}
	
	else if ( borderSelect == "twosides" ) {
		element.style.borderTopWidth = borderSize + "px";
		element.style.borderTopColor = elementColors[1];
		element.style.borderTopStyle = "solid";
		element.style.borderBottomWidth = borderSize + "px";
		element.style.borderBottomColor = elementColors[1];
		element.style.borderBottomStyle = "solid";
	}
	else {
		element.style.borderLeftWidth = borderSize + "px";
		element.style.borderLeftColor = elementColors[1];
		// Elements with only one border could end up with solid, dashed or dotted border...
		element.style.borderLeftStyle = borderTypeSelect;
	}
}
If you make a circle have a border on one side, and make that border 50% the diameter of the circle, you get two half circles. I created this function and used the two colors from the array to make that happen.
The new addBorderCircle function
function addBorderCircle( element, width ) {
	var bdrWidth = width/2;
	var elementColors = getTwoColors();
	//console.log(elementColors);
	element.style.width = width + "px";
	element.style.height = width + "px";
	element.style.borderRadius = "50%";
	element.style.borderTopWidth = bdrWidth + "px";
	element.style.borderTopColor = elementColors[1];
	element.style.borderTopStyle = "solid";
	element.style.backgroundColor = elementColors[0];
}
In the updated createBox function, I have made it so that circles come up frequently, in order to test out the new functionality. You can see it is used in two segments, on lines 20 and 21.
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]: addBorderCircle( box, boxWidth ); break;
			case element > chanceArray[2]: addBorderCircle( 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 );
}