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

Question

[TheSnegok]

SVG код:

<svg viewBox="0 0 500 500">
        <circle class="dottedInset" r="190" cx="250" cy="250">
        </circle>
        <path class="hexagon" d="M250,60 385,115 385,385 250,440  115,385 115,115z">
        </path>
    </svg>

Объяснение текстом: Есть svg элемент с шириной 500 и 500, внутри с кругом(circle) с центром в 250 и 250 и путём(path), круг рисуется с помощью svg легко, а вот шестиугольник который нужно вписать в круг нужно высчитать, подскажите как рассчитать координаты углов или координаты сторон для этого шестиугольника или как сделать по другому? буду благодарен любой подсказке)

Answer 1

[Сергей П]

А мне нравится такое на комплексных числах считать. То же, что и с синусами, но элегантнее.
Вот пример на питоне:

from math import e, pi
f=lambda c, r, n=3, fi0=0: [c+r*e**(1j*(2*pi/n*i+fi0)) for i in range(n)]

Получим функцию f которая может рассчитать точки любого вписанного n-угольника:

>>> f(c=250+250j, r=250)
[(500+250j),
 (375+466.50635094610965j),
 (125.00000000000006+466.5063509461097j),
 250.00000000000003j,
 (124.99999999999989+33.49364905389041j),
 (374.99999999999983+33.49364905389024j)]

А если надо обяательно кортежами, а не комплексными точками. то вот:

>>> [(round(p.real), round(p.imag)) for p in f(c=250+250j, r=250, n=5, fi0=pi/2)]
[(250, 500), (12, 327), (103, 48), (397, 48), (488, 327)]

Тут, заметьте, пятиугольник, причем вершинкой вниз (при оси Y, направленной вниз).

Чтобы было понятно как это работает...
Представим, что центр окружности в нуле координат. Нам нужно 6 точек, смещенных относительно нуля на радиус под нужными углами: 0, 60, 120, 180, 240 и 300 градусов. В формулах мы. конечно используем радианы: pi - это 180 градусов.
Чтобы повернуть единичный вектор на какой-то угол, нужно его просто домножить на e в степени мнимая единица, умноженная на угол. Поскольку единичный вектор на комплексной плоскости это просто 1, то его даже писать не надо. Просто возводим e в нужную степень и получаем нужный вектор в виде комплексного числа. Осталось его домножить на требуемый радиус (он при этом удлинится: был длиной 1, а станет r) и добавить к нему желаемый центр (тоже в виде комплексного числа, где реальная часть - X, а мнимая - Y).
Вот и всё!
Красота же?..

Да, забыл сказать, что если нужно повернуть весь n-угольник на какой-то угол, то для этого есть там параметр fi0, который по умолчанию ноль.
c - это координаты центра в комплексной форме. Например если X=30, а Y=40, то c=30+40j.
n - это число вершин.
r - радиус.
И да, в javascript'е нет такого элегантного способа работать с комплексными числами, как в питоне. Но для js есть много библиотек для работы с комплексными числами. Будет не так компактно и красиво, как на питоне, но в целом всё точно так же в плане математики.

UPD: Исправил функцию. Там скобочек не хватало, поэтому поворот на fi0 работал неверно. Теперь все как надо.

Comments

[TheSnegok]

c - это диаметр?
r - это радиус?
n=6 - это количество сторон?
fi0 - это что?)
c=250+250j и ещё что такое j?)

[LoliDeveloper]

TheSnegok, fi0 это стартовый угол, j - мнимая единица

[TheSnegok]

LoliDeveloper, Понял, спасибо)

[TheSnegok]

Спасибо за интересное решение)

[Сергей П]

TheSnegok, c - это координаты центра в комплексной форме. Например если X=30, Y=40, то c=30+40j.
Про fi0 описал в статью. Это общий угол, на который хотим повернуть весь многоугольник.
А ещё надо помнить, что Y у вас, наверно, сверху вниз направлен, а не как все привыкли в математике рисовать. Но это не важно.

[TheSnegok]

Сергей Паньков, Спасибо)

Answer 2

[LoliDeveloper]

ну можно сделать так:
V_ix = 250 + 250*sin (2*i*PI/n)
V_iy = 250 + 250*cos (2*i*PI/n),
где V_ix, V_iy - координаты икс, игрек у i-той вершины (всего n вершин)
n - количество вершин

Если что-то не понятно, то спрашивай

Comments

[TheSnegok]

Всё понятно, спасибо)

[TheSnegok]

Получается первый 250 это мы увеличиваем координаты, второе это радиус, дальше формула начала или конца формулы где i это количество вершины, всего их 6, а зачем пи на 3 это пи на количество сторон? и что менять если например нужно вписать восьмиугольник или семиугольник (не дай бог хд)?

[LoliDeveloper]

TheSnegok, не, i это конкретная вершина, 1,2,3,...,n
Я поправил формулу для общего случая. Подставляете n какое надо.
То есть всего n вершин, у каждой по 2 координаты. Получается 2 * n формул

[TheSnegok]

LoliDeveloper, Понял, спасибо)