How can I make attracting particles?

Based of off

youtube.com/watch

I want to make 1 type of object that will attract itself to the nearest one of itself

You can do it with physics forces. Take the sprite you want, and create a family “other” from that so you can reference two instances at the same time. Then do something like this:

For each sprite

For each other

Sprite.uid <> other.uid

— sprite: apply force 1/distance(sprite.x,sprite.y,other.x,other.y)^2 toward (other.x, other.y)

If it’s too subtle the increase the value of 1. Try 1000 or 10000

i dont get this part

Sprite.uid <> other.uid

what do I need to do with the uid?

I also need multiple particles act on each other as in when more particles are bunched up, it will pull in another particle instead of a smaller group pulling it in. Also these groups don't stay together which is what I want. If the code is correct it should form like some sort of amoeba looking thing.

so turns out it kinda works

Although I made 2 different particles it did not work as intended

Forces are not direct enough and sometimes it just doesn't make sense

Here's the basic code for it with the same particles attracting and different particles repelling.

wackytoaster.at/parachute/particleslifesimulation.c3p

I do want to point out though that this is computationally really bad, the performance is terrible. It will probably be ok if you just wanna play around with a few hundred particles at most, play around a bit. I've done similar projects like that before and just kept it within the limitations.

If you really wanna go ham:

1. You'd want to get rid of box2D and instead use your own calculations for the particles. They won't need a lot for that, probably just a movement vector and radius. That would get rid of the extra bloat that box2D adds that doesn't matter for this simulation.

2. You will still be limited very quickly by how fast CPUs and javascript are, generally. If you really wanna do this at any greater scale, you'll have to do the same thing as the guy in the video, which is to do the calculations on the GPU instead. This is possible with webGPU but will require javascript and webGPU knowledge. Maybe you can get by with some library like turbo.js.org but I have not tested it at all.

Good luck.