ka_recursion_homework.js

// KA recursion homework assignment. Does a poor man's tunnel animation.
// Also at https://gist.github.com/ftclausen/9d42b2511a82f6d59085e70d204cf5b7

// drawShape() will draw a series of circles, each one
// smaller than the last until we hit a radius of 7 or less
var drawShape = function(x, y, radius) {
    // The base case - quit when we have a radius of 7
    if (radius <= 7) {
        return;
    }
    // Change the stroke alpha to give a misty appearance
    stroke(107, 99, 99, radius);
    // The inner circles have a thinner weight to avoid the
    // Moiré pattern.
    strokeWeight(radius / 50);
    // Actually draw the ellipse
    ellipse(x, y, radius, radius);
    // Reduce the ellipse size by 1.3 - this number results
    // in a pleasing pipe like effet
    var newRadius = radius/1.3;
    // If we have a small radius then offset the circles to
    // give the appearance of a tunnel gently curving the the left.
    // We do this at a small radius rather than from the beginning
    // to avoid shuddering when resetting between draw cycles.
    if (newRadius < 60) {
        drawShape(x - 1, y, newRadius);
    } else {
        // Else if we're at a larger radius then just draw the circle
        drawShape(x, y, newRadius);
    }
};


// How large the first circle in our recursive function
// must be. If I were making each succussive circle in the
// drawShape() function half as small as the previous then this
// is simple: maxRadius / 2 will result in smooth animation. 
// But I'm making the previous circle 1.3 times as small (to
// make for a pleasing tunnel effect. so via trial and error 
// found a value that works OK.
var startRadius = 1230;
// current radius is incremented in draw() to give the illusion
// of animation
var currentRadius = startRadius;
// for things to look smooth this needs to be a multiple of the screen
// resolution. But not too large otherwise stuff slows down.
var maxRadius = 1600;
// The frame rate at which to refresh the canvas
frameRate(30);
// Set the stroke colour for the circles
stroke(107, 99, 99);
// Background colour
fill(191, 240, 240);

// The draw() function redraws the screen at the frame rate
// given above.
var draw = function() {
    // Increase the starting radius to help our illusion of animation
    currentRadius += 10;
    drawShape(width/2, height/2, currentRadius, 10);
    // And when we reach a max value that is roughtly 2x the starting
    // value we reset for a smooth transition back to the start. If we
    // don't do this the computer becomes a space heater.
    if (currentRadius >= maxRadius) {
        currentRadius = startRadius;
    }
};