JSFiddle - React, Tailwind, and code Playground

by xurrux

HTML

<canvas id="gridCanvas" width="1000" height="1000"></canvas>

CSS

body {
            background-color: #000000;
            margin: 0px;
        }
        
        canvas,
        img {
            image-rendering: optimizeSpeed;
            image-rendering: -moz-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: optimize-contrast;
            -ms-interpolation-mode: nearest-neighbor;
        }

JavaScript

"use strict"
    
        var ctx = document.getElementById('gridCanvas').getContext('2d');
		ctx.canvas.width = window.innerWidth;
		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() * ctx.canvas.width);
			this.y = y || Math.floor(Math.random() * ctx.canvas.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 > ctx.canvas.width) { this.x = ctx.canvas.width; this.vector.x *= bounce;}
            if (this.x < 0) { this.x = 0; this.vector.x *= bounce;}
            if (this.y > ctx.canvas.height) { this.y = ctx.canvas.height; this.vector.y *= bounce;}
            if (this.y < 0) { this.y = 0; this.vector.y *= bounce;}
        };
                
        Dot.prototype.Wrap = function(){
            // wrap
            if (this.x > ctx.canvas.width) { this.x = 0; }
            if (this.x < 0) { this.x = ctx.canvas.width; }
            if (this.y > ctx.canvas.height) { this.y = 0; }
            if (this.y < 0) { this.y = ctx.canvas.height; }
        };
    
        Dot.prototype.Bonk = function(){
            // Bonk
            if (this.x > ctx.canvas.width) { this.x = ctx.canvas.width; this.vector.x = 0; this.vector.y = 0; }
            if (this.x < 0) { this.x = 0; this.vector.x = 0; this.vector.y = 0; }
            if (this.y > ctx.canvas.height) { this.y = ctx.canvas.height; this.vector.x = 0; this.vector.y = 0; }
            if (this.y < 0) { this.y = 0; this.vector.x = 0; this.vector.y = 0; }			
        };
        
       ...