Two-Dimensional Elastic Collision what am I missing?

Hello World!

I’m on a long personal journey to recreate classic games from scratch with my own flair to improve my programming skills. My next project is Asteroids, and I would like the asteroids to bounce off each other. I have been trying to wrap my head around elastic collision for some time now and I’m almost there.

Using the Elastic Collision page from Wikipedia I have recreated the Two-Dimension Collision equation. The result however, is subtly more like soap bubbles. I think the problem is how I’m handling the positions of the particles after they collide. I just can’t figure out what the problem is. Is anyone willing and able to take a look?

Thank you for your help in advance!

Dunno much about elastic collisions, but if you don’t mind relying on a specialized library for it you may try out Matter.js:

Or its p5js corresponding flavor p5-matter:

If you wish, you can check out my only p5js attempt on using Matter.js here:

But in order to see the animated balls to bounce each other, you’re gonna need to comment out the statement collisionFilter: { group: -1 } inside file “ball.mjs”.

1 Like

I have been looking at a few libraries, but I would really like to get this working without them. However, I highly appreciate the resources you’ve provided.

I’ve done some playing with the code, and if I move the particles farther from each other, there is a very obvious jitter that I can’t explain. After observing the behavior, I have noticed that the vertical collisions slide past each other rather than bounce off. So I’m checking the code again.

1 Like

My posted code wasn’t supposed to show off Matter.js features, but rather how to integrate Matter.js & p5js together.

The original version doesn’t use Matter.js at all:

For actual examples on how to use the library’s features, look at the live examples from:

1 Like