Создание произвольно искаженной 2D-сетки

Я бы смоделировал двумерную плоскость как сделанную из какого-то эластичного материала, чтобы вы могли деформировать ее, применяя силы, имитирующие вес данного объекта.

Поскольку вы хотите визуализировать некоторый физический эффект, я думаю, что физически обоснованная визуализация может быть адекватным выбором.

Относительно простой способ моделирования такого упругого поведения — создание системы масса-пружина:

https://en.m.wikipedia.org/wiki/Soft-body_dynamics

Однако применение этого типа методов требует хорошего понимания физики Гука, ОДУ, интеграции и других связанных математических вещей.

Я создал скрипт, в котором каждая частица влияет на каждое пересечение сетки на основе гравитационного правила обратных квадратов. https://jsfiddle.net/1nrjcsqa/2/

    dx = points[i][0] - x;
    dy = points[i][1] - y;
    d = Math.sqrt(dx * dx + dy * dy);
    f = gravity_force / Math.pow(d, falloff);

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

Возможно, вам придется настроитьgravity_force, чтобы все выглядело правильно для вас.

Я опубликую несколько быстрых предложений на данный момент, а затем продолжу, когда смогу.

Хотя вы прямо сказали в своем посте и комментариях, что это будет обрабатываться на ЦП, выполнение этого на графическом процессоре и использование OpenGL для отображения может сильно помочь. Обработка эффектов десятков тысяч точек на частоте 60 Гц (~16 мс на проход) требует много ресурсов процессора, даже если он имеет восемь ядер.

Тем не менее, несколько подготовительных мыслей:

• Как указывает пользователь aptriangle, сила тяжести падает пропорционально квадрату расстояния. На некотором расстоянии вы можете игнорировать эффекты, тем более что все ваши объекты имеют одинаковую массу.
• Учитывая, что вы будете поддерживать большое количество масс, возникают проблемы с масштабированием при сохранении хорошей скорости обновления для взаимодействия и плавной анимации.
• Ваша цель — визуализация, а это значит, что вы сможете использовать более короткие пути, к которым в противном случае могла бы привести строгая интерпретация математики. На самом деле, я думаю, что по крайней мере некоторые ярлыки необходимы для работы на любой скорости, близкой к желаемой.
• Перебор масс и всех точек сетки, на которые они влияют, скорее всего, не приведет к привлекательному графическому обновлению с желаемой скоростью.
• Вам нужно будет учитывать суперпозиция и поле векторов. (Я использую здесь общий смысл, а не правильную терминологию.) Каждая масса будет влиять на все пространство вокруг нее. Из любой точки пространства будет некоторый вектор, указывающий на эту массу, длина которого равна вектору, представляющему силу притяжения. В любой точке пространства вы складываете векторы. Это может привести к «мертвой точке», где два разных тела тянут силы, которые уравновешивают друг друга.
• При большом количестве масс визуализация изогнутых линий сетки может стать настолько сложной, что это скорее запутает, чем просветит пользователя. Представьте себе эластичный резиновый лист с прикрепленными к нему тысячами стальных грузов, иногда со сгруппированными грузами: форма поверхности может выглядеть очень сложно и странно.
• Как писал Маурисио Селе Лопес Белон, вы можете смоделировать поверхность как эластичный материал, то есть напрямую реализовать геометрию поверхности «резинового листа». Если не считать использования CUDA и OpenGL на графическом процессоре, я не думаю, что вы заставите это работать.
• Основное препятствие — время расчета.
• Чтобы свести к минимуму время вычислений, выполняйте предварительные вычисления как можно больше.
• Обратите внимание, что, поскольку ваши массы равны, эффекты этих масс при любом заданном смещении (dx,dy) одинаковы.
• Хотя точки, представляющие массы, могут иметь действительные местоположения, такие как (23,32342, -15,38963) или что-то еще, вы, вероятно, можете (и, вероятно, должны) вычислить эффекты на целочисленной сетке, чтобы упростить вычисления.

Учитывая все это, я имею в виду быстрый метод, который определяет гравитационное поле вокруг каждой массы как кусок памяти, который (более или менее) подвергается операции ИЛИ вместе с другой памятью, чтобы получить окончательную карту векторов поля.

Потом дело за рисованием. Опять же, использование OpenGL для создания истинного 3D-представления, которое затем проецируется на 2D-дисплей, было бы моим предпочтительным способом. OpenGL может работать на встроенной графике, и я бы рекомендовал именно это. В противном случае вычисления, которые необходимо выполнить для изменения 2D-линий сетки в виде 2D-фигур, могут быть сложными.

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

Из первоначального кода, который я написал просто для того, чтобы показать медленный и менее желательный способ решения проблемы, вот очень грубый пример изгиба линий сетки, рассматривая их как точки, которые можно по отдельности притягивать к каждой массе. Это НЕ способ реалистичного отношения к линиям сетки; код также имеет некоторые ошибки.