JSFiddle - React, Tailwind, and code Playground

by bobslaede

HTML

<canvas id="canvas" width="400" height="520"></canvas>

CSS

#canvas{
    background: #000000;
    padding: 10px;
}

JavaScript

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

var app = {
    tick: 0,
    initial_tick: 0,
    fps: 60,
    angle: 0,
    rings: [],
    color: [] // moved app.color = new Array(); up here
};

// no need to use jQuery here
app.canvas = document.querySelector('#canvas');
app.ctx = canvas.getContext("2d");

app.centerx = app.canvas.width / 2;
app.centery = app.canvas.height / 2;	
app.all_finished = false;
app.config = {
    delay: 10,
    radius: 0,
    elements: 10,
    lineWidth: 0
};

// using Math.min
var shortest_side = Math.min(app.canvas.height, app.canvas.width);
app.config.lineWidth = (shortest_side/2)/app.config.elements;
app.config.radius = app.config.lineWidth * app.config.elements;

// simple generate color method
app.generateColor = function (index, max) {
    var frequency = 360 / max;
    var hue = ~~(frequency * index);
    var color = 'hsl(' + hue + ', 70%, 50%)';
    return color;
}

app.drawRing = function (ctx, x, y, rad, c, color, angle) {
    ctx.beginPath();
    ctx.arc(x, y, rad, angle, c);
    ctx.lineWidth = app.config.lineWidth;
    ctx.strokeStyle = color;
    ctx.stroke();
}

app.redraw = function () {
    app.ctx.clearRect(0, 0, app.canvas.width, app.canvas.height);
    
    for (j = 0; j < app.rings.length; j++) {
        if( j*app.config.delay < app.initial_tick ){
            
            var ring = app.rings[j];
            
            if( ring.direction == 0 ){
                ring.c += ring.step;
                var c = app.angle + ring.c;
                var angle = app.angle;
                
                if( ring.c >= 2*Math.PI ){
                    ring.c = 2*Math.PI;
                    ring.direction = !ring.direction;
                    var c =...