Two-Dimensional Elastic Collision what am I missing?

fragdemented · February 12, 2020, 2:06am

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

GoToLoop · February 12, 2020, 2:29am

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

fragdemented · February 12, 2020, 5:42pm

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.

GoToLoop · February 12, 2020, 6:18pm

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:

gist.github.com

https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22

.block

height: 650
scrolling: no
border: yes
license: cc-by-4.0

adjustFrameSize.js

'use strict';

p5.prototype.adjustFrameSize = function () {
  if (frameElement) {
    frameElement.height = frameElement.frameBorder = 0;
    frameElement.height = this.getDocHeight() + 'px';
    frameElement.width  = this.getDocWidth()  + 'px';
  }
};

This file has been truncated. show original

all.html

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

<script defer src=adjustFrameSize.js></script>
<script defer src=ball.js></script>

<script defer src=global.js></script>
<iframe src=global.html></iframe>

<script defer src=instance.js></script>
<script defer src=instance.js></script>

There are more than three files. show original

gist.github.com

https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22

.block

height: 650
scrolling: no
border: yes
license: cc-by-4.0

adjustFrameSize.js

'use strict';

p5.prototype.adjustFrameSize = function () {
  if (frameElement) {
    frameElement.height = frameElement.frameBorder = 0;
    frameElement.height = this.getDocHeight() + 'px';
    frameElement.width  = this.getDocWidth()  + 'px';
  }
};

This file has been truncated. show original

all.html

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

<script defer src=adjustFrameSize.js></script>
<script defer src=ball.js></script>

<script defer src=global.js></script>
<iframe src=global.html></iframe>

<script defer src=instance.js></script>
<script defer src=instance.js></script>

There are more than three files. show original

For actual examples on how to use the library’s features, look at the live examples from: p5-matter by pzp1997

Topic		Replies	Views
Implementing Shiffman Box 2D Library For p5js Libraries	4	1739	June 8, 2020
How to make ball bouncy in matterjs Libraries	4	1752	April 14, 2019
Balls bouncing off each other, without using Box2D or other libraries Coding Questions	11	644	October 4, 2020
How to get balls to bounce off each other in p5.js? Coding Questions	2	4102	October 3, 2018
Two Player Pong game COLLISION FUNCTION DON'T WORK Coding Questions	9	1199	November 9, 2020

Two-Dimensional Elastic Collision what am I missing?

Related topics