nbody-simulator-barnes-hut-react-p5

Description

This is a n-body simulator using barnes-Hut package made with React Typescript and p5.js.

🚀🚀You can try it online from your browser 🚀🚀

It works on desktop and mobile as well with different controls (check the controls section).

🚀🚀 The package is available on npm 🚀🚀

Note
I also made a C++ version for WebGL2 using OpenGL ES 3.0. You can check it out here.

Screenshots

Demo video

2023-09-03.19-41-32.mp4

Package installation

To install it type the following command in your terminal:

npm install nbody-simulator-barnes-hut-react-p5

Then you can import it in your project with:

import NbodySimulatorBarnesHut from 'nbody-simulator-barnes-hut-react-p5'

Known issues

Warning
The React-p5 dependency may have issues with the index.js file.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
);

Please delete the React.StrictMode tag in the index.js file and replace it with the code below.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <>
        <App/>
    </>
);

GitHub Actions

The project is set up to run the following actions:

node.js.yml : Runs the tests for the Node.js project.
eslint.yml : Runs the ESLint linter on the project.
codeql.yml : Runs the CodeQL linter on the project.
npm-publish.yml : Publishes the package to npm.

Libraries

React:
https://reactjs.org/docs/getting-started.html

Xo:
https://github.com/xojs/xo
https://github.com/xojs/eslint-config-xo-react
https://github.com/xojs/eslint-config-xo-typescript

ESLint:
https://eslint.org/docs/latest/user-guide/getting-started

GitHub gh-pages:
https://github.com/gitname/react-gh-pages

P5.js:
https://p5js.org/
https://www.npmjs.com/package/react-p5

react-device-detect:
https://www.npmjs.com/package/react-device-detect

Documentation

The Coding Challenge (math and physics):
https://www.youtube.com/watch?v=OAcXnzRNiCY
https://www.youtube.com/watch?v=GjbKsOkN1Oc
https://www.youtube.com/watch?v=OJxEcs0w_kE

P5.js:
https://p5js.org/

P5.js React:
https://www.npmjs.com/package/react-p5

Wikipedia Barnes-Hut simulation:
https://en.wikipedia.org/wiki/Barnes–Hut_simulation

Barnes-Hut algorithm:
http://arborjs.org/docs/barnes-hut

Links

Check the source code on

Check the demo on

Check the package on

Contributors

Quentin MOREL :

@Im-Rises
https://github.com/Im-Rises

Im-Rises/nbody-simulator-barnes-hut-react-p5-website