wmmead logo

Project 06

Project 06 is visually very different, but programmatically, not very different. For this project, instead of adding styled, but empty, div tags on the page, I am putting a random letter in each div and styling that instead.

For this project, I am only using lowercase letters and one typeface, but there is tons to explore here in future projects.

One of my main interests in adding type is that it is another way to get some curves and shapes other than rectangles on the screen. I think this is far more effective than the rounded corner approach. Some times the letters seem to be adding up to words, however, it is still completely random.

I also increased the speed at which elements are added and faded in and out for this project, as it seemed to be running a little too slow.

Code Snippets for 06

On the example page, I set the project to use the font stack below. On the project page it is actually using Futura.
CSS changes...
#page {
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
Outside of changes in the createBox() function, I added a function that generates an array of letters, then a variable that uses that function. I also made a variable that will give me a random number between 0 and 25, to pull a letter from the array.
Generate an array of letters
function genCharArray(charA, charZ) {
    var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
    for (; i <= j; ++i) {
    return a;

var letters = genCharArray('a', 'z');
var letterCount = letters.length-1;
The updates to the createBox function are fairly minor. Instead of just creating a div element, applying styles to it, and adding it to the page, this function puts a letter in the div and styles that instead. I also bumped up the chances of getting more elements on the page and bumped up the speed that createBox() goes, making it add an element every second, instead of second and half.
Updated createBox() function
function createBox()
	setTimeout( function(){
		// Get a random number between 0 and 25...
		var getLetter = getRandomInt(0, letterCount);
		var box = document.createElement("div");
		//Create a text node with a random letter in it.
		var content = document.createTextNode(letters[getLetter]);
		// Set a random font size...
		var myFontSize = getRandomInt(50, windowWidth);
		// Increased the max number here to increase chances 
		// of getting more elements on the screen.
		var boxMax = getRandomInt(1, 200);
		// Put the letter inside the 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(-myFontSize, windowHeight) + "px";
		box.style.left = getRandomInt(-myFontSize, windowWidth) + "px";
		// Apply the styles...
		box.style.fontSize = myFontSize + "px";
		box.style.color = colors[getRandomInt(0, 4)];
		if( container.children.length > boxMax )
			var counter = (container.children.length - boxMax)-1;
			fade(container.children[(counter)], counter);
	}, 1000 ); // increased speed here to adding a new element every second
The only changes to these two functions is the speed at which elements fade has been doubled, so they should fade in and out twice as fast.
Updated fading functions
function unfade(element) {
    var op = 0.05;
    var timer = setInterval(function () {
        if (op >= 1){
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.05;
    }, 25); // increased the speed by cutting this to 25 milliseconds

function fade(element, counter) {
    var op = 1;
	var countDown = counter;
    var timer = setInterval(function () {
        if (op <= 0.05){
			if( countDown > 0 )
				fade(container.children[countDown], countDown);
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.05;
    }, 25); // increased speed here too.