Showing posts with label canvas translate. Show all posts
Showing posts with label canvas translate. Show all posts

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);
}