wmmead logo

Project 20

I had been thinking about bringing a grid into the art, and had considered messing around with css grid and random positions on the grid. I have not gone there yet, but adjusting the rotation parameter to the project gets a sort of similar result.

Instead of having every element get a random rotation, I decided to pick a rotation for all elements, and then when the program recalculates the breakdown, it can pick a different rotation for everything. This leads to a more structured looking result.

Code Snippets for 20

The updated fade function picks the rotation for all elements, as seen just blow the comment about that in the code.
Updated 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){
            clearInterval(timer);
			container.removeChild(container.children[countDown]);
            countDown--;
			if( countDown > 0 )
			{
				fade(container.children[countDown], countDown);
			}
			else
			{
				// when it is done fading out, there is a chance of picking a differnt color scheme
				// for the next build up...
				colors = colorScheme[getRandomInt(0, 15)];
				// And add a new set of breakpoints for probabilities...
				chanceArray = chanceBreakdown(numOfBreaks);
				
				// Rotation gets set once here and this value is used for all
				// elements until the fade function runs again.
				rotation = getRandomInt(0, 360);
				document.getElementById('page').style.fontFamily = fontFamilys[getRandomInt(0, 3)];
				
				
				console.log(chanceArray + " Box, Circle, Letter, Word");
				
				boxChance = chanceBreakdown(1);
				circleChance = chanceBreakdown(2);
				createBox();
			}
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.05;
    }, 30);
}