/*

For JSBin 5th birthday compo

​

Author: Kushagra Gour (@chinchang457)

​

*/

​

var PI_BY_180 = Math.PI / 180,

    PI2 = 2 * Math.PI,

    c = document.querySelector('#c'),

    ctx = c.getContext('2d'),

    c2 = document.querySelector('#c2'),

    ctx2 = c2.getContext('2d'),

    dots = [],

    radius = 20;

      function Dot (cx, cy, angle) {

        this.cx = cx;

        this.cy = cy;

        this.angle = angle;

      }

      Dot.prototype.draw = function () {

        ctx.beginPath();

        ctx.arc(this.x, this.y, 3, 0, 2 * Math.PI, false);

        ctx.fillStyle = 'black';

        ctx.fill();

        return this;

      };

      Dot.prototype.update = function () {

        this.angle += 3;

        this.x = this.cx + radius * Math.cos(this.angle * PI_BY_180);

        this.y = this.cy + radius * Math.sin(this.angle * PI_BY_180);

        return this;

      };

      function animate() {

        ctx.clearRect (0, 0, 600, 600);

        ctx.save();

        ctx.translate(50, 50);

        for (var i = 0; i < dots.length; i++) {

          dots[i].update();

          dots[i].draw();

        }

        ctx.restore();

        requestAnimationFrame(animate);

      }

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

        for (var j = 0; j < 20; j++) {

          var cx = i * 23,

              cy = j * 23;

          // draw circles in bg canvas

          ctx2.save();

          ctx2.translate(50, 50);

          ctx2.strokeStyle = "#333";

          ctx2.beginPath();

          ctx2.arc(cx, cy, radius, 0, PI2, false);

          ctx2.stroke();

          ctx2.restore();

          // draw the dots

          var d = new Dot(cx, cy, i * 20 + j * 20);

          dots.push(d);

        }

      }

      animate();