JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

Number of fields: <input type="text" value="4" />
<div id="container">
    <div id="center"></div>
    <div id="crosshair-x"></div>
    <div id="crosshair-y"></div>
</div>

CSS

body { padding: 2em; }
#container { width: 600px; height: 600px; border: 1px solid #000; position: relative; }
#center { width: 10px; height: 10px; position: absolute; left: 295px; top: 295px; background: #000; }
.field { width: 20px; height: 20px; position: absolute; background: #f00; }
#crosshair-x { width: 600px; height: 1px; background: #000; position: absolute; left: 0; top: 300px; }
#crosshair-y { width: 1px; height: 600px; background: #000; position: absolute; left: 300px; top: 0; }

JavaScript

function distributeFields(radius=50,fields=20) {
    var angle = 0, step = (2*Math.PI) / fields;
    var xOffset = 0, yOffset = 0;
    const arr = [];
    for (let i=0; i < fields; i++) {
        var x = Math.round(radius/2 + radius * Math.cos(angle) - xOffset);
        var y = Math.round(radius/2 + radius * Math.sin(angle) - yOffset);
        console.log(x,y,angle);
        arr.push([x,y,angle]);
        angle += step;
    }
    return arr;
}

console.log(distributeFields());