Вычислить положение точки вдоль края правильного многоугольника?

const ANGLE = -Math.PI / 2 // Start the first vertex at the top center

function computePolygonPoints({
  width,
  height,
  sides,
  strokeWidth = 0,
  rotation = 0,
}) {
  const centerX = width / 2 + strokeWidth / 2
  const centerY = height / 2 + strokeWidth / 2
  const radiusX = width / 2 - strokeWidth / 2
  const radiusY = height / 2 - strokeWidth / 2
  const offsetX = strokeWidth / 2
  const offsetY = strokeWidth / 2

  const rotationRad = (rotation * Math.PI) / 180

  const points = Array.from({ length: sides }, (_, i) => {
    const angle = (i * 2 * Math.PI) / sides + ANGLE
    const x = centerX + radiusX * Math.cos(angle)
    const y = centerY + radiusY * Math.sin(angle)

    // Apply rotation around the center
    const rotatedX =
      centerX +
      (x - centerX) * Math.cos(rotationRad) -
      (y - centerY) * Math.sin(rotationRad)
    const rotatedY =
      centerY +
      (x - centerX) * Math.sin(rotationRad) +
      (y - centerY) * Math.cos(rotationRad)

    return { x: rotatedX, y: rotatedY }
  })

  const minX = Math.min(...points.map(p => p.x))
  const minY = Math.min(...points.map(p => p.y))

  const adjustedPoints = points.map(p => ({
    x: offsetX + p.x - minX,
    y: offsetY + p.y - minY,
  }))

  return adjustedPoints
}

function vertexCoordinates(n, R, vertexIndex) {
  const angle = 2 * Math.PI * vertexIndex / n - Math.PI / 2; // Adjusting to start from the top
  return {
    x: R * Math.cos(angle),
    y: R * Math.sin(angle),
  }
}

function midpointCoordinates(x1, y1, x2) {
  return {
    x: (x1 + x2.x) / 2,
    y: (y1 + x2.y) / 2,
  }
}

function fractionalPoint(x1, y1, x2, fraction) {
  return {
    x: x1 + fraction * (x2.x - x1),
    y: y1 + fraction * (x2.y - y1),
  }
}

const pentagonPoints = computePolygonPoints({ width: 300, height: 300, sides: 5 })

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", 300)
svg.setAttribute("height", 300);

const pentagon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
pentagon.setAttribute('fill', 'cyan')
pentagon.setAttribute('points', pentagonPoints
  .map((p) => `${p.x},${p.y}`)
  .join(" "))

svg.appendChild(pentagon)
document.body.appendChild(svg);

const n = 5 // Number of sides for a pentagon
const width = 300; // Width of the pentagon
const R = width / (2 * Math.cos(Math.PI / n)); // Radius of the circumscribed circle

const centerX = 150; // Center of the canvas
const centerY = 150;

// Vertex between sides 2 and 3
const vertex23 = vertexCoordinates(n, R, 2)
const vertex23Adjusted = {
    x: centerX + vertex23.x, // subtract radius too?
    y: centerY + vertex23.y
};
console.info('Vertex between sides 2 and 3:', vertex23Adjusted)

const circle23 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle23.setAttribute('fill', 'magenta')
circle23.setAttribute('r', 16)
circle23.setAttribute('cx', vertex23Adjusted.x)
circle23.setAttribute('cy', vertex23Adjusted.y)
svg.appendChild(circle23)

// Midpoint of side 4
const vertex4_1 = vertexCoordinates(n, R, 3)
const vertex4_2 = vertexCoordinates(n, R, 4)
const mid4 = midpointCoordinates(vertex4_1.x, vertex4_1.y, vertex4_2)
console.info('Midpoint of side 4:', mid4)

const mid4Circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
mid4Circle.setAttribute('fill', 'magenta')
mid4Circle.setAttribute('r', 16)
mid4Circle.setAttribute('cx', mid4.x)
mid4Circle.setAttribute('cy', mid4.y)
svg.appendChild(mid4Circle)

// Point 2/3 across side 3, moving clockwise
const vertex3_1 = vertexCoordinates(n, R, 2)
const vertex3_2 = vertexCoordinates(n, R, 3)
const frac3 = fractionalPoint(
  vertex3_1.x,
  vertex3_1.y,
  vertex3_2,
  2 / 3,
)
console.info('Point 2/3 across side 3:', frac3)

const frac3Circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
frac3Circle.setAttribute('fill', 'magenta')
frac3Circle.setAttribute('r', 16)
frac3Circle.setAttribute('cx', frac3.x)
frac3Circle.setAttribute('cy', frac3.y)
svg.appendChild(frac3Circle)