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 alanesq.com




Code:
<!DOCTYPE html>

<!-- 
        Planets3D - 02 Dec 19 - www.alanesq.com
        
        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>