Skip to content

Instantly share code, notes, and snippets.

@gabrielflorit
Created July 26, 2012 18:15
Show Gist options
  • Save gabrielflorit/3183601 to your computer and use it in GitHub Desktop.
Save gabrielflorit/3183601 to your computer and use it in GitHub Desktop.
blue tree
$('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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment