JSFiddle - React, Tailwind, and code Playground

by williammanco

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 += this.vx + vx;
      this.y += this.vy + 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,
          y = this.center.y,
          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.tan(this.particles[i].x), Math.tan(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.2);
            
            c.beginPath();
            c.arc(this.particles[i].x, this.particles[i].y, radius, startAngle, endAngle, antiClockwise);
            c.closePath();
            
            c.fill();  
        }
      }
    };
  };


  // shim layer with setTimeout fallback by Paul Irish
  // Used as an efficient and browser-friendly
  // replacement for setTimeout or setInterval
  window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame   ||
   ...