Random planets with zero velocity subjected to gravity
Demo of programming in Javascript with P5.js - This type of thing is surprisingly easy to do, for more info. see:
The Coding Train
Note: This is not offered as scientifically accurate (e.g. the planets bounce off each other) just an interesting coding project...
See the Javascript code for the animated text on the front page of https://alanesq.github.io/main
Code:
<!DOCTYPE html>
<!--
Planets3D - 02 Dec 19 - https://alanesq.github.io/main
based on code from thecodingtrain.com
-->
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<meta charset="utf-8" />
<title>Planets</title>
</head>
<body style="background-color: yellow;">
<center>
<h1 style="color: red;">Random planets with zero velocity subjected to gravity</h1>
<span>
Demo of programming in Javascript with P5.js - This type of thing is surprisingly easy to do, for more info. see:
<a href="http://www.thecodingtrain.com" target="_top">The Coding Train</a>
</span>
<br><br>
<div id=
"code"
></div>
<script>
// --------------------------------- Planets3D - javascript / p5.js ------------------------
// planets - javascript / p5.js
let movers = [];
var G=4; // gravity
var numberPlanets = 10;
function setup() {
var cnv = createCanvas(800,600,WEBGL);
cnv.parent('code'); // put inside html div with ID 'code'
for (let i = 0; i < numberPlanets; i++) {
// random possition towards centre of screen
movers[i] = new Mover(random(-width/2,width/2), random(-height/2,height/2), random(-300,300), random(1, 4));
}
}
// -----------------------------------------------------------------------------------------
function draw() {
background(50);
translate(0,0,-300);
rotateY(mouseX/200);
rotateZ(-mouseY/200);
for (let i = 0; i < movers.length; i++) {
let force = createVector(0,0,0);
// force is sum of all other planets
for (let j = 0; j < movers.length; j++) {
if (i != j) {
let gs = movers[j].attract(movers[i]); // calc. gravity between the two planets
force.add(gs);
}
}
movers[i].applyForce(force);
movers[i].update();
movers[i].display();
}
}
// -----------------------------------------------------------------------------------------
class Mover {
constructor(x, y, z, mass) {
this.colour = [random(50,255),random(50,255),random(50,255)];
this.mass = mass;
this.radius = mass * 5;
this.position = createVector(x, y, z);
this.velocity = createVector(0,0,0);
this.acceleration = createVector(0,0,0);
}
update() {
// Velocity changes according to acceleration
this.velocity.add(this.acceleration);
// position changes by velocity
this.position.add(this.velocity);
// We must clear acceleration each frame
this.acceleration.mult(0);
}
display() {
push();
translate(this.position.x,this.position.y,this.position.z);
strokeWeight(0);
// appearance of sphere (see - https://www.youtube.com/watch?v=k2FguXvqp60&t=3s)
shininess(50);
directionalLight(255,255,255,width,height,-1000);
ambientMaterial(this.colour[0],this.colour[1],this.colour[2]);
sphere(this.radius,10,10);
pop();
}
// Newton's 2nd law: F = M * A or A = F / M
applyForce(force) {
let f = p5.Vector.div(force, this.mass);
this.acceleration.add(f);
}
attract(mover_) {
// Calculate direction of force - more info: https://www.youtube.com/watch?v=OAcXnzRNiCY
let force = p5.Vector.sub(this.position, mover_.position);
// Distance between objects
let distance = force.mag();
// Gravitional force magnitude F = G * M1 * M2 / distance squared
let strength = (G * this.mass * mover_.mass) / (distance * distance);
force.setMag(strength);
// if they collide - I don't know what to do here so just reverse the force direction for now??
if (distance < this.radius + mover_.radius) force.setMag(-strength);
return force;
}
}
// ------------------------------------------ end ------------------------------------------
</script>
</center>
</body>
</html>