Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/im-rises/particle-simulator-react-p5-website
Particle Simulation website demo made in React with P5js.
https://github.com/im-rises/particle-simulator-react-p5-website
canvas javascript npm npm-package package particle-simulator particles react scss simulation typescript website
Last synced: 3 months ago
JSON representation
Particle Simulation website demo made in React with P5js.
- Host: GitHub
- URL: https://github.com/im-rises/particle-simulator-react-p5-website
- Owner: Im-Rises
- License: mit
- Created: 2023-04-07T06:10:48.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-28T02:31:45.000Z (over 1 year ago)
- Last Synced: 2024-04-15T01:19:02.187Z (9 months ago)
- Topics: canvas, javascript, npm, npm-package, package, particle-simulator, particles, react, scss, simulation, typescript, website
- Language: TypeScript
- Homepage: https://im-rises.github.io/particle-simulator-react-p5-website/
- Size: 2 MB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://im-rises.github.io/particle-simulator-react-p5-website/) 🚀🚀
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](https://www.npmjs.com/package/particle-simulator-react-p5) 🚀🚀
> **Note**
> I also made a C++ version for WebGL2 using OpenGL ES 3.0. You can check it
> out [here](https://github.com/Im-Rises/particle-simulator-webgl).
## Screenshots
| Attraction | Drag | Repulsion |
|:---------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------:|
|  |  |  |
## Demo video
[//]: # (https://user-images.githubusercontent.com/59691442/219550627-16660c09-dbea-41f3-ba15-3d7aaafca6d9.mp4)
[//]: # (https://user-images.githubusercontent.com/59691442/230523799-9afbf327-3cf4-4530-8127-594339d94334.mp4)
https://user-images.githubusercontent.com/59691442/230526870-cd104007-be41-4cdd-a10e-4672da650974.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
[](https://github.com/Im-Rises/particle-simulator-react-p5-website/actions/workflows/node.js.yml)
[](https://github.com/Im-Rises/particle-simulator-react-p5-website/actions/workflows/eslint.yml)
[](https://github.com/Im-Rises/particle-simulator-react-p5-website/actions/workflows/codeql.yml)
[](https://github.com/Im-Rises/particle-simulator-react-p5-website/actions/workflows/pages/pages-build-deployment)
The project is set up to run the following actions:
[//]: # (- pages-build-deployment : Builds the website and deploys it to GitHub Pages.)
- 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:
Xo:
ESLint:
GitHub gh-pages:
P5.js:
react-device-detect:
## Documentation
The Coding Challenge (math and physics):
P5.js:
P5.js React:
## Links
Check the source code
on [](https://github.com/im-rises/particle-simulator-react-p5)
Check the demo
on [](https://github.com/im-rises/particle-simulator-react-p5-website)
Check the package
on [](https://www.npmjs.com/package/particle-simulator-react-p5)
## Contributors
Quentin MOREL :
- @Im-Rises
-
[](https://github.com/Im-Rises/particle-simulator-react-p5-website/graphs/contributors)