blue tree

water.js

$('svg').css('background', 'black');
 
var g = d3.select('svg')
    .append('g')
    .attr('transform', 'translate(' 
          + $('svg').width()/2 
          + ', ' 
          + 499 
          + ')');

var randomNumbers;
if ($('svg').data('randomNumbers')) {
    randomNumbers = $('svg').data('randomNumbers');
} else {
    randomNumbers = [];
    for (var i = 0; i < 1000000; i++) {
        randomNumbers.push(Math.random());
    }
    randomNumbers = $('svg').data('randomNumbers', randomNumbers);
}

var randomIndex = 0;
function getNextRandomNumber() {
    if (randomIndex >= randomNumbers.length) {
        randomIndex = 0;
    }
    return randomNumbers[randomIndex++];
}

function generateAngle(a, b) {
    return a + b * getNextRandomNumber();
}

function degreesToRadians(degrees) {
    return degrees * 2 * Math.PI / 360;
}

function generatePoint(point, angle, distance) {
    return {
        x:point.x + (distance * Math.cos(degreesToRadians(angle))),
        y:point.y + (distance * Math.sin(degreesToRadians(angle)))
    };        
}

function generatePoints() {
    var points = [],
        branchSegments = 10, branchLength = 35,
        angle = 90, point = {x:0, y:0},
        maxAngleDelta = 23,
        tendency = getNextRandomNumber();
        
    // each branch has a tendency - the probability that the next angle will go
    // left or right. for example, tendency = 0.33, which means 33% of the time,
    // the graph will go left. when computing the next angle, we first find the
    // angle based on the previous angle (and also take into account maxAngleDelta),
    // and then draw a random number between 0 and 1. if the number is equal or less
    // than tendency, multiply angle by -1.    
        
    // generate branch points
    points.push(point);
    
    for (var j = 0; j < 4; j++) {
        point = generatePoint(point, angle, branchLength);
        points.push(point);
    }
    
    for (var i = 0; i < branchSegments; i++) {
        maxAngleDelta = Math.abs(maxAngleDelta);
        var random = getNextRandomNumber();
        if (random <= tendency) {
            maxAngleDelta *= -1;
        }
        angle = generateAngle(angle, maxAngleDelta);
        
        point = generatePoint(point, angle, branchLength);
        points.push(point);
    }
    
    return points;
}

var x = d3.scale.linear()
    .domain([0, 57])
    .range([0, 64]);
var y = d3.scale.linear()
    .domain([0, 37])
    .range([38, 0]);

var line = d3.svg.line()
    .x(function(d, i) {
        return x(d.x);
    })
    .y(function(d, i) {
        return y(d.y);
    })
    .interpolate('basis');
    
function generateColor() {
    var colors = ["#1693A5", "#45B5C4", "#7ECECA", "#A0DED6", "#C7EDE8"];
    var random = Math.floor(getNextRandomNumber() * colors.length);
    return colors[random];
}

function addBranch() {
    
    var branchPoints = generatePoints();
    var color = generateColor();

    g.append('path')
        .attr('d', line(branchPoints))
        .style('stroke', color)
        .style('fill', 'none')
        .style('stroke-width', 38)
        .on('mouseover', function(d) {
            d3.select(this).style('stroke', '#F8F9ED');
        })
        .on('mouseout', function(d) {
            d3.select(this).style('stroke', color);
        })
        ;
}

for (var i = 0; i < 67; i++) {
    addBranch();
}