Skip to content

Instantly share code, notes, and snippets.

@gabrielflorit
Forked from anonymous/water.css
Created July 30, 2012 12:56
Show Gist options
  • Save gabrielflorit/3206704 to your computer and use it in GitHub Desktop.
Save gabrielflorit/3206704 to your computer and use it in GitHub Desktop.
svg {
background: #000000;
}
.branch {
stroke: #FFFFFF;
}
.branchNode {
fill: #FFFFFF;
}
var width = $('svg').width();
var height = $('svg').height();
var svg = d3.select('svg');
var g = svg.append('g');
var line;
var createBranches;
var trunk;
var trunk_width;
var branches;
var flowers;
svg
.attr('width', width)
.attr('height', height);
line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate('basis');
createBranches = function(trunk) {
var createLeftBranch = function(parent, angleModifier, lengthModifier, widthModifier) {
var angle = parent[1].angle + angleModifier;
var width = parent[1].width * widthModifier;
var length = parent[1].length * lengthModifier;
var bit = parent[1].width/2 - ((width/2)/Math.sin(angleModifier + Math.PI/2));
var radius = Math.sqrt(Math.pow(parent[1].length, 2) + Math.pow(bit, 2));
var initialAngle = (-Math.PI/2 - parent[1].angle - Math.atan(bit/parent[1].length));
var parent_x = parent[0].x + parent[1].length*Math.cos(initialAngle);
var parent_y = parent[0].y + parent[1].length*Math.sin(initialAngle);
var branch = [
{ 'x': parent_x, 'y': parent_y },
{
'x': parent_x - Math.sin(angle) * length,
'y': parent_y - Math.cos(angle) * length,
'angle': angle,
'width': width,
'length': length
}
];
return branch;
};
var createRightBranch = function(parent, angleModifier, lengthModifier, widthModifier) {
var angle = parent[1].angle - angleModifier;
var width = parent[1].width * widthModifier;
var length = parent[1].length * lengthModifier;
var bit = parent[1].width/2 - ((width/2)/Math.sin(angleModifier + Math.PI/2));
var radius = Math.sqrt(Math.pow(parent[1].length, 2) + Math.pow(bit, 2));
var initialAngle = (-Math.PI/2 - parent[1].angle + Math.atan(bit/parent[1].length));
var parent_x = parent[0].x + parent[1].length*Math.cos(initialAngle);
var parent_y = parent[0].y + parent[1].length*Math.sin(initialAngle);
var branch = [
{
'x': parent_x,
'y': parent_y,
'angle': angle,
'width': width,
'length': length
},
{
'x': parent_x - Math.sin(angle) * length,
'y': parent_y - Math.cos(angle) * length
},
{
'x': parent_x - Math.sin(angle) * length * 2,
'y': parent_y - Math.cos(angle) * length
}
];
return branch;
};
var createChildBranches = function(parent) {
var i = 0;
if (parent[1].width > 17.2) {
var leftBranch = createLeftBranch(parent, 0.7, 0.7, 0.7);
var rightBranch = createRightBranch(parent, 0.7, 0.7, 0.7);
/* for (i = 0; i < 20; i++) {
flowers.push(
{
'x': leftBranch[0].x - Math.sin(leftBranch[1].angle)
* leftBranch[1].length * Math.random(),
'y': leftBranch[0].y - Math.cos(leftBranch[1].angle)
* leftBranch[1].length * Math.random(),
'r': (4.8)
},
{
'x': rightBranch[0].x - Math.sin(rightBranch[1].angle)
* rightBranch[1].length * Math.random(),
'y': rightBranch[0].y - Math.cos(rightBranch[1].angle)
* rightBranch[1].length * Math.random(),
'r': (4.4)
}
);
}*/
return [leftBranch, rightBranch];
}
else {
var radius = parent[1].width * 2;
var angle;
/* for (i = 0; i < Math.floor((Math.random()*20)+1); i++) {
angle = i + parent[1].angle + Math.PI;
flowers.push(
{
'x': parent[1].x + radius * Math.cos(angle),
'y': parent[1].y + radius * Math.sin(angle),
'r': (parent[1].width * (Math.random()*2))
}
);
}*/
return null;
}
};
// create an array that will hold the 'unprocessed' branches
var unprocessedBranches = [];
// create an array that will hold the 'processed' branches
var processedBranches = [];
var parentBranch;
var childBranches;
// put trunk in unprocessed
unprocessedBranches.push(trunk);
// while unprocessed is not empty
while (unprocessedBranches.length > 0) {
// pop an element from unprocessed
parentBranch = unprocessedBranches.pop();
// create child branches from the parent branch
childBranches = createChildBranches(parentBranch);
// put child branches in unprocessed
if (childBranches) {
// unprocessedBranches.push(childBranches[0]);
unprocessedBranches.push(childBranches[1]);
}
// put parent branch in processed
processedBranches.push(parentBranch);
}
return processedBranches;
};
trunk_width = width/20;
trunk = [
{ 'x': width/2, 'y': height },
{ 'x': width/2, 'y': height - height/5 }
];
trunk[1].length = Math.sqrt(Math.pow(trunk[1].x - trunk[0].x, 2) + Math.pow(trunk[1].y - trunk[0].y, 2));
trunk[1].angle = 0;
trunk[1].width = trunk_width;
flowers = [];
branches = createBranches(trunk);
g.selectAll('branches')
.data(branches)
.enter().append('path')
.attr('d', line)
.style('stroke-width', function(d) { return d[0].width; } )
.attr('class', function(d) {
return 'branch';
});
g.selectAll('branchNodes')
.data(branches)
.enter().append('circle')
.attr('cx', function(d) { return d[0].x; } )
.attr('cy', function(d) { return d[0].y; } )
.attr('r', function(d) { return d[0].width/2; } )
.attr('class', function(d) {
return 'branchNode';
});
g.selectAll('flowers')
.data(flowers)
.enter().append('circle')
.attr('cx', function(d) { return d.x; } )
.attr('cy', function(d) { return d.y; } )
.attr('r', function(d) { return d.r; } )
.attr('class', function(d) {
return 'flower-' + Math.floor(Math.random()*4);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment