Я работаю над этим экспериментом на основе браузера, где мне дают N определенных кругов (скажем, у них есть уникальная картина в них), и им нужно их расположить вместе, оставляя как можно меньше места между ними. Он не должен располагаться по кругу, но они должны быть "сгруппированы" вместе.
Размеры окружности настраиваются, и пользователь сможет изменить размеры, перетащив ползунок javascript, изменив размеры некоторых кругов (например, в 10% слайдера круг 4 будет иметь радиус 20 пикселей, круг 2 10px, круг 5 остается неизменным и т.д.). Как вы, возможно, уже догадались, я попытаюсь "переходить" на изменение размера при правильном перемещении при перемещении ползунка.
Подход, который я пробовал до сих пор: вместо того, чтобы вручную их расположить, я попытался использовать физический движок -
Идея:
- поместите какое-то гравитационное натяжение в центр экрана.
- используйте физический движок, чтобы заботиться о столкновении с шарами.
- во время слайдера "перетащить время" я бы просто установил разные размеры шара и пусть двигатель позаботится об остальном
Для этой задачи я использовал "box2Dweb". Я поместил гравитационное притяжение в центр экрана, однако потребовалось очень долгое время, пока шары не были помещены в центр, и они плыли вокруг. Затем я положил небольшой статический кусок шара в центр, чтобы они ударили его, а затем остановились. Это выглядело так:
Результаты были немного лучше, но круги все еще двигались некоторое время, прежде чем они стали статическими. Даже после того, как вы играли с переменными, такими как трение и различные гравитационные тяги, все это просто вращалось вокруг и чувствовалось очень "шаткое", в то время как я хотел, чтобы шары двигались только тогда, когда я перетаскиваю ползунок времени (когда они меняют размеры). Кроме того, box2d не позволяет изменять размеры объектов, и мне придется взломать путь для обхода.
Итак, подход box2d заставил меня понять, что, возможно, оставить физический движок для решения этой проблемы не лучшим решением проблемы. Или, может быть, мне нужно включить какую-то другую силу, о которой я не думал. Я нашел этот аналогичный вопрос для моего на StackOverflow. Однако очень важным отличием является то, что он просто генерирует некоторые n неспецифических кругов "сразу" и не допускает дополнительных конкретных размеров шара и манипуляции с позициями.
Я действительно застрял сейчас, есть ли у кого-нибудь идеи, как подойти к этой проблеме?
update: прошло почти год, и я полностью забыл об этой теме. в конце концов я должен придерживаться физической модели и reset заставляет/останавливается в почти незанятых условиях. результат можно увидеть здесь http://stateofwealth.net/ треугольники, которые вы видите, находятся внутри этих кругов. остальные линии связаны через "алгоритм триангуляции delaunay"