wmmead logo

Project 08

This project is a small step forward from a programming point of view, but is a significant step forward aesthetically. I wanted more full opacity shapes, so I added an array that makes it more likely that the element added to the page will be at full opacity

I am very interested in finding ways to create random tendencies. Here the tendency is to create fully opaque elements, with some chance of creating elements that have some opacity. There are a lot of places to push this concept in these projects.

Code Snippets for 08

A minor change to the createBox() function gives a greater chance of getting full opacity shapes. Line 10 shows an array that gives a two out of three chances of getting full opacity element added to the page. Line 11 randomly selects from that array, making it likely that a fully opaque element will be selected.
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.style.width = boxWidth + "px";
		box.style.height = boxHeight + "px";
		
		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";
		
		box.style.backgroundColor = colors[getRandomInt(0, 4)];
		
		// 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();	
		}
	}, 1500 );
}