Phylotaxys

Phylotaxis spiral. 'Golden spiral'.

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.15/processing.js"></script>
<canvas></canvas>

CSS

canvas {
    padding-top: 2.5em;
}
body {
    overflow: hidden;
    background: #101010;
    margin: 0;
    padding: 0;
}
</style> <script type="text/javascript"> window.addEventListener('load', function() {
    var scripts=document.body.getElementsByTagName('script');
    var canvases=document.body.getElementsByTagName('canvas');
    new Processing(canvases[0], scripts[0].text);
}
, false);
 // Here prevent javascript in body from throwing error </script> <style>

JavaScript

float num = 300; // Num of items
int seedSize = 5;

void setup() {
    size(800, 600);
    smooth(8);
    noStroke();
    ellipseMode(RADIUS);
    background(0, 10);
}

void draw() {
    float cx = width / 2; // center 
    float cy = height / 2; // center
    float radius = width * 0.35; // Big figure`s outer radius.

    float phi = (sqrt(5) + 1) / 2; // golden ratio
    float goldenAngle = TAU * phi; // golden angle


    float incr = TAU / num; // Increase angle by that value
    colorMode(HSB, 360, 100, 100);

    for (int i = 1; i < num; i++) {
        float ratio = i / num;
        float theta = i * goldenAngle;
        float r = ratio * radius;
        float x = cx + cos(theta) * r;
        float y = cy + sin(theta) * r;
        fill(i + 16, 90, 90);
        ellipse(x, y, seedSize, seedSize);
    }
}