particle-simulator-react-p5

Description

This is a simple demo of the particle-simulator-react-p5 package. It is a particle simulator made with React 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 particles are set randomly on the screen in a circle shape. Their color change according to the speed of the particle. The particles are attracted to the mouse and they are repelled from the edges of the screen. You can toggle attract/repel by clicking with the mouse button on a screen. On tablet and mobile de the touch screen to move the particles by dragging your finger. To toggle attract/repel tap on the screen.

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

Attraction	Drag	Repulsion

Demo video

2023-04-06.21-39-59.online-video-cutter.com.mp4

Controls

The particles are initially attracted to the mouse, but you can toggle attract/repel by clicking with the mouse button on a screen.
On tablet and mobile de the touch screen to move the particles by dragging your finger. To toggle attract/repel tap on the screen.

You can also toggle fullscreen mode by pressing the F11 key.

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