wind simulation

gist.html

$('#main').css('background', "#a8ad37");

var g = d3.select('svg')
    .append('g')
    .attr('transform', 'translate(' + $('#main').width()/2 + ', ' + 889 + ')');

var randomNumbers;
if ($('#main').data('randomNumbers')) {
    randomNumbers = $('#main').data('randomNumbers');
} else {
    randomNumbers = [];
    for (var i = 0; i < 768137; i++) {
        randomNumbers.push(Math.random());
    }
    randomNumbers = $('#main').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 ForceGravitation ()
{
}

//Changing the Wind Slider variable you can see the branch floating around.
//Simulating the Side Wind from left or right
for (var Wind = 0; Wind <= 75; Wind++)
{
    Wind=Wind+1;
    SendWind=Wind;
    generatePoints(SendWind);
}    

function generatePoints(receiveWind)
{
    var points = [],
    branchSegments = 3, branchLength = 72,
    angle = 90, point = {x:0, y:0},
    maxAngleDelta = 39,
    tendency = ((Math.sqrt(2)/Wind)*getNextRandomNumber());
    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, 54])
    .range([0, 91]);
var y = d3.scale.linear()
    .domain([0, 34])
    .range([56, 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 = ["#3ec353", "#365c61", "#9f5546", "#decfa0", "#33006b"];
    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', 3)
        .on('mouseover', function(d) {
            d3.select(this).style('stroke', "#a4af37");
        })
        .on('mouseout', function(d) {
            d3.select(this).style('stroke', color);
        })
        ;
}

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