A 3D web app to visualize celestial mechanics.
View Demo
·
Report Bug or Request Feature
An interactive 3D web app that simulates a dynamical system of particles under the influence of gravity.
Capture 1. Periodic configuration.
Capture 2. Chaotic state with velocity vectors.
The n-body problem consists of predicting the movement of n particles given their masses, initial positions, and initial velocities.
Movement is influenced by gravitational force between the particles. The force exerted from mass j and received by mass i is described by Newton's law of gravity:
Where G is the gravitational constant, r is the position vector of a body as a function of time, and |v| denotes the euclidean norm.
By Newton's second law, we associate the sum all forces affecting a body with its acceleration.
After substitution and simplification, we obtain a system of second order ODEs, one equation per body.
Where each second order equation can be transformed into two first order ODEs.
Hence, each body yields two vector equations, or six scalar equations in a 3D coordinate system. The numerical solver integrates this system to obtain the velocity and position of all bodies as a function of time.
This project uses Three.js, a JavaScript API that expands on WebGL's engine and functionalities to create and display animated 3d graphics. You can find more information on Three.js.
We used the Three.js object constructors to create the scene, the lights, camera, trails, controls and post-processing effects. Which are readily available to use as part of the API.
scene = new THREE.Scene();
scene.background = new THREE.Color("rgb(0, 0, 0)");
camera = new THREE.PerspectiveCamera(45, canvas.width / canvasheight, 1, 4000);
camera.position.set(0, 5, 18);
scene.add(camera);
orbitControls = new OrbitControls(camera, renderer.domElement);Most of these variables need to be global in order to be manipulated easily as the scene evolves with new input of the user.
A mesh with a phong-effect texture and a spherical geometry represents our particle. That is created everytime our body constructor is called.
let geometry = new THREE.SphereGeometry(0.8, 20, 20);
let material = new THREE.MeshPhongMaterial({ color: this.colo});
this.mesh = new THREE.Mesh(geometry, material);
this.mesh.position.set(rx, ry, rz);
this.mesh.name = "Body";Given the tridimensional coordinates provided by the user, we can add its location as a property of the body object relative to its parent object in which it will be added, in this case a group object that holds all our particles.
The particle mesh is accompanied by a THREE.ArrowHelper, that represents the dynamic velocity of its particle.
let velocity = new THREE.Vector3(vx,vy,vz);
this.arrowV = new THREE.ArrowHelper(velocity.clone().normali(),
THREE.Vector3(), 3, 0xff0000);
this.arrowV.setLength(...arrowLength(velocity));
this.mesh.add(this.arrowV);It is also added to the particle mesh by default when our body constructor is called. It uses the initial velocities provided by the user to determine its initial length.
Three.js comes with the tools to define "passes" to render the scene with additional post-processing effects. One of which is the OutlinePass. This effects "highlights" objects in the scene based on certain events that the user triggers. In this case, when he hovers over any particle in the scene.
outlineEffect.selection.set(selection);
composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
const outlinePass = new EffectPass(camera, outlineEffect);
effect = outlineEffect;
pass = outlinePass;
composer.addPass(outlinePass);The composer object, of the post-processing library of three.js, handles all of the passes in the scene. Having configured our outlineEffect, it is added to the composer which renders the scene with the new outlineEffect as one of its effect passes. For this effect to be visualized the composer must take the place of the renderer.
The trails were done using Mesh Line an alterative to THREE.Line, it uses a trip of triangles billboarded to help us achieve the effect of a fading trail.
this.trail_geometry = new THREE.Geometry();
for (var i = 0; i < this.trail_lenght; i++) {
this.trail_geometry.vertices.push(new THREE.Vector3(rX,rY,rZ));
}
this.trail_line = new MeshLine();
this.trail_line.setGeometry( this.trail_geometry, function( p ) { return p; } );
this.trail_material = new MeshLineMaterial( { properties});
this.trail_mesh = new THREE.Mesh( this.trail_line.geometry, this.trail_material ); The trail mesh contains the geometry and material of the trail, which is composed of 400 vertices.
trailList[i].trail_line.advance(body.mesh.position);To give the trail movement, the trail vertices position values need to be updated according to the particle is attached. The new position values of the particles are pushed with the function that can be seen above. This function works like a queue that updates the position values of the vertices and using FIFO the vertices are deleted, so the oldest one that was updated is deleted and the new one is pushed infront
To get a local copy up and running follow these simple steps.
- npm
npm install npm@latest -g
- Clone the repo
git clone https://github.com/JorgeBarMza/n-body-simulation.git
- Install NPM packages
npm install
- Run the build
npm run build
- Run a local server. Here's a Python 3 example, and there are anlternatives.
python -m http.server
- Access the server by typing the following url in a browser address bar.
http://localhost:8000/
Distributed under the MIT License. See LICENSE for more information.
Jorge Barrios - jorgebarmza@gmail.com
Roberto Alejandro Gutierrez - rgtzgn@gmail.com
Eduardo Badillo Álvarez - a01020716@itesm.mx
Thanks Octavio Navarro and Gerardo Pioquinto for providing valuable guidance and advice.