function drawBlock(parent, width, depth) {
    var newWidth = Math.sqrt(2 * Math.pow(width / 2, 2));
    var color = 'rgba(' + [0, Math.floor(depth * 25), 100, (1 - depth / 40)].join(',') + ');';
    console.log(color);
    var style = 'width: ' + newWidth + 'px;height: ' + newWidth + 'px;background-color: ' + color;
    var left = $('<div class="block left" style="' + style + '"></div>');
    var right = $('<div class="block right" style="' + style + '"></div>');

    left.hide();
    right.hide();

    parent.append(left);
    parent.append(right);

    left.fadeIn(1000);
    right.fadeIn(1000);

    if (depth > 0) {
        setTimeout(function() {
            drawBlock(left, newWidth, depth - 1);
            drawBlock(right, newWidth, depth - 1);
        }, 500);
    }

}

// TODO - Append to DOM once it's completely built out
drawBlock($('#root'), 100, 7);
console.time('tree');

// TODO - Return the entire HTML for that depth.  
var map = {};
function getData(depth, width) {

    var color,
        left,
        nextWidth,
        right,
        style;

    if (!map[depth]) {

        color = 'rgba(' + [0, Math.floor(depth * 25), 100, (1 - depth / 40)].join(',') + ');';
        nextWidth = Math.sqrt(2 * Math.pow(width / 2, 2));
        style = 'width: ' + nextWidth + 'px;height: ' + nextWidth + 'px;background-color: ' + color;
        left = $('<div class="block left" style="' + style + '"></div>');
        right = $('<div class="block right" style="' + style + '"></div>');

        map[depth] = {
            left: left,
            nextWidth: nextWidth,
            right: right
        };
    }

    return map[depth];
}

function drawBlock(parent, width, depth) {
    var data  = getData(depth, width),
        left  = data.left.clone(),
        right = data.right.clone();

    parent.append(left);
    parent.append(right);

    if (depth > 0) {
        drawBlock(left, data.nextWidth, depth - 1);
        drawBlock(right, data.nextWidth, depth - 1);
    }

}

// TODO - Append to DOM once it's completely built out
drawBlock($('#root'), 100, 10);
console.timeEnd('tree');

Add timer, only calculate values once for each depth level, and remove delayed 'growth' of tree
Add timer, only calculate values once for each depth level, and remove delayed 'growth' of tree
