Creating an arbitrarily distorted 2D grid

Question

I want to distort a 2D grid based on the location of point masses. The presence of mass, should contract the grid as follows:

But I want to distort it with an arbitrary number of particles on the grid.

This is, so that I can visualize the effect of gravity on space: warped the space where large masses are present.

What I have tried so far, is iteratively adjusting the edges of a cell, based on the number of particles inside it. A cell with many particles should shrink its edges.

However, the resulting visual is disappointing and doesn't really come across as a distorted 2D space. I think because the deformation should have a global effect, and not just an effect on a single cell?

What algorithm could I use to distort a 2D space with particle masses?

Answer 1

I would model the 2d plane as made of some elastic material, such that you can deform it applying forces that simulate the weight of a given object.

Since you want to visualize some physical effect I think a physically based visualization can be an adequate choice.

A relatively simple way to simulate such an elastic behavior is creating a mass-spring system:

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

However applying this type of techniques requires a good understanding of Hookean physics, ODEs, integration and more related mathematical stuff.

Answer 2

I created a fiddle where each particle affects every grid intersection based on the inverse square rule gravity uses. 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);

Because gravity falls off as a square of the distance, points only have a visible effect on the grid closest to them. You can make the points effect the grid further away by reducing falloff, but that would be less like gravity.

You may need to adjust gravity_force to make things look right for you.