Spiral

a mind bending spiral. the changing

by theoperatore

HTML

<div>
    <canvas id='playground' width='1000' height='300'>Really Awesome Content</canvas>
</div>

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 = 200,
    startAngle = 0,
    particleDist = 500,
    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, 5));
}

function update(time) {    
    for (var i = 0; i < particles.length; i++) {
        var radius = particleDist * i / particles.length;
        var theta = startAngle * i;

        //var x = (canvas.width / 2) + radius * Math.sin(theta);
        //var y = (canvas.height / 2) + radius * Math.cos(theta);

        //particles[i].x = x;
        //particles[i].y = y;
        
        particles[i].x = (canvas.width / 2) + radius * Math.cos(3*theta);
        particles[i].y = (canvas.height / 2) + radius * Math.sin(3*theta);
    }

    startAngle += 0.00015;

    draw();
    requestAnimFrame(update);
}


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

requestAnimFrame(update);