README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Phyllotaxis in p5.js - rectangles!

I used Jason Davies' D3.js example and Jim Bumgardner's Processing sketch for reference.

  

  

## index.html
<!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>

## preview.png

      
        

          Raw
        
        
          
            
          
          
            
              preview.png
            
          
        
      
    

  
      
          
      
  

  

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png