Two-Dimensional Elastic Collision what am I missing?

p5.js Coding Questions
1

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!
https://editor.p5js.org/fragdemented/sketches/rzq4KRPa

2

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: p5-matter by pzp1997

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”.

2 Likes
3

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
4

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: p5-matter by pzp1997

2 Likes