JSFiddle - React, Tailwind, and code Playground

by Kai

CSS

html, body, canvas {
    margin: 0;
    padding: 0;
}

JavaScript

var canvas = document.createElement('canvas'),
    c = canvas.getContext('2d'),
    WIDTH = canvas.width = window.innerWidth,
    HEIGHT = canvas.height = window.innerHeight,
    MAX_CIRCLES = 10000,
    circles = [],
    i = 0,
    len = 0;

document.body.appendChild(canvas);
window.addEventListener('resize', function () {
    WIDTH = canvas.width = window.innerWidth;
    HEIGHT = canvas.height = window.innerHeight;
});

function Circle (posx, posy) {
    this.pos = {
        x: posx || WIDTH/2,
        y: posy || HEIGHT/2
    };
    
    this.vel = {
        x: (Math.random() * 19) + 1,
        y: (Math.random() * 19) + 1
    };
    
    this.angle = (Math.random() * (359)) + 1;
    this.mass = 0;
    this.drag = 1;
    this.gravity = 0;
    this.radius = (Math.random() * 14) + 1;
    this.color = '#000000';
}

Circle.prototype = {
    update: function () {
        var radians = this.angle * Math.PI/180;
        
        this.vel.x *= this.drag;
        this.vel.y *= this.drag;
        
        this.vel.y += Math.sin(radians) * this.gravity;

        this.pos.x += Math.cos(radians) * this.vel.x;
        this.pos.y += Math.sin(radians) * this.vel.y;
        
        this.testWallCollision();
      
    },
    
    render: function (c) {
        c.save();
        c.beginPath();
        c.fillStyle = this.color;
        c.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI*2, true);
        c.fill();
        c.closePath();
        c.restore();
    },
    
    testWallCollision: function () {
        if ( (this.pos.x + this.radius) > WIDTH || (this.pos.x + this.radius) < 0 ) {
            this.vel.x *= -1;
        } else if ( (this.pos.y + this.radius) > HEIGHT || (this.pos.y + this.radius) < 0 ) {
            this.vel.y *= -1;
        }
    }
};


function createCircles (n) {
    if (!n) return;
    var circles = [];
    for (var i = 0; i < n; i++) circles.push(new Circle());
    return circles;
}

function loop () {
    c.clearRect(0, 0, WIDTH, HEIGHT);
    
   ...