Phyllotaxis in d3.js v4, converted from @jhubley's p5.js example, which in turn came from Jason Davies' D3.js example and Jim Bumgardner's Processing sketch for reference.
forked from jhubley's block: Phyllotaxis in d3.v4 with rectangles
Phyllotaxis in d3.js v4, converted from @jhubley's p5.js example, which in turn came from Jason Davies' D3.js example and Jim Bumgardner's Processing sketch for reference.
forked from jhubley's block: Phyllotaxis in d3.v4 with rectangles
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Phyllotaxis with rectangles</title> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| svg { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg></svg> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script> | |
| <script> | |
| var w = 960, h = 500; | |
| var cx = w/2; | |
| var cy = h/2; | |
| var circles = 2500; | |
| var sizeMultiplier = 0.02; | |
| var color = d3.scaleLinear() | |
| .domain([0, circles]) | |
| .range(["#111", "#555"]) | |
| var golden_ratio = (Math.sqrt(5)+1)/2 - 1; | |
| var golden_angle = golden_ratio * (2* Math.PI); | |
| var circle_rad = (w * .9)-20; | |
| var svg = d3.select("svg") | |
| var rects = svg.selectAll("rect.taxi") | |
| .data(d3.range(circles)) | |
| rects.enter() | |
| .append("rect") | |
| .classed("taxi", true) | |
| .attrs(function(d,i) { | |
| var ratio = i / circles; | |
| var angle = i * golden_angle; | |
| var spiral_rad = ratio * circle_rad; | |
| var x = cx + Math.cos(angle) * spiral_rad; | |
| var y = cy + Math.sin(angle) * spiral_rad; | |
| return { | |
| x: x, | |
| y: y, | |
| width: sizeMultiplier * i, | |
| height: sizeMultiplier * i, | |
| transform: "rotate(45," + [x,y] + ")", | |
| fill: color(i) | |
| } | |
| }) | |
| /* | |
| function draw(){ | |
| background('#333'); | |
| rotate(45); | |
| translate(-165,-90); | |
| for (var i = 1; i <= circles; ++i) { | |
| var ratio = i / circles; | |
| var angle = i * golden_angle; | |
| var spiral_rad = ratio * circle_rad; | |
| var x = cx + cos(angle) * spiral_rad; | |
| var y = cy + sin(angle) * spiral_rad; | |
| rect(x, y, .009 * i, .009 * i, 1, 1, 1, 0); | |
| noStroke(); | |
| if (i < 800){fill('#a6cf02');} | |
| else if (i < 1300){fill('#4ba41a');} | |
| else {fill(34,153,70);} | |
| } | |
| } | |
| */ | |
| </script> | |
| </body> | |
| </html> |
| �PNG | |