nbody-simulator-barnes-hut-react-p5
v0.6.1
Published
A react component that simulates the n-body problem using the Barnes-Hut algorithm and the p5.js library.
Downloads
11
Maintainers
Readme
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
https://github.com/Im-Rises/nbody-simulator-barnes-hut-react-p5/assets/59691442/5f216fe5-699f-477f-a5d7-559af7c7a4c9
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
Contributors
Quentin MOREL :
- @Im-Rises
- https://github.com/Im-Rises