Polar Rose

by theoperatore

HTML

<canvas id="playground" height="300" width="1000">you don't support canvas. so sad.</canvas>

CSS

canvas {
    margin: 0 auto;
}

JavaScript

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

var canvas = document.getElementById('playground'),
    ctx = canvas.getContext('2d'),
    interval,
    particles = [],
    num = 100,
    startAngle = 0,
    particleDist = 100,
    theta = 0,
Particle = function (x, y, drawRadius) {
    this.x = x;
    this.y = y;
    this.radius = drawRadius;
};

//initialize particles
for (var i = 0; i < num; i++) {
    particles.push(new Particle(0, 0, 3));
}

function update(time) {
    
    for (var i = 0; i < particles.length; i++) {
    
        theta = startAngle * i;
        
        particles[i].x = (canvas.width / 2)  + 150 * Math.cos((24) * theta) * Math.sin(theta);
        particles[i].y = (canvas.height / 2) + 150 * Math.cos((24) * theta) * Math.cos(theta);
    }

    startAngle += 0.0000125;
    //theta += 0.0125;


    draw();
    requestAnimFrame(update);
}


function draw() {
    ctx.clearRect(0, 0, 1000, 450);
    for (var i = 0; i < particles.length; i++) {
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.arc(particles[i].x, particles[i].y, particles[i].radius, 0, 2 * Math.PI, false);
        ctx.fill();
    }
}

requestAnimFrame(update);