wmmead logo

Project 15

This it­er­a­tion brings bor­ders to some of the boxes. I have in­tially set the bor­ders to be 20% the width of the box, and be­cause the box-siz­ing is set to bor­der box on the reset, the bor­ders are in­cluded within the size of each box. For this first ex­per­i­ment, I added a sep­a­rate break for boxes with bor­ders, you can see this sec­tion below starting on line 28.

As with the reselection of a color scheme in project 13, we will reset the breakpoints at the end of the fade out process, so that the program, when it runs could do a series where it is very likely to draw boxes, or it could go through a sequence where it is more likely to add words to the page. You can see below in the createBox function where the breakpoints are used as a test to determine what to draw — a box, circle, letter or word.

Code Snippets for 15

The updated createBox() function includes a chance to add boxes with a border with a random color from the color scheme.
The 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;
		
		console.log(chanceArray[0]);
		console.log(chanceArray[1]);
		console.log(chanceArray[2]);
		console.log(chanceArray[3]);
		
		//Box or circle section...
		var element = getRandomInt(1, 100);
		
		if( element > chanceArray[0] )
		{
			box.style.width = boxWidth + "px";
			box.style.height = boxHeight + "px";
			box.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
		}
		else if ( element > chanceArray[1] )
		{
			box.style.width = boxWidth + "px";
			box.style.height = boxHeight + "px";
			box.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
			box.style.borderWidth = (boxWidth * 0.2) + "px";
			box.style.borderColor = colors[Math.floor(Math.random()*colors.length)];
			box.style.borderStyle = "solid";
			console.log("border added");
		}
		else if ( element > chanceArray[2] )
		{
			box.style.width = boxWidth + "px";
			box.style.height = boxWidth + "px";
			box.style.borderRadius = "50%";
			box.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
		}
		else if ( element > chanceArray[3] )
		{
			var getLetter = getRandomInt(0, letterCount);
			var content = document.createTextNode(letters[getLetter]);
			var myFontSize = getRandomInt(50, windowWidth);
			box.style.color = colors[Math.floor(Math.random()*colors.length)];
			box.style.fontSize = myFontSize + "px";
			box.appendChild(content);
		}
		else
		{
			var getWord = theWords[ getRandomInt(0, 5007) ];
			var content = document.createTextNode(getWord);
			var myFontSize = getRandomInt(50, windowWidth);
			box.style.color = colors[Math.floor(Math.random()*colors.length)];
			box.style.fontSize = myFontSize + "px";
			box.appendChild(content);
		}
	
		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 );
}