README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Phyllotaxis in p5.js

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

  

  

## index.html
<!doctype html>
<html>
<head>
  <title>Phyllotaxis</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 = w/2;
var cy = h/2;

var circles = 1500;
var golden_ratio = (Math.sqrt(5)+1)/2 - 1;
var golden_angle = golden_ratio * (2* Math.PI);
var circle_rad = (w * .5)-20;

function setup(){
  createCanvas(w,h);
}

function draw(){
  background(255);
  for (var i = 1; i <= circles; ++i) {
      var dot_rad = .006 * 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;
      ellipse(x, y, dot_rad);
      noStroke();
      if (i < 800){fill('#a6cf02');}
      else if (i < 1300){fill('#4ba41a');}
      else {fill('#229946');}
    }
}

</script>
</body>
</html>

## preview.png

      
        

          Raw
        
        
          
            
          
          
            
              preview.png
            
          
        
      
    

  
      
          
      
  

  

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png