JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<script type="text/js-worker"> 
    onmessage = function (e) {
    if (e.data == "draw") w.getPoints();

};
Number.prototype.add = function (b) {
    return this + b;
};
Number.prototype.sub = function (b) {
    return this - b;
};
Number.prototype.mult = function (b) {
    return this * b;
};
Number.prototype.div = function (b) {
    return this / b;
};
Array.prototype.add = function (b) {
    return this.map(function (e, i, a) {
        return e + b[i];
    });
};
Array.prototype.sub = function (b) {
    return this.map(function (e, i, a) {
        return e - b[i];
    });
};
Array.prototype.sqrt = function () {
    return this.map(function (e, i, a) {
        return Math.sqrt(e);
    });
};
Array.prototype.mult = function (b) {
    if (b.length) return this.map(function (e, i, a) {
        return e * b[i];
    });
    return this.map(function (e, i, a) {
        return e * b;
    });
};
Array.prototype.div = function (b) {
    if (b.length) return this.map(function (e, i, a) {
        return e / b[i];
    });
    return this.map(function (e, i, a) {
        return e / b;
    });
};
var temp = 4;
var lerp = function (d, p1, p2) {
    return ((p1.sub(p2)).mult(d)).add(p2);
};
var Vertex = (function () {



    function Vertex() {
        this.arg = [];
        Array.prototype.push.apply(this.arg, arguments);
        return this.arg;
    }
    Vertex.prototype.lerpTo = function (d, other) {
        return new Vertex(lerp(d, other.x, this.x), lerp(d, other.y, this.y));
    };
    Array.prototype.mag = function () {
        return Math.sqrt((this[0]) * (this[0]) + (this[1]) * (this[1]));
    };
    Array.prototype.norm = function () {
        return this.div(Math.sqrt((this[0]) * (this[0]) + (this[1]) * (this[1])));
    };
    Array.prototype.dist = function (other) {
        return Math.sqrt((this[0] - other[0]) * (this[0] - other[0]) + (this[1] - other[1]) * (this[1] - other[1]));
    };
    Array.prototype.midpoint = function (other) {
        return new...

JavaScript

var canvas = document.createElement('canvas');
canvas.width = canvas.height = 500;
canvas.style.border = "inset";
document.body.appendChild(canvas);
var context = canvas.getContext('2d');


window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    || function( callback ){
            window.setTimeout(callback, 1000/20);
          };
})();


// usage:
// instead of setInterval(render, 16) ....



var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) {
    return oScript.textContent;
}), {
    type: "text/javascript"
});

document.worker = new Worker(window.URL.createObjectURL(blob));
document.worker.onmessage = function(datae){
    context.clearRect(0, 0, 500, 500);
    //console.log(datae.data);
 var data = JSON.parse(datae.data);
  data.forEach(function(e){
    context.beginPath();
    context.arc(e.pos[0],e.pos[1],e.radius,0,2*Math.PI,false);
    context.closePath();
    context.stroke();
  });
};

  var action = "draw";
    document.worker.postMessage(action);
(function animloop(){
  
  setTimeout(animloop,1000/30);
  repeater();
})();
function repeater () {
    
  var action = "draw";
    document.worker.postMessage(action);
}