strange canvas electric donut

by rastrano

HTML

<canvas></canvas>

CSS

html { height: 100%; }
body {
    margin: 0;
    padding: 0;
    background-color: #000;
    height: 100%;
}

JavaScript

(function() {

  var Particle = function(x, y, vx, vy) {
    this.x = x || 0;
    this.y = y || 0;
    this.vx = vx || 0;
    this.vy = vy || 0;
    
    this.update = function (vx, vy) {
      vx = vx || 0,
      vy = vy || 0;

      this.x +=  vx;
      this.y +=  vy;
    };
  };

  var ParticleSystem = function(container, center, count) {
    var i = 0,
        c = container.getContext('2d');

    count = count || 0;

    this.particles = [];

    this.center = {
      x: center.x || 0,
      y: center.y || 0
    };

    // Initialization
    for ( ; i < count ; ++i ) {
      var x = this.center.x+(Math.sin(i)*100),
          y = this.center.y+(Math.cos(i)*100);
          vx = Math.random(),
          vy = Math.random();

      this.particles.push(new Particle(x, y, vx, vy));
    }

    this.update = function() {
      for ( i = 0 ; i < count ; ++i ) {

        // We don't want to process particles that
        // we can't see anymore
        if (this.particles[i].x > 0 &&
          this.particles[i].x < container.width &&
          this.particles[i].y > 0 &&
          this.particles[i].y < container.height) {
          
 
            
          this.particles[i].update(
           (Math.random()-0.5)*2,
           (Math.random()-0.5)*2
          );
            
           // 306=0
          // console.log("xx:"+this.particles[i].x);
           //216=0
          //  console.log("yy:"+this.particles[i].y);
                             

          //c.fillRect(this.particles[i].x, this.particles[i].y, 1, 1);
            
            var  startAngle = 0,
                 endAngle = Math.PI*2,
                 antiClockwise = false;
            
            var  radius =  (Math.random()*1.1);
            
            c.beginPath();
            c.arc(this.particles[i].x, this.particles[i].y, radius, startAngle, endAngle, antiClockwise);
            c.closePath();
            
            c.fill();  
        }
      }
    };
  };


  // shim layer with setTimeout...