Project 02 is only a small step forward from project 01. In this project, I added an array with a scheme of five colors.
I considered making the color choice completely random, but I decided that I would prefer to pick from a set of colors that will work together visually.
Something to think about – how random is random enough? by placing only boxes, and by constraining the color scheme to five possible colors, is this truly random? What are the chances that the screen will look exactly the same twice?
Is the choice of colors in the color scheme, a sign of an artists hand in the creation of this work, even though there is no predicting exactly what it will look like?
Code Snippets for 02
The HTML and CSS for the second project are the same as in the first project. The step forward for this one is the addition of an array for colors in a color scheme. I could generate colors completely randomly, but I wanted sets of colors that would work together, visually.
Color scheme array
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var container = document.getElementById('page');
var colors = new Array ("#D8C358", "#6D0839", "#D0E799", "#25271E", "#FBEFF4" );
Below is the entire function for creating, or depending on circumstances, removing boxes from the screen. You can see in the comment below on line 19 where I have added the random choice of a color from the color scheme.
Full create box function
function createBox()
{
var timer = setInterval( function(){
var box = document.createElement("div");
box.style.width = getRandomInt(10, windowWidth) + "px";
box.style.height = getRandomInt(10, windowHeight) + "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.opacity = Math.random() + .01;
box.style.top = getRandomInt(0, windowHeight) + "px";
box.style.left = getRandomInt(0, windowWidth) + "px";
// Get the random color from the color scheme array...
box.style.backgroundColor = colors[getRandomInt(0, 4)];
document.getElementById("page").appendChild(box);
var boxMax = getRandomInt(0, 150);
if( container.children.length > boxMax )
{
for( var i=0; i<boxMax; i++ )
{
container.removeChild(container.children[i]);
}
}
}, 1500 );
}
