JSFiddle - React, Tailwind, and code Playground

by toby3105

HTML

<canvas id="myCanvas" width="500px" height="500px"></canvas>

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var pipeRadius = 70;
drawCircle(pipeRadius, centerX, centerY);

var pipeCircleLength = 2 * Math.PI * pipeRadius
var cableRadius = 10;
var cableDiameter = cableRadius * 2
var maxPerRow = Math.floor((pipeCircleLength / cableDiameter) / 2);
var maxPerRowDif = (pipeCircleLength / cableDiameter) / 2;
console.log(maxPerRowDif);
var slice = Math.PI / maxPerRow;

printCircles(24);

function printCircles(number) {
    var counter = 0;
    var row = 1;
    var total = 0;
    var dif = number / maxPerRow
    console.log("dif = " + dif);
    var offset = 90 * (dif > 1 ? 1 : dif)
    console.log("offset = " + offset)
    var startAngle = (94 + offset) * 0.0174532925;
    var innerRadius = pipeRadius - cableRadius * row;
    drawCircle(innerRadius, centerX, centerY);
    while (number > 0) {
        var cableAngle = startAngle - (slice * counter);
        var newX = centerX + innerRadius * Math.cos(cableAngle);
        var newY = centerY + innerRadius * Math.sin(cableAngle);
        setTimeout(function (x, y, r) {
            drawCircle(r, x, y);
        }, total * 100, newX, newY, cableRadius)
        total++;
        counter++;
        number--;

        if (counter >= maxPerRow) {
            row++;
            counter = 0;
            maxPerRow = Math.floor((pipeCircleLength / (cableDiameter * row) / 2));
            innerRadius -= cableDiameter;
            offset = 90 * (number / maxPerRow > 1 ? 1 : number / maxPerRow)
            startAngle = (90 + offset) * 0.0174532925;
            drawCircle(innerRadius, centerX, centerY);
            slice = Math.PI / maxPerRow;
            console.log(slice);
        }

    };
}

function drawCircle(radius, x, y) {
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'green';
    context.fill();
    context.lineWidth = 2;
   ...