Rather than determining in advance what percentage chance of getting a box, circle, letter or word for each iteration of createBox(), I wrote a program that sets a random breakpoints between 1 and 100. Suppose you get random break points at 10, 20 and 70. A random number between 1 and 100 is generated. If that number is greater than 70, you will get a box. That means there is a 30% chance of drawing a box. If the random number is between 20 and 70, then you will get a circle. That means there is a 50% chance of drawing a circle.
As with the reselection of a color scheme in project 13, we will reset the breakpoints at the end of the fade out process, so that the program, when it runs could do a series where it is very likely to draw boxes, or it could go through a sequence where it is more likely to add words to the page. You can see below in the createBox function where the breakpoints are used as a test to determine what to draw — a box, circle, letter or word.
Code Snippets for 14
This function returns an array of numbers to set as break points between 1 and 100. You might get something like 10, 30, and 70. These are used to figure out the percentage chance you might get a box, circle, letter or word.
The chanceBreakDown function
function chanceBreakdown(breaks)
{
var wholeNum = 100;
var breakDown = [];
var thisNum = "";
var maxNum = ""
// This helps randomize how close to 100 and to 1 you are likely to get for the first and last number in the array.
var multiplier = getRandomInt( 1, 3 );
for( var i = 0; i < breaks; i++ )
{
maxNum = wholeNum - ((breaks * multiplier) - i);
thisNum = getRandomInt( 1, maxNum );
thisNum = wholeNum - thisNum;
wholeNum = thisNum;
breakDown.push(thisNum);
}
return breakDown;
}
I set a global variable to hold the array of breakdown numbers. I passed in a 3 to get three elements in the array, this will divide my range of 1 - 100 into four pieces.
The chanceArray of breakdown numbers...
// set a variable to hold the break points...
var chanceArray = chanceBreakdown(3);
The chanceArray numbers are used in the if statements in createBox to determine what type of shape to create. You can see where the array is tested on lines 21, 27 and 34.
The 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)];
//These will show the breaks in the console
console.log(chanceArray[0]);
console.log(chanceArray[1]);
console.log(chanceArray[2]);
//Box or circle section...
var element = getRandomInt(1, 100);
if( element > chanceArray[0] )
{
box.style.width = boxWidth + "px";
box.style.height = boxHeight + "px";
box.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
}
else if ( element > chanceArray[1] )
{
box.style.width = boxWidth + "px";
box.style.height = boxWidth + "px";
box.style.borderRadius = "50%";
box.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
}
else if ( element > chanceArray[2] )
{
var getLetter = getRandomInt(0, letterCount);
var content = document.createTextNode(letters[getLetter]);
var myFontSize = getRandomInt(50, elementWidth);
box.style.color = colors[Math.floor(Math.random()*colors.length)];
box.style.fontSize = myFontSize + "px";
box.appendChild(content);
}
else
{
var getWord = theWords[ getRandomInt(0, 5007) ];
var content = document.createTextNode(getWord);
var myFontSize = getRandomInt(50, elementWidth);
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, elementHeight) + "px";
box.style.left = getRandomInt(-boxWidth, elementWidth) + "px";
// fade elements to a random opacity...
unfadeto(box, targetOpacity);
document.getElementById("art").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 );
}
A new chanceArray with new breakdown points is created at the end of fadeout process. You can see the array is reset on line 18.
The updated fade() function...
function fade(element, counter) {
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
{
// Potentially, a new color scheme...
colors = colorScheme[getRandomInt(0, 7)];
// And add a new set of breakpoints for probabilities...
chanceArray = chanceBreakdown(3);
createBox();
}
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.05;
}, 50);
}
