Bouncing balls in your browser using real physics. Sort of.
Regarding quality; I have treated this like a regular piece of work as much as possible, but there's only so much one can fit into one's evenings!
cd /path/to/this/projectnpm ci
cd /path/to/this/projectnpm start- Open your browser at http://127.0.0.1:8080, or whatever port
npm startoutputs in your terminal
When you click on the screen, a random type of ball will be spawned. The ball will have the characteristics of one of the following:
- Beach ball
- Cricket ball
- Football
- Volleyball
The simulation should perform fine on a desktop or laptop computer with up to 100 balls on screen at once. It's buttery smooth on any old device with up to 10 balls, but that's less fun, so I've set the limit to 100 balls.
Once you try to spawn a 101st ball, old balls will begin being removed from the simulation, FIFO. Note that ball colours will change when balls start getting removed from the simulation. I would have fixed this but it looks cool so I left it as is.
Due to my very simplistic physics model, balls will sometimes bounce forever. I know why this happens but it's hard to fix. I spent some trying to resolve it but the physics was too complex, so I gave up. Disappointing.
Everything of interest is within src. Contained within src/model is a model of the physics of bouncing balls based on what I could find on Wikipedia. Contained within src/ui is an implementation of a DOM-based UI. I.e. this contains what you see in the browser. src/index.ts creates and configures the simulation.
There are various unit tests. I have focussed on functionality which has an objectively correct behaviour, i.e. functions for which there is an oracle of truth, such as a law of physics. Physics functions which do not have an objectively correct behaviour (i.e. where I have implemented heuristics to allow the simplified physics model to function reasonably correctly) do not have unit tests, because these do not have objectively correct behavior.
Run the tests using npm:
npm test
Excluding test boilerplate, I did not reference or use a single line of code from any other author in writing any of the code within src, other than reading up on how to create SVG elements via the DOM API on MDN.
Outside of src, I read the Webpack docs in order to configure webpack to transpile the TypeScript to JavaScript and bundle it for the browser.
The libraries used within src are:
array-flat-polyfill, which provides[].flatand[].flatMap, which are not available in ES2016.mochafor unit test boilerplate.
I've included pre-bundled JS, so there's no need to build anything. However, if you want to change the source code and rebuild the JS then you can do so by running:
npm run build
This was quite fun to do. There are various aspects of the physics, such as angular velocity (rotation) and friction, which I didn't model. It'd be interesting to also model those things.