JSFiddle - React, Tailwind, and code Playground

by Sebbern

HTML

<canvas id="canv">

CSS

canvas {
    border-radius: 2000px;
}

JavaScript

var proc = function(p) {
    p.size(500, 500);
    
    var circle = function(cx, cy, r, a) {
        return {
            x: cx + r * Math.cos(a),
            y: cy + r * Math.sin(a)
        };
    }
    
    var opColor = function(original) {
        var R = p.red(original);
        var G = p.green(original);
        var B = p.blue(original);
        var minRGB = Math.min(R,Math.min(G,B));
        var maxRGB = Math.max(R,Math.max(G,B));
        var minPlusMax = minRGB + maxRGB;
        var complement = p.color(minPlusMax-R, minPlusMax-G, minPlusMax-B);
        
        return complement;
    }
    
    var r, g, b;
    
    var t = 0;
    
    p.draw = function() {
        
        t += 0.003;
        
        r = Math.sin(t) * 200;
        g = (Math.sin(t * 9.2) * 20) + 150;
        b = Math.cos(t * 3.9) * 55 + 200;
        
        var c = p.color(r, g, b);
        
        p.background(c);
        p.stroke(255);
        
        var rm = Math.PI * 2;
        
        var cx = p.width / 2;
        var cy = p.height / 2;
        
        for(var i = 0; i < rm; i += rm / 50) {
            p.strokeWeight(Math.sin(i + t) + 1 * 3);
            var p1 = circle(cx, cy, (Math.sin(t * 5) * 150) + 120, i);
            var p2 = circle(cx, cy, 250, i + rm * t);
            p.line(p1.x, p1.y, p2.x, p2.y);
        }
    }
}

var elem = document.querySelector("#canv");
var processing = new Processing(elem, proc);