# Two-Dimensional Elastic Collision what am I missing?

**URL:** https://discourse.processing.org/t/two-dimensional-elastic-collision-what-am-i-missing/17759
**Category:** Coding Questions
**Created:** [February 12, 2020, 2:06am UTC](https://discourse.processing.org/t/two-dimensional-elastic-collision-what-am-i-missing/17759 "2020-02-12T02:06:37Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![fragdemented](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fragdemented/32/4054_2.png) [@fragdemented](https://discourse.processing.org/u/fragdemented)
#### Post date: [February 12, 2020, 2:06am UTC](https://discourse.processing.org/t/two-dimensional-elastic-collision-what-am-i-missing/17759/1 "2020-02-12T02:06:37Z")

</div>

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

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [February 12, 2020, 2:29am UTC](https://discourse.processing.org/t/two-dimensional-elastic-collision-what-am-i-missing/17759/2 "2020-02-12T02:29:06Z")

</div>

> [@fragdemented](#):
>
> , and I would like the asteroids to bounce off each other.

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

> **[Matter.js](https://brm.io/matter-js/)**
>
> Matter.js is 2D rigid body physics engine for the web, using JavaScript and HTML5

Or its p5js corresponding flavor p5-matter: [p5-matter by pzp1997](http://PalmerPaul.com/p5-matter)

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

> **[Matter Js Bouncing Colorful Balls](https://glitch.com/~matter-js-bouncing-colorful-balls)**
>
> Your very own basic web page, ready for you to customize.

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

---

<div class="post-metadata">

### Author: ![fragdemented](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fragdemented/32/4054_2.png) [@fragdemented](https://discourse.processing.org/u/fragdemented)
#### Post date: [February 12, 2020, 5:42pm UTC](https://discourse.processing.org/t/two-dimensional-elastic-collision-what-am-i-missing/17759/3 "2020-02-12T17:42:22Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [February 12, 2020, 6:18pm UTC](https://discourse.processing.org/t/two-dimensional-elastic-collision-what-am-i-missing/17759/4 "2020-02-12T18:18:29Z")

</div>

> [@fragdemented](#):
>
> So I’m checking the code again.

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:

> <https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22>
>
> There are more than three files. show original

> <https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22>
>
> 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](http://PalmerPaul.com/p5-matter)
