JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id="main" width=500 height=500></canvas>

CSS

body{
    background: #000;
}

canvas{
    border: 1px solid #555;
}

JavaScript

class UnorderedList{
	constructor(...items) {
    	this.items = items;
    }
    
    push(...args) {
    	return this.items.push(...args);
    }
    
    remove(i) {
    	if(i == this.items.length - 1) {
        	this.items.pop();
        }else{
	    	this.items[i] = this.items.pop();
        }
    }
    
    forEach(cb, thisArg=undefined) {
    	// iterate backwards so cb can remove the element currently being processed
    	for(let i=this.items.length-1; i>=0; i--) {
        	cb.call(thisArg, this.items[i], i, this);
        }
    }
    
    toString() {
    	return this.items.toString();
    }
    
    get length() {
    	return this.items.length;
    }
}

class Color{
	constructor(r, g, b, a=1) {
    	this.r = r;    	
        this.g = g;
    	this.b = b;
    	this.a = a;
    }
    
    at() {
    	return this;
    }
    
    toString() {
    	return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`;
    }
}
const rgb = (r, g, b, a=1) => new Color(r, g, b, a); 
const rgba = rgb;

class Gradient{
    constructor(...colors) {
        this.colors = colors;
    }

    at(i) {
        if(this.colors.length == 0) return null;
        if(this.colors.length == 1) return this.colors[0].toString();
        if(i >= 1) return this.colors[this.colors.length-1].toString();
        if(i <= 0) return this.colors[0].toString();

        i *= this.colors.length - 1;
        let a = Math.floor(i), b = Math.ceil(i), s = i - a, t = 1 - s;
        let colorA = this.colors[a];
        let colorB = this.colors[b];

        let color = rgba(0, 0, 0, 0);
        if(colorA.a + colorB.a != 0) {
            color.a = colorA.a*t + colorB.a*s;
            color.r = (colorA.r*colorA.a*t + colorB.r*colorB.a*s) / (color.a);
            color.g = (colorA.g*colorA.a*t + colorB.g*colorB.a*s) / (color.a);
            color.b = (colorA.b*colorA.a*t + colorB.b*colorB.a*s) / (color.a);
        }
        return color.toString();
    }
}


class Vec{
	constructor(x=0, y=0) {
    	this.x = x;
       ...