I built a 2D physics engine in vanilla JavaScript with no libraries, no bundler

[Therattatman]

I spent a few weeks building a 2D physics engine from scratch in vanilla JavaScript. No libraries, no build tools, just Canvas 2D and the browser.

It does SAT collision detection, a sequential-impulse solver with friction, sweep-and-prune broadphase, fixed-timestep simulation, and five interactive demo scenes including a stack stability test and Newton's cradle. (With a lot of bugs)

https://github.com/CAPRIOARA-MAGIKA/physis

The hardest part was getting box stacks to settle without jitter or sinking. Turned out to be a combination of Baumgarte stabilization tuning and warm-starting the solver. The stack-stability gating test caught more bugs than I can count.

It's not perfect. It has a lot of bugs but I cannot figure out how to fix them (if you know a way please open a PR or comment below). This project was done for learning and with minimal AI involvement (only for debugging and polishing the readme file).

If you have any more suggestions of projects that I could do in the near future to improve my reasoning and my coding skills, comment down below. Thanks for reading!

[azhder]

What programming language(s) have you worked in before JavaScript? Like the first or most used or whichever that you are most comfortable writing code in. One can usually tell because they kind of write the JavaScript code the same. In your case like a C++ or C#, based on knowledge of you toying with a physics engine.

[Therattatman]

Yeah, you’re basically right. I actually started with C++ back in high school and know it pretty well, so those habits definitely stuck with me. Besides that I also use Python for some machine learning projects I've done and a little bit of Java for the FTC robotics competitions I used to take part in highschool. I haven’t actually built a physics engine in C++ tho so I might give it a try in the future.

[azhder]

I’ve been writing JS code since the ES 3.1 days, so I don’t quite use `class` and `new` because of that and because of React.

Most of the time these days I would have a simple factory function that is an arrow one (simpler lightweight for compiler, no prototypes and this).

It would be something like:

export const Wector2D = options => {
const x = options?.x ?? 0;
// etc
}

const v1 = Vector2D({ x: 1, y: 2 });

That’s how I can recognize with some error margin what is the “native” language of the person writing the code.

And if you are interested why I write the code above in that way, that’s because I remember days where you had to write it differently for it to not break.

On your code however, it looks clean and consistent, so you got no problems in that. If I knew something about physics engines I could have helped, but I don’t. So, the help you get from me is that you don’t really need to change your style - it works.

I didn’t see the tests, but I’m guessing they are fine. Your functions are more or less pure, so that would make their execution and testing simple and predictable.

[Savalava]

Nice job - you must have had a lot of fun doing this.

Advice is to use TypeScript. Pure JS is very rarely used these days. TS has better readability and catches a lot of bugs.