WmMead

Project 11

This project brings back the letters that I had coming in to the composition in #06. My goal was to bring a little more personality to the compositions through the addition of type, while combining it with the more basic shapes of rectangles and circles.

The program has built in probablities that break down to 40% for either a rectangle or a letter, and 20% for a circle. Aesthetically, I like the odds, but I plan to play around with those numbers more in the future.

Code Snippets for 11

Bringing letters back into the design seemed like an obvious next step. This is the same code from #6.
Pulling a letter from the alphabet...
var letters = genCharArray('a', 'z');
var letterCount = letters.length-1;

function genCharArray(charA, charZ) {
    var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
    for (; i <= j; ++i) {
        a.push(String.fromCharCode(i));
    }
    return a;
}
The createBox() function has been updated to provide a 40% chance of drawing a letter, or a 40% chance of drawing a rectangle, or a 20% chance of drawing a circle.
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)];
		
		//Box or circle or letter section...
		var boxOrCircle = getRandomInt(1, 100);
		
		// 40% chance of drawing a box
		if( boxOrCircle > 60 )
		{
			box.style.width = boxWidth + "px";
			box.style.height = boxHeight + "px";
			box.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
		}
		
		// 20% chance of drawing a circle...
		else if ( boxOrCircle > 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)];
		}
		
		// 40% chance of drawing a letter...
		else
		{
			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);
		}
	
		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";
		
		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 );
}