JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<div id="canvas-wrap"></div>
<button id="b">Kill switch</button>

JavaScript

var MGR = function(c, w, h, fps){
    var self = this,
        ctx = c.getContext("2d"),
        bodies = this.getBodies();

    this.interval = setInterval(function(){
        ctx.fillStyle = "rgba(0, 0, 0, .2)";
        self.rect(ctx,0,0,w,h);
        for (var i = 0; i < bodies.length; i++) {
            bodies[i] = bodies[i].draw(ctx, w, h, bodies);
        }
        bodies = self.cleanupBodies(bodies);
    }, fps);
};

// (16777215).toString(16); // ffffff
MGR.prototype.getUniqueColor = function(){
    if(this.usedColors === undefined){
        this.usedColors = {"#":0};
    }
    var used = this.usedColors;
    var a = ["5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
    
    do {
        var s = "#";
        var c = 6;
        while(c--) {
            s += a[Math.floor(Math.random() * a.length)];
        }
    } while(used[s] !== undefined);
    
    this.usedColors[s] = 0;

    return s;
};

MGR.prototype.getBodies = function(){
    var bodies = [
        new Body(400, 400, 0, 0, 10000, this.getUniqueColor()),
        new Body(330, 400, 0, 4, 10, this.getUniqueColor()),
        new Body(260, 400, 0, 3, 10, this.getUniqueColor()),
        new Body(190, 400, 0, 2, 10, this.getUniqueColor()),
        new Body(470, 400, 0, -4, 10, this.getUniqueColor()),
        new Body(540, 400, 0, -3, 10, this.getUniqueColor()),
        new Body(610, 400, 0, -2, 10, this.getUniqueColor())
    ];
    
    return bodies;
};

MGR.prototype.cleanupBodies = function(bodies){
    var a = [],
        b;
    for (var i = 0; i < bodies.length; i++) {
        b = bodies[i];
        if (b.children.length) {
            a.push.apply(a,b);
            b.children = [];
        }
        if (b.m > 0) {
            a.push(b);
        }
    }
    return a;
};

MGR.prototype.rect = function(ctx,x,y,w,h) {
    ctx.beginPath();
    ctx.rect(x,y,w,h);
    ctx.closePath();
    ctx.fill();
};

MGR.prototype.kill = function(){
    var self = this;
    clearInterval(self.interval);
};


var...