JSFiddle - React, Tailwind, and code Playground

by Admiral Potato

HTML

<!DOCTYPE html>
<html>
    <body>
        <canvas id="canvas"></canvas>
        <script src="https://raw.github.com/incompl/keyDecode/master/keyDecode.js"></script>
    </body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    border: 0;
}
html, body, canvas{
    width: 100%;
    height: 100%;
}
body{
    background-color: #000;
}
canvas{
    display: block;
    position:absolute;
}

JavaScript

var gid = function(id){return document.getElementById(id);},
canvas = gid('canvas'),
c = canvas.getContext('2d'),
pi = Math.PI, tau = pi * 2,
w=0,h=0,wph=0,cx=0,cy=0,cro=0,q=[];

var resize = function(){
    cx = Math.floor(w/2);
    cy = Math.floor(h/2);
    canvas.width = w;
    canvas.height = h;
    wph = w+h;
}
var update = function(){
    w = window.innerWidth;
    h = window.innerHeight;
    if(w+h !== wph){resize();}
    c.fillStyle = 'rgba(0,0,0,.2)';
    c.fillRect(0,0,w,h);
    c.save();
    c.translate(cx,cy);
    for(cro = 0; cro < q.length; cro += 1){
        q[cro].update();
    }
    c.restore();
}


update();
console.log(c);

var wrapFunc = function(){
    t = this;
         if(t.x > cx + t.radius){t.x = -cx - t.radius;}
    else if(t.x < -cx - t.radius){t.x = cx + t.radius;}
    else if(t.y > cy + t.radius){t.y = -cy - t.radius;}
    else if(t.y < -cy - t.radius){t.y = cy + t.radius;}
}

var Wiggly = function(x,y,color){
    this.x = x;
    this.y = y;
    this.radius = 10;
    this.color = color;
    return this;
}
Wiggly.prototype = {
    wrap:wrapFunc,
    draw:function(){
        c.beginPath();
        c.moveTo(this.x, this.y);
        c.arc(this.x, this.y, this.radius, 0, tau, false);
        c.fillStyle = this.color;
        c.fill();
        c.lineWidth = 5;
        //c.strokeStyle = this.color;
        //c.stroke();
        //console.log('!!');
    },
    update:function(){
        this.x += (Math.random() -.5) * 30;
        this.y += (Math.random() -.5) * 30;
        this.wrap();
        this.draw();
    }
};

for(var i = 0; i < 10; i += 1){
    var myWiggly = new Wiggly(0,0, 'hsl(' + (i * 36) + ',100%, 50%)');
    q.push(myWiggly);
}



//Thanks, Paull Irish
// requestAnim shim layer by Paul Irish
window.requestAnimationFrame = (function(){
return  window.requestAnimationFrame       || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
   ...