Merge pull request #15 from Im-Rises/develop

Develop

README.md

@@ -11,9 +11,12 @@
 
 ## Description
 
-This is a n-body simulator package made with React Typescript and p5.js.
+This is an n-body 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/) 🚀🚀
+Bodies are attracted to each other by the gravitational force and by a center attractor which is defiend by clicking on
+the canvas.
+
+## 🚀🚀[You can try it online from your browser](https://im-rises.github.io/nbody-simulator-react-p5-website/) 🚀🚀
 
 It works on desktop and mobile as well with different controls (check the `controls` section).
 
@@ -23,6 +26,10 @@ It works on desktop and mobile as well with different controls (check the `contr
 > I also made a C++ version for WebGL2 using OpenGL ES 3.0. You can check it
 > out [here](https://github.com/Im-Rises/nbody-simulator-webgl).
 
+> **Note**  
+> I also made a version using Barnes-Hut algorithm. You can check it
+> out [here](https://github.com/Im-Rises/nbody-simulator-barnes-hut-react-p5).
+
 ## Screenshots
 
 | Screenshot 1                                                                                                              | Screenshot 2                                                                                                              | 
@@ -122,7 +129,7 @@ const App: React.FC = () => {
                             particlesMass={400}
                             softening={4}
                             friction={0.99}
-                            centerAttractorMass={1000}
+                            centerAttractorMass={10000}
                             pixelsPerMeter={100}
                             initColor={[0, 255, 255, 200]}
                             finalColor={[255, 0, 255, 200]}

package.json

@@ -3,7 +3,7 @@
   "description": "A react component that simulates the n-body problem using p5.js",
   "homepage": "https://im-rises.github.io/nbody-simulator-react-p5/",
   "repository": "https://github.com/Im-Rises/nbody-simulator-react-p5",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "private": false,
   "license": "MIT",
   "publishConfig": {

src/components/NbodySimulator.tsx

@@ -21,7 +21,7 @@ type ComponentProps = {
 	particlesMass?: number;
 	softening?: number;
 	friction?: number;
-	centerAttractorMass?: number;
+	mouseAttractorMass?: number;
 	pixelsPerMeter?: number;
 	initColor?: Quadruplet;
 	finalColor?: Quadruplet;
@@ -42,7 +42,7 @@ const defaultProps = {
 	particlesMass: 400,
 	softening: 4,
 	friction: 0.99,
-	centerAttractorMass: 1000,
+	mouseAttractorMass: 10000,
 	pixelsPerMeter: 100,
 	initColor: [0, 255, 255, 200],
 	finalColor: [255, 0, 255, 200],
@@ -65,7 +65,7 @@ const NbodySimulator = (props: ComponentProps) => {
 	const particles: Particle[] = [];
 
 	// Attractor center
-	let attractorPosition: p5Types.Vector;
+	let mouseAttractorPosition: p5Types.Vector;
 
 	const forceDivCanvasHolderAndCanvasStyle = (canvas: p5Types.Element, canvasParentRef: Element) => {
 		// Set up canvas holder styles manually
@@ -90,7 +90,7 @@ const NbodySimulator = (props: ComponentProps) => {
 		p5.frameRate(mergedProps.frameRate);
 
 		// Create attractor
-		attractorPosition = p5.createVector(p5.width / 2, p5.height / 2).div(mergedProps.pixelsPerMeter);
+		mouseAttractorPosition = p5.createVector(p5.width / 2, p5.height / 2).div(mergedProps.pixelsPerMeter);
 
 		// Create particles
 		Particle.setMass(mergedProps.particlesMass);
@@ -107,8 +107,9 @@ const NbodySimulator = (props: ComponentProps) => {
 			const randomFloat = (min: number, max: number) => min + ((max - min) * Math.random());
 			const pos = (p5.createVector(randomFloat(-1, 1), randomFloat(-1, 1))
 				.setMag(randomFloat(mergedProps.minSpawnRadius, mergedProps.maxSpawnRadius)));
-			const vel = pos.copy().rotate(Math.PI / 2).setMag(randomFloat(mergedProps.minSpawnVelocity, mergedProps.maxSpawnVelocity));
-			particles.push(new Particle(p5, posCentered.x + pos.x, posCentered.y + pos.y, vel.x, vel.y));
+			// const vel = pos.copy().rotate(Math.PI / 2).setMag(randomFloat(mergedProps.minSpawnVelocity, mergedProps.maxSpawnVelocity));
+			// particles.push(new Particle(p5, posCentered.x + pos.x, posCentered.y + pos.y, vel.x, vel.y));
+			particles.push(new Particle(p5, posCentered.x + pos.x, posCentered.y + pos.y, 0, 0));
 		}
 	};
 
@@ -124,10 +125,16 @@ const NbodySimulator = (props: ComponentProps) => {
 		if (fixedUpdateAccum >= fixedDeltaTime) {
 			fixedUpdateAccum = 0;
 
+			// Update mouse attractor position
+			if (p5.mouseIsPressed) {
+				mouseAttractorPosition = p5.createVector(p5.mouseX, p5.mouseY).div(mergedProps.pixelsPerMeter);
+			}
+
 			// Calculate forces applied to particles
 			for (const particle of particles) {
 				particle.updateForces(p5, particles, mergedProps.gravitationalConstant);
-				particle.updateForceWithValue(p5, attractorPosition, mergedProps.centerAttractorMass, mergedProps.gravitationalConstant);
+				particle.updateForceWithValue(
+					p5, mouseAttractorPosition, mergedProps.mouseAttractorMass, mergedProps.gravitationalConstant);
 			}
 
 			// Update particles velocity and position
@@ -140,14 +147,16 @@ const NbodySimulator = (props: ComponentProps) => {
 		// Clear canvas
 		screenBuffer.background(mergedProps.backColor[0], mergedProps.backColor[1], mergedProps.backColor[2], mergedProps.backColor[3]);
 
+		// Draw attractor
+		screenBuffer.stroke(mergedProps.finalColor[0], mergedProps.finalColor[1], mergedProps.finalColor[2], mergedProps.finalColor[3]);
+		screenBuffer.strokeWeight(25);
+		screenBuffer.point(mouseAttractorPosition.x * mergedProps.pixelsPerMeter, mouseAttractorPosition.y * mergedProps.pixelsPerMeter);
+
 		// Draw objects
 		for (const particle of particles) {
 			particle.show(screenBuffer, mergedProps.pixelsPerMeter);
 		}
 
-		// Draw attractor
-		screenBuffer.fill(255, 0, 0);
-
 		// Swap buffers
 		p5.image(screenBuffer, 0, 0);
 	};