Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/im-rises/particle-simulator-react-p5
Particle Simulation package made in React with P5js
https://github.com/im-rises/particle-simulator-react-p5
canvas javascript npm npm-package package particle-simulator particles react scss simulation typescript website
Last synced: 3 months ago
JSON representation
Particle Simulation package made in React with P5js
- Host: GitHub
- URL: https://github.com/im-rises/particle-simulator-react-p5
- Owner: Im-Rises
- License: mit
- Created: 2023-02-08T22:00:09.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-28T02:30:51.000Z (over 1 year ago)
- Last Synced: 2024-10-08T18:50:29.574Z (3 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: 585 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# particle-simulator-react-p5
## Description
This is a particle simulator package made with React Typescript 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.
## Package installation
To install it type `npm install particle-simulator-react-p5` in your terminal to install it.
Then you can import it in your project with `import ParticleSimulator from 'particle-simulator-react-p5'`.
## Usage
To use it you can simply add the component in your project like this:
```tsx
import React, {useEffect, useState} from 'react';
import ParticleSimulator from 'particle-simulator-react-p5';
import './App.css';
const App: React.FC = () => {
const [isLoaded, setIsLoaded] = useState(false);
const divRef = React.useRef (null);
useEffect(() => {
if (divRef.current) {
setIsLoaded(true);
}
}, [divRef]);
return (
{isLoaded ? (
) : (
Loading...
)}
);
};
export default App;
```
or you can change all the settings like this:
```tsx
import React, {useEffect, useState} from 'react';
import ParticleSimulator from 'particle-simulator-react-p5';
import './App.css';
const App: React.FC = () => {
const [isLoaded, setIsLoaded] = useState(false);
const divRef = React.useRef (null);
useEffect(() => {
if (divRef.current) {
setIsLoaded(true);
}
}, [divRef]);
return (
{isLoaded ? (
) : (
Loading...
)}
);
};
export default App;
```
The component takes 1 to 16 props:
- `parentRef` - a reference to the parent div of the canvas. It is used to get the size of the canvas.
- `particleCountMobile` - the number of particles on mobile devices.
- `particleCountComputer` - the number of particles on desktop devices.
- `fixedUpdate` - the number of fixed updates per second.
- `frameRate` - the number of frames per second.
- `spawnAreaRadius` - the radius of the spawn area of the particles (in meters).
- `gravitationalConstant` - the gravitational constant of the simulation.
- `particlesMass` - the mass of the particles.
- `attractorMass` - the mass of the attractor.
- `friction` - the friction of the particles.
- `softening` - the softening parameter of the gravitational force calculation.
- `pixelsPerMeter` - the number of pixels to represent 1 meter.
- `initColor` - the initial color of the particles (in RGB).
- `finalColor` - the final color of the particles (in RGB).
- `maxColorVelocity` - the maximum velocity of the particles at which the color will be the final color.
- `backColor` - the background color of the canvas (in RGB).
This will create a canvas with 3000 particles on desktop and 1000 on mobile in fullscreen which will be resized
when the window is resized.
> **Note**
> The default values of the props are the same as the ones in the example above.
You can find the complete example of the project in the GitHub
repository [here](https://im-rises.github.io/particle-simulator-react-p5-website).
> **Note**
> Be sure to do like in the example, the parent div of the canvas must be set before the p5 canvas is created.
## Calculations
The calculations are made with the [Newtonian mechanics](https://en.wikipedia.org/wiki/Newtonian_mechanics) equations.
$$ F = G \frac{m_1 m_2}{r^2} $$
To prevent to have a division by zero when the particles are too close to each other, we add a softening parameter
$\epsilon$.
The implementation is not made to be physically accurate, but to be visually appealing. By adding the offset $\epsilon$
directly like below, the particles will come from a far distance faster than they should.
$$ F = G \frac{m_1 m_2}{r^2 + \epsilon} $$
One of the real force calculation with softening could be like this:
$$ F = G \frac{m_1 m_2}{(r^2 + \epsilon^2)^\frac{3}{2}} $$
Where G is the gravitational constant, m1 and m2 are the masses of the particles, r is the distance between the
particles and d is the softening parameter.
## Known issues
> **Warning**
> The React-p5 dependency may have issues with the index.js file.
```js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
```
Please delete the React.StrictMode tag in the index.js file and replace it with the code below.
```js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<>
>
);
```
## GitHub Actions
[//]: # ([](https://github.com/Im-Rises/particle-simulator-react-p5/actions/workflows/pages/pages-build-deployment))
[](https://github.com/Im-Rises/particle-simulator-react-p5/actions/workflows/node.js.yml)
[](https://github.com/Im-Rises/particle-simulator-react-p5/actions/workflows/eslint.yml)
[](https://github.com/Im-Rises/particle-simulator-react-p5/actions/workflows/codeql.yml)
[](https://github.com/Im-Rises/particle-simulator-react-p5/actions/workflows/npm-publish.yml)
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.
- npm-publish.yml : Publishes the package to npm.
## 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/graphs/contributors)