polarflower.js

window.requestAnimFrame = (function(){
    return window.requestAnimationFrame    ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

var canvas, ctx,
    a = 100,
    aIntv = 0.05;
    color = { 
              h: 0, s: 60, l: 50,
              get: function() {
                return 'hsl('+this.h+','+this.s+'%,'+this.l+'%'+')';
              }
            },
    colorIntv = 1;

window.onload = function () {
    canvas = document.getElementById('main-canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    ctx = canvas.getContext('2d');

    drawLoop(canvas);
    canvas.focus();
}

function drawLoop () {
    ctx.save();
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.restore();
    
    drawPolarFlower(a, 2);
   
    a += aIntv;
    if (a > 125 || a < 90)
        aIntv *= -1;
   
    requestAnimFrame(drawLoop);
}

function drawPolarFlower (a, k) {
        
    ctx.lineWidth = 1;
    for (var theta=-Math.PI; theta<Math.PI; theta+=0.003) {
        var r = a* Math.cos(a * theta) + a * Math.sin(k * theta);
        
        ctx.strokeStyle = color.get();
        
        color.h += colorIntv;
        if (color.h > 255 || color.h < 0)
        colorIntv *= -1;
        
        ctx.beginPath();
        ctx.arc(r * Math.cos(theta) + canvas.width/2, r * Math.sin(theta) + canvas.height/2, 5, 0, 2*Math.PI);
        ctx.stroke();
        
    }
}

function clearContext (ctx) {
}