wmmead logo

The Project Starts with 01

I began this project with the intention of playing around with recusive JavaScript programs to see what sorts of designs and compositions could be randomly created on the screen.

This first program is actually not recursive, but instead simply uses a setInterval function to repeat the creation (or removal) of boxes on the screen.

Even though this first iteration of my exploration of these ideas is rudimentary and simplistic, I actually enjoy watching it run and seeing the different designs it creates.

Because of the code used to position the boxes on the screen, there is a higher tendency to get boxes in the lower right corner of the containing element. I sort of like that tendancy, although I moved away from it in later pieces.

Code Snippets for 01

The only necessary html for this first project is an empty section element with an ID.
Necessary HTML
    <section id="page"></section>

There is very little CSS needed for this first project as well. Overflow hidden is used to keep the body from getting scroll bars, as the elements could be placed so that they are not entirely in the window.
Necessary CSS
body {

#page {

div { position:absolute; }
The rest is done with JavaScript. First, I defined some basic variables for the width and height of the window, and the container variable is just a shortcut for the #page section element.
Setting a few variables...
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var container = document.getElementById('page');
Since the random function in JavaScript generates random(ish) numbers between 0 and 1, I need a little function that will give me random integers, with a defined minimum and maximum.
Getting random integers...
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
Next, I have a function for creating boxes on the screen. This function runs on an interval of every 1.5 seconds. JavaScript creates a div called box and randomly sets its width, height, rotation, opacity, and location. It makes the box black and then adds it to the document.
The function for creating boxes starts...
function createBox()
	var timer = setInterval( function(){
		var box = document.createElement("div");
		// randomly set the width and height of the element
		box.style.width = getRandomInt(10, windowWidth) + "px";
		box.style.height = getRandomInt(10, windowHeight) + "px";
		// randomly rotate the element
		box.style.webkitTransform = 'rotate('+getRandomInt(-360, 360)+'deg)'; 
		box.style.mozTransform = 'rotate('+getRandomInt(-360, 360)+'deg)';
		box.style.transform = 'rotate('+getRandomInt(-360, 360)+'deg)';
		// randomly set the opacity of the element
		box.style.opacity = Math.random() + .01;
		// randomly position the element
		box.style.top = getRandomInt(0, windowHeight) + "px";
		box.style.left = getRandomInt(0, windowWidth) + "px";
		// set the color of the element to black and add it to the document
		box.style.backgroundColor = "black";
Here is the end of this function. I really like the way this piece of code functions. For each iteration where a random box is placed on the page, a random number between 0 and 50 is generated. If there are more boxes in the #page than that number, the function enters a phase where it removes that number of boxes. Once that process is complete, it goes back to adding boxes. Finally, createBox() runs and starts the whole process.
The end of the createBox function
		var boxMax = getRandomInt(0, 50);
		if( container.children.length > boxMax )
			for( i=0; i<boxMax; i++ )
	}, 1500 );