Заполнение треугольника элементами — как реализовать?

Question

[kapitansen]

Нужно расположить внутри треугольника определенное количество блоков разного размера. Количество заранее известно, рассчитано так, чтобы помещалось в треугольник.
Желательно, но не обязательно, чтобы большие шары не шли подряд.

Как реализовать на html+js?

Мои варианты, в ходе размышлений:
1. Треугольник сделать с помощью css свойств clip-path или shape-inside, но они поддерживаются не всеми браузерами - пока отверг.
2. Треугольник сделать из div-a, повернутого и растянутого с помощью css transform, внутрь div-a с помощью js masonry затолкать другие div-ы c шарами. Кто-нибудь пробовал masonry с "трансформированными" контейнерами?
3. Шары размещать с помощью position:absolute и указанием координат, координаты вычислять с помощью js-алгоритма, который перебирает блоки с шарами и проверяет их "помещаемость" в треугольную область в системе координат.

Отдельные советы просто по функции размещения элементов внутри многоугольника тоже приветствуются:
1. Есть задача по определению попадания точки в треугольник. Есть вариант, в котором определяется попадание квадрата или шара в треугольник?
2. Какие варианты/библиотеки позволят создать кроссбраузерный треугольный контейнер в html?

Comments

[longclaps]

Копать вглубь.
Возьмем 4 одинаковых круга и попробуем расположить их так, чтобы каждый касался каждого (это - частный случай вашей задачи).
Ничего не выйдет. Для двух выйдет, для трех, а больше - нет.
Переформулируйте задачу.

[kapitansen]

А если так:
нужно разместить 8 больших кругов, 16 маленьких, 24 крошечных.
1. Размещаем в рандомном порядке большие, главное, чтобы не выходили за границы фигуры.
2. Ищем пустые места, достаточные для маленьких, размещаем в них маленькие круги, чтобы они касались больших.
3. Ищем пустые места, достаточные для крошечных, размещаем в них крошечные круги, чтобы они касались больших и маленьких.
?

[Николай Чуприк]

Мне кажется, надо сначала чётко формализовать, что значит "равномерно". Что это значит с точки зрения нашего восприятия. Например критерии могут быть такими (один может исключать другой):

1. Пустые поля вокруг всех кругов одинаковы (лежат в небольшом диапазоне).
2. Площадь, занимаемая кругами в произвольно выбранном регионе более менее одинакова. Это значит, что мелкие круги расположены должны быть гуще (с меньшими полями) нежели крупные.
3. Следует ли применять критерии "равномерности" ко всем кругам в целом или же для каждой фракции (по размеру) в отдельности. Т.е. может оказаться, что критерий 1 или 2 выполнен, но крупные круги собрались в одном углу, а мелкие в другом — по мне субъективно это не будет равномерным распределением.

и т.д. Можно ещё напридумывать критерии равномерности.

Только после этого можно переходить к решению задачи.

[Николай Чуприк]

kapitansen: Вообще ваш вариант мне представляется разумным. Только следует исключить близкое расположение кругов одной фракции, например установить "защищёное" поле (условный margin) вокруг круга, допустим 50% его радиуса, внутрь которого не могут заходить круги той же и более крупной фракции.

[kapitansen]

Вот что пока выходит у меня:
Некрасиво смотрятся только два больших круга рядом. То есть, маленькие и средние можно валить в кучу.
Треугольник разбить на "строки", равные по высоте высоте самого большого шара.
Алгоритм, перебирающий массив кругов(размер шара):
1. если размер большой и рядом нет другого круга: проверить, влезает ли круг рядом с предыдущим. если нет, закинуть его обратно в массив(например, в конец). Если да - разместить.
2. если размер маленький и круг помещается рядом с предыдущим - поместить.
3. если размер маленький и круг не помещается, перейти на новую строку и поместить.

Но есть мнение, что не стоит так мудрить.
Если представить треугольник, как прямоугольный div, который повернули и растянули с помощью css transform, а потом в этот div c помощью masonry добавить шары(каждый шар - div со скругленными углами)?

[kapitansen]

Николай Чуприк: Вы правы, нужно четко формализовать. Я еще раз переписал условие. Уже в третий :)

[Николай Чуприк]

Я бы не фиксировал заранее количество кругов в каждой фракции.

Стал бы перебирать фракции, начиная с наибольшей. Рассовывал бы круги, покуда они рассовываются. Т.е. если рандомом пытаемся пристроить круг и, допустим, обламываемся 5 раз, то считаем, что круги такой фракции больше не засовываются. Переходим к следующей меньшей фракции.

Причём параметром может стать размер зоны отчуждения вокруг круга данного размера. Если эта зона велика, то кругов поместится меньше. Таким образом можно регулировать количество кругов, а не задавать априорно их количество.

Что касается программной "механики", мне кажется, лучше на SVG делать.

[kapitansen]

Количество кругов в каждой фракции нужно сделать фиксированным, потому что целиком заполненная фигура - это страница архива, и эти страницы нужно отображать.
SVG позволяет вставить внутрь себя картинку и обрабатывать onclick?