wmmead logo

Project 10

Not wanting to give up on getting some curves into the compositions created by the program, I decided to add some circles. This seemed like it would be much better than the random amount of border radius, which created some awkward shapes.

Now the program has a 30% chance of drawing a circle, which seemed to me, aesthetically to be enough circles. It does occasionally create too many circles for my taste, but on the whole, I really like this approach.

Code Snippets for 10

On line 14, you can see that I created a variable that holds a random number between 1 and 100. If the number is over 30, draw a rectangle. If it is under 30, draw a circle. The element is a circle if border radius is applied to it, as seen on line 28. I should probably make this part of the function a little more efficient.
Updated createBox() function...
function createBox()
{	
	setTimeout( function(){
		var box = document.createElement("div");
		var boxWidth = getRandomInt(10, elementWidth);
		var boxHeight = getRandomInt(10, elementHeight);
		
		//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 section...
		var boxOrCircle = getRandomInt(1, 100);
		
		// if box or circle is greater than 30, draw a box.
		// That is a 70 / 30 chance of getting rectangle / circle.
		if( boxOrCircle > 30 )
		{
			box.style.width = boxWidth + "px";
			box.style.height = boxHeight + "px";
		}
		else
		{
			box.style.width = boxWidth + "px";
			box.style.height = boxWidth + "px";
			// this is what makes it a circle...
			box.style.borderRadius = "50%";
		}
	
		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, elementHeight) + "px";
		box.style.left = getRandomInt(-boxWidth, elementWidth) + "px";
		box.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
		
		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 );
}