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 | |