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>