D3 Examples - Phyllotaxis in p5.js with rectangles

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <title>Phyllotaxis with rectangles</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
​
<script>
​
var w = 500, h = 500;
​
var cx = 500;
var cy = 0;
​
var circles = 2500;
var golden_ratio = (Math.sqrt(5)+1)/2 - 1;
var golden_angle = golden_ratio * (2* Math.PI);
var circle_rad = (w * .9)-20;
​
function setup(){
  createCanvas(w,h);
}
​
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>
​
    