Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<style>
svg.svgTree {
z-index:4;
position:absolute;
width:1000px;
height:600px;
overflow: visible;
}
body{
background-color: #0f0f11;
}
div.svgButton{
position:absolute;
width:1000px;
height:600px;
}
path, line {
}
</style>
<body>
<div style="position:absolute;">
<svg class="svgTree"></svg>
</div>
<script>
// Tree configuration
var seed_number = Math.random()*10;
seed_number = (seed_number < 5)? 5:seed_number;
var branches = [];
var seeds_ = [];
var seed = {i: 0, x: /*Math.random()**/500, y: 600 /*- Math.random()*100*/, a: 0, l: 90/*Math.random()*100*/, d:0}; // a = angle, l = length, d = depth
for(idex = 0; idex < seed_number; idex++){
var multiplier = 1;
if(Math.random() < 0.50){ multiplier = -1;}
var seed1 = {i: 0, x: Math.random()*1000, y: 600 - Math.random()*70, a: multiplier*Math.random()*0.15, l: 90 - Math.random()*40, d:0}; // a = angle, l = length, d = depth
seeds_.push(seed1);
}
var da = 0.3; // Angle delta
var dl = 0.95; // Length delta (factor)
var ar = 0.7; // Randomness
var maxDepth = 10;
// Tree creation functions
function branch(b) {
var end = endPt(b), daR, newB;
branches.push(b);
if (b.d >= maxDepth)
return;
// Left branch
var multi = 1;
if(Math.random()<0.95){
if(Math.random() < 50) multi = -1;
daR = ar * Math.random() - (ar + Math.random()*0.01) * 0.5;
newB = {
i: branches.length,
x: end.x,
y: end.y,
a: b.a - (da + Math.random()*0.05) + daR, //Difference maker between branches.
l: b.l * (dl + multi*Math.random()*0.25),
d: b.d + 1 + Math.random()*0.2,
parent: b.i
};
branch(newB);
}
multi = 1;
// Right branch
if(Math.random()<0.95){
if(Math.random() < 50) multi = -1;
daR = ar * Math.random() - (ar + Math.random()*0.01) * 0.5;
newB = {
i: branches.length,
x: end.x,
y: end.y,
a: b.a + (da + Math.random()*0.05) + daR, //Difference maker between branches.
l: b.l * (dl + multi*Math.random()*0.25),
d: b.d + 1 + Math.random()*0.2,
parent: b.i
};
branch(newB);
}
//if(b.d >= 3){
var iteration = Math.random()*20;
var found = 0;
var multiply = 0;
for(index = 0; index < iteration; index++){
multi = 1;
if(Math.random() < 50) multi = -1;
if(Math.random()<=0.08){
found = 1;
multiply = 1;
daR = ar * Math.random() - (ar + Math.random()*0.01) * 0.5;
}else if(Math.random()>= 0.92){
found = 1;
multiply = -1;
daR = ar * Math.random() + (ar + Math.random()*0.01) * 0.5;
}
if(found == 1){
newB = {
i: branches.length,
x: end.x,
y: end.y,
a: b.a + multiply*(da + Math.random()*0.05) + daR, //Difference maker between branches.
l: b.l * (dl + multi*Math.random()*0.25),
d: b.d + 1 + Math.random()*2.2,
parent: b.i
};
branch(newB);
}
found = 0;
}
}
function regenerate(initialise) {
initialise ? create() : location.reload();
branches = [];
branch(seed);
for(idex = 0; idex < seed_number; idex ++){
branch_ = [];
branch(seeds_.pop());
initialise ? create() : location.reload();
}
/*
branches1 = [];
branch(seed1);
initialise ? create() : update();
branches2 = [];
branch(seed2);
initialise ? create() : update();
*/
}
function endPt(b) {
// Return endpoint of branch
var x = b.x + b.l * Math.sin( b.a );
var y = b.y - b.l * Math.cos( b.a );
return {x: x, y: y};
}
//100 130 0 best one.
var r = 200 + Math.random()*50;
var g = 194 + Math.random()*60;
var b = 223 + Math.random()*20;
// D3 functions
var color = d3.scaleLinear()
.domain([0, maxDepth])
.range(["#5B3977","#00c3ff"]);
function x1(d) {return d.x;}
function y1(d) {return d.y;}
function x2(d) {return endPt(d).x;}
function y2(d) {return endPt(d).y;}
function highlightParents(d) {
/*
var depth = d.d;
var colour = d3.event.type === 'mouseover' ? 'green' : color(depth);
d3.select('svg').selectAll('line').
for(var i = 0; i <= depth; i++) {
d3.select('#id-'+parseInt(d.i)).style('stroke', colour);
d = branches[d.parent];
}
*/
}
function create() {
d3.select('.svgTree')
.selectAll('line')
.data(branches)
.enter()
.append('line')
.attr('x1', x1)
.attr('y1', y1)
.attr('x2', x2)
.attr('y2', y2)
.style('stroke-width', function(d) {
var t = parseInt(maxDepth*0.45 +1 - d.d*0.45); // change here for width.
return t + 'px';
})
.style('stroke', function(d) {
return color(d.d);
})
.attr('id', function(d) {return 'id-'+d.i;});
}
regenerate(true);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment