Tuesday, June 18, 2013

Sunflower Spiral

In celebration of summer and my sunflowers reaching 6 inches already, let's render a Fermat spiral!

The first concept is to translate the canvas.  This simply moves the center (0,0).  c.translate(w/2,h/2) puts (0,0) right in the middle of the screen rather than the top left and can be useful in a number of ways.

Next, we'll declare the constant (R)adius of each circle, our constant scaling factor (CSF) will be twice as large as our radius - this is the distance between each circle.  Constant iterations (C_I) will be our stopping point, or how far out our spiral reaches.

To calculate a Vogel spiral, we use the formula 

The next set of variables relate to the formula, where our r is the r from the calculation (polar coordinate radius, different from the radius of our circles), CSF=c, i=n, θ=θ.  Inside of our loop, we place this calculation.  We then convert from polar to cartesian coordinates and draw each point in the spiral.





function drawShapes() {

    c.translate(w / 2, h / 2);

    var R = 5,
        CSF = R * 2,
        C_I = 300,
        i = 1,
        r, x, y, theta;

    do {

        r = CSF * Math.sqrt(i);
        theta = i * 137.5;

        x = r * (Math.cos(theta));
        y = r * (Math.sin(theta));

        drawCircle(x, y, R);

        i++;
    }
    while (i < C_I);
}

No comments: