$(function() {

  var canvas = document.getElementById("canvas"),

      context = canvas.getContext("2d"),

      width = canvas.width,

      height = canvas.height,

      fps = 60,

      drift = 2,

      total = 10,

      offset = 0,

      allcircles = [];

  function createCircle(i, count, initial_radius, x, y){

    allcircles[i] = {};

    allcircles[i].i = i;

    allcircles[i].count = count;

    allcircles[i].initial_radius = initial_radius;

    allcircles[i].x = x;

    allcircles[i].y = y;

  }

  for(var i = 0; i < total; i++) {

    createCircle( i, Math.floor(Math.random()*20)+5, Math.floor(Math.random()*30)+50, Math.random()*width, Math.random()*height );

  }

  function draw(drift) {

    for(var i = 0; i < total; i++) {

      // create inner circle and draw it:

      allcircles[i].inner = {

        x: allcircles[i].x,

        y: allcircles[i].y,

        radius: allcircles[i].initial_radius + drift

      };

      //drawCircle(inner);

      //log.console(allcircles[i])

      // get outer circles and draw them:

      allcircles[i].circles = getOuterCircles(i, allcircles[i].inner, allcircles[i].count);

      for(var j = 0; j < allcircles[i].circles.length; j++) {

        drawCircle(allcircles[i].circles[j]);

      }

    }

  }

​

  function getOuterCircles(i, inner, count) {

    var circles = [],

        angle = Math.PI * 2 / allcircles[i].count, // angle between circles

        outerRadius = getOuterRadius(allcircles[i].count, allcircles[i].inner.radius),

        r = allcircles[i].inner.radius + outerRadius,

        currentAngle;

    for(var j = 0; j < allcircles[i].count; j++) {

      currentAngle = j * angle + offset;

      circles.push({

        x: allcircles[i].inner.x + Math.cos(currentAngle) * r,

        y: allcircles[i].inner.y + Math.sin(currentAngle) * r,

        radius: outerRadius

      });

    }

    return circles; 

  }

  function getOuterRadius(count, innerRadius) {

    var s = Math.sin(Math.PI / count);

    return (s * innerRadius) / (1 - s);

  }

  function drawCircle(c) {

    context.beginPath();

    context.arc(c.x, c.y, c.radius, 0, Math.PI * 2, false);

    context.stroke();

  }

​

​

​

draw();

​

​

function update() {

        context.clearRect(0, 0, width, height);

        drift = Math.sin(offset) * 40;

        offset += 0.01;

    for(var i = 0; i < total; i++) {

        draw(drift);

    }

}

​

setInterval(function() {

        update();

    }, 1000/fps);

​

​

});