JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<div id="arc"></div>
<div id="controls">
    Start: <input id="s" type="range" min="0" max="360" value="0" oninput="draw()" />
    End: <input id="e" type="range" min="0" max="360" value="360" oninput="draw()" />
    # of divs: <input id="n" type="range" min="1" max="10" value="10" oninput="draw()" /><br />
    Start: <span id="sv"></span><br />
    End: <span id="ev"></span><br />
    #: <span id="nv"></span>
</div>

CSS

#controls {
    top: 150px;
    position: absolute;
}

.dot {
    width: 10px;
    height: 10px;
    display: block;
    background-color: red;
}

JavaScript

/*var canvas = document.getElementById("2d");
var ctx = canvas.getContext("2d");

var step = 2 * Math.PI / 20; // see note 1
var h = 50;
var k = 50;
var r = 50;

ctx.beginPath(); //tell canvas to start a set of lines

for (var theta = 0; theta < 2 * Math.PI; theta += step) {
	console.log(theta);
    var x = h + r * Math.cos(theta);
    var y = k - r * .5 * Math.sin(theta); //note 2.
    ctx.fillText("o",x,y);
}

ctx.closePath(); //close the end to the start point
ctx.stroke(); //actually draw the accumulated lines
*/


function genArc(Xc, Yc, R, StartD, EndD, NLS) {
	var StartR = (StartD/360)*(2*Math.PI);
    var EndR   = (EndD/360)*(2*Math.PI);
    var ArcElement = (EndR - StartR) / NLS;
	var xplot = [];
    var yplot = [];
    xplot.push(Xc + R * Math.cos(StartR));
    yplot.push(Yc - R * Math.sin(StartR));

    for (i = 1; i<=NLS; i++) {
        xplot.push(Xc + R * Math.cos(StartR + i*ArcElement));
        yplot.push(Yc - R * Math.sin(StartR + i*ArcElement));
    }
    document.getElementById('arc').innerHTML = '';
    for (i = 1; i<=NLS; i++) {
    	var div = document.createElement('div');
        div.classList.add("dot");
        div.style.position = 'absolute';
        div.style.left = xplot[i] + "px";
        div.style.top = yplot[i] + "px";
        div.textContent = i;
        document.getElementById('arc').appendChild(div);
    }
}

function draw() {
    var s = document.getElementById('s').value;
    var e = document.getElementById('e').value;
    var n = document.getElementById('n').value;
    document.getElementById('sv').textContent = s;
    document.getElementById('ev').textContent = e;
    document.getElementById('nv').textContent = n;
	genArc(50, 50, 50, s, e, n);
}
draw();