Эквидистантные точки на холсте

Question

Я хочу нарисовать переменное количество равноотстоящих точек на элементе холста HTML5, используя JavaScript. Как рассчитать положение X / Y каждой точки?

EDIT:

Я хочу, чтобы расстояние от одной точки до ее непосредственных соседей и до краев холста было одинаковым.
Если бы у меня был холст размером 8px x 8px и 4 точки, расстояние от точки до его прямых соседей и краев холста составило бы 2px.
Но что, если у меня было неравное количество точек, а не квадратный холст?
(я думаю, что изображение может помочь немного лучше понять мою проблему)

Answer 1

Я бы порекомендовал создать простой решатель ограничений - используя релаксацию, чтобы получить нужный ответ. Это похоже на технику, используемую в некоторых приложениях, подобных Visio. По сути, вы можете добавить силы пружины между парами точек и границ холста. Вы занимаетесь симуляцией в течение короткого промежутка времени, и все «встанет на свои места».

Вы можете попробовать Box2DJS - простую систему физики javascript. Или прочитайте об интеграции / ограничениях Verlet - его довольно просто запустить и запустить, и он отлично подходит для такого рода приложений.

Answer 2

@ snorpey - вы спрашиваете, в основном, чтобы расположить точки так, чтобы при заданном радиусе R все точки были центрами окружностей радиуса R, где:

1. Все «прямые соседи» (для этого требуется лучшее определение) находятся на окружности;
2. Все окружности точек около ребер касаются ближайшего ребра.

Моя интуиция говорит, что это требование может быть невозможно выполнить при произвольном количестве точек и при более строгом определении для соседа, но я могу ошибаться.

Answer 3

Если я посмотрю на диаграмму с надписью «x px» и попытаюсь определить «прямых соседей», мне нужна помощь.Если мы возьмем точку в центре и попытаемся определить ее DN, то все остальные точки на диаграмме могут быть DN.Как можно идентифицировать тех, кого вы хотите?

Answer 4

если вы имеете в виду серию точек, которые все равноудалены от последней на линии, то вам просто нужно взять общее расстояние между начальной и конечной точкой вдоль осей x и y и разделить его на общую сумму

так, чтобы получить точку n (xn и yn с x0 и y0 как начало), вы можете сделать

xn = ((xend - x0) / number_of_points) * n

то же самое для y.