-
-
Save LieutenantChips/219feaac921634c417858948f63043da to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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