JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<canvas id="canvas"></canvas>
<div id="W">M</div>
<div id="fps"></div>

CSS

body, html {
    background: #eee;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding:0;
    margin:0;
}
#canvas {
    padding:0;
    display:block;
    margin:0 auto;
}
#W {
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-weight:100;
    color:#000;
    text-align:center;
    line-height:400px;
    font-size:100px;
    width:100%;
    height:400;
    position:absolute;
    z-index:999;
    top:0;
    left:0;
}
#fps {
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-weight:100;
    width:100px;
    height:30px;
    position:fixed;
    top:0;
    left:0;
    color:#fff;
}

JavaScript

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var circles = [],
    canvasW = canvas.width,
    canvasH = canvas.height,
    screencap = context.getImageData(0, 0, canvasW, canvasH);

var fps = 0,
    now, lastUpdate = (new Date) * 1 - 1,
    fpsOut = document.getElementById('fps'),
    intervalfps = 1000 / 60,
    last, t;

function Point(x, y) {
    this.x = x;
    this.y = y;
}

function RadCircle(center, radius, points, pointradius, rotation) {
    this.self = this;
    this.center = center;
    this.radius = radius;
    this.points = points;
    this.pointary = [];
    this.rotation = rotation;
    this.angle = 0;
    this.pointradius = pointradius;

    for (var i = 0; i < this.points; i++) {
        var p = new Point(center[0] + Math.cos(i * ((Math.PI * 2) / this.points) + this.angle) * this.radius, center[1] + Math.sin(i * ((Math.PI * 2) / this.points) + this.angle) * this.radius);
        this.pointary.push(p);
    }

    this.Update = function () {
        for (var i = 0; i < this.pointary.length; i++) {
            this.pointary[i].x = center[0] + Math.cos(i * ((Math.PI * 2) / this.points) + this.angle) * this.radius;
            this.pointary[i].y = center[1] + Math.sin(i * ((Math.PI * 2) / this.points) + this.angle) * this.radius;
            context.beginPath();
            context.arc(this.pointary[i].x, this.pointary[i].y, this.pointradius, 0, 2 * Math.PI, false);
            context.fillStyle = 'rgba(0,0,0,0.5)';
            context.fill();
            for (var j = 0; j < circles.length; j++) {
                for (var k = 0; k < circles[j].pointary.length; k++) {
                    var dx = circles[j].pointary[k].x - this.pointary[i].x,
                        dy = circles[j].pointary[k].y - this.pointary[i].y,
                        dist = Math.sqrt(dx * dx + dy * dy);

                    if (dist <= this.radius * 1.1) {
           ...