wmmead logo

Project 18

This project is the culmination of the work I have done with adding borders to elements. There are lots of random ways borders can be added to rectangles and circles now. I also added eight new color schemes, to provide even more variety to the potential design as it is created and pulled apart. The use of break points to provide additional probablilities as the program runs through iterations gives even more room for different designs, within the look of the whole thing.

The main createBox function builds up the screen, adding rectangles and circles, which may or may not have borders, letters and words. When it starts it comes up with a percentage probablity of adding each of these. Finally, at a random point, it goes into a fade out mode, where it removes a random number of elements from the design. Once that process has finished, the probablilities and color scheme are reset, and it starts building elements again.

Code Snippets for 18

This adds an additional circle to the mix, one that has a border going all the way around it. Now there are three types of circles: solid, half, and circles with rings.
The addBorderCircle function
function addBorderCircle( element, width ) {
	var borderSize = 0;
	var maxBorder = Math.floor(width * .33);
	if( maxBorder > 4 ){
		borderSize = getRandomInt(4, maxBorder);
	else { borderSize = 2; }

	var elementColors = getTwoColors();
	element.style.width = width + "px";
	element.style.height = width + "px";
	element.style.borderRadius = "50%";
	element.style.borderWidth = borderSize + "px";
	element.style.borderColor = elementColors[1];
	element.style.borderStyle = "solid";
	element.style.backgroundColor = elementColors[0];
These two functions take breakpoints for adding rectangles and circles to the window, setting a probability for each type which stays constant, until the fade out process is complete. At that point a new set of breakpoints and probabilities are created.
The addBox and addCircle functions
function addBox( box, width, height ){
	var whichBox = getRandomInt(1, 100);
	switch( true ) {	
		case whichBox > chanceArray[0]: addSimpleBox( box, width, height ); break;
		default: addBorderBox( box, width, height );

function addCircle( element, width ){
	var whichCircle = getRandomInt(1, 100);
	switch( true ) {	
		case whichCircle > chanceArray[0]: addSimpleCircle( element, width ); break;
		case whichCircle > chanceArray[1]: addSplitCircle( element, width ); break;
		default: addBorderCircle( element, width );
You can see that this function has been simplified to add one of four things each time it runs: a box, a circle, a letter or a word. If a box is chosen, then there is some probability that it will add a plain box, or a border box. If a border box is added, there are three different versions of those. If a circle is added, probabilities are set up for the three different types of circles.
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;
		//Box or circle section...
		var element = getRandomInt(1, 100);
		switch( true ) {
			case element > chanceArray[0]: addBox( box, boxWidth, boxHeight ); break;
			case element > chanceArray[1]: addCircle( box, boxWidth ); break;
			case element > chanceArray[3]: addLetter( box ); break;
			default: addWord( box );
		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);
		var boxMax = getRandomInt(1, 200);
		if( container.children.length > boxMax )
			var counter = (container.children.length - boxMax)-1;
			fade(container.children[(counter)], counter);
	}, 1000 );
When the fadeout mode finishes, which is a random number of times, a new color scheme could be chosen, then the breakpoints are reset for everything, and then createBox is started again with these new settings.
The fade function
function fade(element, counter) {
	console.log("entering fadeout mode");
    var op = 1;  // initial opacity
	var countDown = counter;
    var timer = setInterval(function () {
        if (op <= 0.05){
			if( countDown > 0 )
				fade(container.children[countDown], countDown);
				colors = colorScheme[getRandomInt(0, 15)];
				chanceArray = chanceBreakdown(numOfBreaks);
				boxChance = chanceBreakdown(1);
				circleChance = chanceBreakdown(2);
				console.log(chanceArray + " Box, Circle, Letter, Word");
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.05;
    }, 50);
I also doubled the color schemes in this version. The first set of eight color schemes were all pretty closely related. I tried to add two sets of four that are related to themselves, but different from the original eight and the other set of four.
New color schemes
colorScheme[0] = new Array ("#D8C358", "#6D0839", "#D0E799", "#25271E", "#FBEFF4" );
colorScheme[1] = new Array ("#000000", "#ad0202", "#c2ad6c" );
colorScheme[2] = new Array ("#3c7c59", "#a4e1f1", "#220845", "#b79829", "#472e00" );
colorScheme[3] = new Array ("#000000", "#a4e1f1", "#b79829" );
colorScheme[4] = new Array ("#c6c655", "#487d29", "#151814", "#dbd1eb", "#37297d" );
colorScheme[5] = new Array ("#000000", "#c6c655", "#37297d" );
colorScheme[6] = new Array ("#330d54", "#9bb6c5", "#d3e2cc", "#6e0f06", "#f1e5d5" );
colorScheme[7] = new Array ("#000000", "#d3e2cc", "#6e0f06" );
colorScheme[8] = new Array ("#f79ae6", "#800311", "#f9384d", "#c9b19a", "#ab6726" );
colorScheme[9] = new Array ("#f70620", "#ddd600", "#1b2c49" );
colorScheme[10] = new Array ("#ddd600", "#263b5f", "#ebaab1", "#5584d7", "#75000d" );
colorScheme[11] = new Array ("#1b2c49", "#e4e2ac", "#fb001c" );
colorScheme[12] = new Array ("#e24d1a", "#cddeff", "#01153c", "#a74c2c", "#331d15" );
colorScheme[13] = new Array ("#331d15", "#ddd3d4", "#455780" );
colorScheme[14] = new Array ("#cddeff", "#1c325c", "#bbb97e", "#f6f5ba", "#e24d1a" );
colorScheme[15] = new Array ("#bbb97e", "#01153c", "#a74c2c" );