nbody-simulator-react-p5

Description

This is a simple demo of the nbody-simulator-react-p5 package. It is a nbody simulator made with React and p5.js.

The bodies are attracted to each other and by the mouse cursor on click.

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

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

Note
I also made a version using Barnes-Hut algorithm. You can check it out here.

Screenshots

Screenshot 1	Screenshot 2

Demo video

demo_video.mp4

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.
• pages-build-deployment : Publish the website

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

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

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

Links

Check the source code on

Check the demo on

Check the package on

Contributors

Quentin MOREL :

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