Vortex and Timer

Something we never touched on with the prior walkthroughs was time-dependent animation.  Let us approach this new concept with the vortex.  In JavaScript, we use the setInterval() thread seen below.

What goes inside of the drawShapes function found in the template is the set up, the timed thread, and some equations quite similar to the spiral formulas.

We translate the screen like we have done with the spiral and also rotate the screen by 90 degrees.

vh and vw are the restrictions we put on the vortex - the widest width/height are dependent on these variable numbers.

ij is a number that we can change to mix the results of the vortex spiral.

Stepping into the setInterval() method, the first thing we'll need to do is clear the screen every time and I've provided a short method which fills a white rectangle over the canvas.

We then increment the time-dependent variable, ii.  This variable works with the "waiting period" parameter near the end of the setInterval() method - in this case 50.  Mixing and matching these two will speed up the animation and can make it smoother or more jolted.

function drawShapes() {

    c.translate(w / 2, h / 2);
    c.rotate(Math.PI);

    var ii = 1,
        x, y;

    var vh = 2.5,
        vw = 2;

    ij = 2;

    r = 5;

    setInterval(function() {

        clearScreen();
        c.fillStyle = 'black';

        ii += 0.01;

        for (i = 0; i * r < h; i++) {

            x = i * vw * Math.sin((ij * i) + ii);
            y = i * vh;

            c.beginPath();
            drawCircle(x, y, 5);

            c.beginPath();
            drawCircle(-x, -y, 5);
            c.fill();
        }
    }, 50);
}