wmmead logo

Project 12

Since the letters were interesting, and sometimes they seem to make words, I thought it would be interesting to bring words into the composition. I found a list of just over 5000 most common words in the English language, and turned them into an array, which is loaded from a separate file called words.js

The probabilities for the createBox() function have been updated to include a 20% chance of adding a word to the compostion. There is a 20% chance of adding a letter or circle and recatangles remain at a 40% chance.

Code Snippets for 12

I have a file called words.js, which includes an array of 5007 words. A piece of this array is shown in the snippet below.
theWords array...
var theWords = new Array ("the", "be", "and", "of", "a", "in", "to", "have", "to", "it", "I", "that", "for", "you", "he", "with", "on", "do", "say", "this", "they", "at", "but", "we", "his", "from", "that", "not", "by", "she", "or", "as", "what", "go", "their", "can", "who", "get", "if", "would", "her", "all", "my", "make", "about", "know", "will", "as", "up", "one", "time", "there", "year", "so", "think");
I defined a few more variables which are used inside the createBox() function, which has been updated to provide a 20% chance of pulling a word from the array of 5007 words loaded into the page.
Updated createBox() function...
var content = "";
var myFontSize = "";

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)];
		
		// Create a rectangle, circle, letter or word...
		var element = getRandomInt(1, 100);
		
		// 40% chance of making a rectangle...
		if( element > 60 )
		{
			box.style.width = boxWidth + "px";
			box.style.height = boxHeight + "px";
			box.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
		}
		// 20% chance of making a circle...
		else if ( element > 40 )
		{
			box.style.width = boxWidth + "px";
			box.style.height = boxWidth + "px";
			box.style.borderRadius = "50%";
			box.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
		}
		// 20% chance of making a letter...
		else if ( element > 20 )
		{
			var getLetter = getRandomInt(0, letterCount);
			content = document.createTextNode(letters[getLetter]);
			myFontSize = getRandomInt(50, windowWidth);
			box.style.color = colors[Math.floor(Math.random()*colors.length)];
			box.style.fontSize = myFontSize + "px";
			box.appendChild(content);
		}
		// 20% chance of making a word...
		else
		{
			var getWord = theWords[ getRandomInt(0, 5007) ];
			content = document.createTextNode(getWord);
			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 );
}