Created
October 8, 2018 21:53
-
-
Save TVerduyn/9dc73337315ff4cf0bf57cba5d3624f3 to your computer and use it in GitHub Desktop.
Barnsley Fern
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
| <html> | |
| <Title>Barnsley Fern</Title> | |
| <div id="vis"></div> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <!--script src="https://unpkg.com/mathjs@5.2.0/dist/math.js"></script--> | |
| <script src="https://unpkg.com/mathjs@5.2.0/dist/math.min.js"></script> | |
| <script> | |
| //https://en.wikipedia.org/wiki/Barnsley_fern | |
| var Black_Spleenwort_Matrix = [{"w":"ƒ1", "a":0, "b":0, "c":0, "d":0.16, "e":0, "f":0, "p":0.01, "Portion generated":"Stem"}, | |
| {"w":"ƒ2", "a":0.85, "b":0.04, "c":-0.04, "d":0.85, "e":0, "f":1.60, "p":0.85, "Portion generated":"Successively smaller leaflets"}, | |
| {"w":"ƒ3", "a":0.20, "b":-0.26, "c":0.23, "d":0.22, "e":0, "f":1.60, "p":0.07, "Portion generated":"Largest left-hand leaflet"}, | |
| {"w":"ƒ4", "a":-0.15, "b":0.28, "c":0.26, "d":0.24, "e":0, "f":0.44, "p":0.07, "Portion generated":"Largest right-hand leaflet"}]; | |
| // get the window size | |
| var totalwidth = (window.innerWidth > 0) ? window.innerWidth : screen.width; | |
| var totalheight = (window.innerHeight > 0) ? window.innerHeight : screen.height; | |
| var width = totalwidth-50 | |
| var height = totalheight-50 | |
| //set the scales | |
| var xscale = d3.scaleLinear() | |
| .domain([ -3 , 3 ]) | |
| .range([0, width-50]); | |
| var yscale = d3.scaleLinear() | |
| .domain([ 0 , 10 ]) | |
| .range([height-50, 0]); | |
| var svg = d3.select("#vis") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // initialise the dataset | |
| var dataset = [{"id":0, "x":0, "y":0}]; | |
| for (let i = 0; i < 50000; i++) { | |
| var matrixrow = matrix_selection(); | |
| var newdatapoint = fern_matrix(matrixrow.a,matrixrow.b,matrixrow.c,matrixrow.d,matrixrow.e,matrixrow.f,dataset[i].x,dataset[i].y) | |
| dataset.push({"id":i+1, "x":newdatapoint[0][0], "y":newdatapoint[1][0]}) | |
| } | |
| svg.append ("g") | |
| .selectAll("circle") | |
| .data(dataset) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d) {return xscale(d.x);}) | |
| .attr("cy", function(d) {return yscale(d.y);}) | |
| .attr("fill","#149b00") | |
| .attr("opacity",0) | |
| .attr("r", 1) | |
| .transition() | |
| .duration(20) | |
| .delay(function(d) {return 1000 + d.id * 0.1;}) | |
| .attr("opacity",1); | |
| function matrix_selection() { | |
| //to select a random row of the fern matrix using its weightings | |
| var testvalue = Math.random(); | |
| var testcomparison = 0; | |
| for (let j = 0; j < Black_Spleenwort_Matrix.length; j++) { | |
| testcomparison = testcomparison + Black_Spleenwort_Matrix[j].p | |
| if (testvalue < testcomparison) { | |
| return Black_Spleenwort_Matrix[j] | |
| } | |
| } | |
| } | |
| function fern_matrix(a,b,c,d,e,f,x,y) { | |
| //to calculate the new data point coordinates | |
| var mult_matrix = [[a,b],[c,d]]; | |
| var add_matrix = [[e],[f]]; | |
| var coord_matrix = [[x],[y]]; | |
| return math.add(math.multiply(mult_matrix,coord_matrix),add_matrix) | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment