React - calculate dots position in a circle

Question

I have a wheel looks like this:

I want to put the yellow bulbs on the circle, I'm thinking about using position: "absolute", top: xxx, left: yyy to achieve this, I guess that I will need some math to calculate corresponding top and left/right for each bulb but I dont know how.

Answer 1

You could use the following functions to get X and Y coords

Example for a circle with 100 px radius:

function getCircleY(radians, radius) {
  return Math.sin(radians) * radius;
}

function getCircleX(radians, radius) {
  return Math.cos(radians) * radius;
}

console.log("Y coord at 0 degree", getCircleY(0, 100));
console.log("X coord at 0 degree", getCircleX(0, 100));


console.log("Y coord at 180 degree", getCircleY(Math.PI, 100));
console.log("X coord at 180 degree", getCircleX(Math.PI, 100));

Check this out https://en.wikipedia.org/wiki/Radian