JSFiddle - React, Tailwind, and code Playground

by mattpodwysocki

HTML

<canvas id="c"></canvas>

CSS

* { padding: 0; margin: 0; }
body { background-color: rgba(1, 32, 36, 1); }
canvas { position: absolute; }

JavaScript

// Originally from: http://jsdo.it/akm2/5SPA

window.extend = function() {
    var target = arguments[0] || {},
        opts, prop;

    for (var i = 1, len = arguments.length; i < len; i++) {
        if ((opts = arguments[i]) == null) continue;

        for (prop in opts) {
            if (opts[prop] === 'undefined') continue;
            target[prop] = opts[prop];
        }
    }

    return target;
};

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

Point.create = function(o) {
    return new Point(o.x, o.y);
};

Point.add = function(p1, p2) {
    return new Point(p1.x + p2.x, p1.y + p2.y);
};

Point.subtract = function(p1, p2) {
    return new Point(p1.x - p2.x, p1.y - p2.y);
};

Point.scale = function(p, scale) {
    return new Point(p.x * scale, p.y * scale);
};

Point.equals = function(p1, p2) {
    return p1.x == p2.x && p1.y == p2.y;
};

Point.normalize = function(p, thickness) {
    if (thickness == null) thickness = 1;

    var length = Math.sqrt(Math.pow(p.x, 2) + Math.pow(p.y, 2));
    if (length > 0) length = 1 / length;

    p.x *= length * thickness;
    p.y *= length * thickness;
};

Point.offset = function(p, x, y) {
    p.x += x;
    p.y += y;
};

Point.interpolate = function(p1, p2, f) {
    var diffX = p2.x - p1.x,
        diffY = p2.y - p1.y;
    return new Point(p1.x + diffX * f, p1.y + diffY * f);
};

Point.distance = function(p1, p2) {
    var a = p1.x - p2.x,
        b = p1.y - p2.y;
    return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
};

Point.dotProduct = function(p1, p2) {
    return (p1.x * p2.x) + (p1.y * p2.y);
};

Point.perp = function(p) {
    return new Point(-p.y, p.x);
};

Point.prototype = {
    length: function() {
        return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
    },
    add: function(p) {
        return Point.add(this, p);
    },
    subtract: function(p) {
        return Point.subtract(this, p);
    },
    scale: function(scale) {
        return Point.scale(this,...