JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="gridCanvas"></canvas>
<div id="fps"></div>

CSS

html, body { 
    overflow: hidden; 
    background: #000; 
    padding: 0px; margin: 0px; 
    width: 100%; height: 100%; 
}
#fps {
  position: absolute;
  top:0;
  left:0;
  color: green;
}

JavaScript

"use strict"

    var fps = {	
    	startTime : 0,
      frameNumber : 0,
      getFPS : function(){
    		this.frameNumber++;		
        var d = new Date().getTime(),
        		currentTime = ( d - this.startTime ) / 1000,
            result = Math.floor( ( this.frameNumber / currentTime ) );
        if( currentTime > 1 ){
        	this.startTime = new Date().getTime();
          this.frameNumber = 0;
        }
        return result;	
      }
    };

		var f = document.querySelector("#fps");
		var ctx = document.getElementById('gridCanvas').getContext('2d');
		var width = ctx.canvas.width = window.innerWidth;
		var height = ctx.canvas.height = window.innerHeight;
		var centerX = ctx.canvas.width / 2;
		var centerY = ctx.canvas.height / 2;
		var pixels;
		var dotCount = 3000;
		var friction = 1;
		var kick = 0;
		var halfKick = kick / 2;
		var gravity = 1;
    
		function Point(x, y) {
			this.x = x || 0;
			this.y = y || 0;
		}
		
		function Dot(x, y, m){
			this.x = x || Math.floor(Math.random() * width);
			this.y = y || Math.floor(Math.random() * height);		
			this.vector = new Point((Math.random() *kick) - halfKick, (Math.random() * kick) - halfKick);
			this.mass =  m || 1;			
		}
        
        Dot.prototype.Bounce = function(){
            // Bounce
            var bounce = -.5
            if (this.x > width) { this.x = width; this.vector.x *= bounce;}
            if (this.x < 0) { this.x = 0; this.vector.x *= bounce;}
            if (this.y > height) { this.y = height; this.vector.y *= bounce;}
            if (this.y < 0) { this.y = 0; this.vector.y *= bounce;}
        };
                
        Dot.prototype.Wrap = function(){
            // wrap
            if (this.x > width) { this.x = 0; }
            if (this.x < 0) { this.x = width; }
            if (this.y > height) { this.y = 0; }
            if (this.y < 0) { this.y = height; }
        };
    
        Dot.prototype.Bonk = function(){
            // Bonk
            if (this.x > width) { this.x...