gravity1.js

// Basic setup for a p5.js sketch

// This function gets called once at the start of the page load
function setup() {
  // This creates an 800x800 HTML canvas element
  createCanvas(800, 800);
}

// This function gets called ~60 times/second
function draw() {
  // Paint the background white
  background(255);
}

gravity2.js

// Declare a variable called planetArray
let planetArray;

function setup() {
  createCanvas(800, 800);
  // Initialize that variable to an empty array
  planetArray = [];
}

function draw() {
  background(255);
}

gravity3.js

let planetArray;

// Make a Planet class. This will allow us to create planet objects that share certain common behaviors
class Planet {
  // Create a planet by giving it a location and mass
  constructor(x, y, mass) {
    // Store the location as a vector (think of it as a 2D point)
    this.location = createVector(x, y);
    this.mass = mass;
  }
  
  // We will call this render function in draw()
  render() {
    // This p5.js function draws an ellipse to the screen at the given x, y, and radius
    ellipse(this.location.x, this.location.y, this.mass);
  }
}

function setup() {
  createCanvas(800, 800);
  planetArray = [];
}

function draw() {
  background(255);
  // Loop over each planet in the array
  for (let i = 0; i < planetArray.length; i++) {
    // Call the planet's render method so it will appear on the page
    planetArray[i].render();
  }
}

gravity4.js

let planetArray;

class Planet {
  constructor(x, y, mass) {
    this.location = createVector(x, y);
    this.mass = mass;
  }
  
  render() {
    ellipse(this.location.x, this.location.y, this.mass);
  }
}

function setup() {
  createCanvas(800, 800);
  planetArray = [];
}

function draw() {
  background(255);
  for (let i = 0; i < planetArray.length; i++) {
    planetArray[i].render();
  }
}

// This p5.js function will be called every time the mouse is clicked
function mousePressed() {
  // Create a new planet at the mouse's location with a random mass
  let p = new Planet(mouseX, mouseY, random(50));
  // Add our new planet to the array
  planetArray.push(p);
}

gravity5.js

let planetArray;

class Planet {
  constructor(x, y, mass) {
    this.location = createVector(x, y);
    // Create vectors for velocity and acceleration
    this.velocity = createVector(0, 0);
    this.acceleration = createVector(0, 0);
    this.mass = mass;
  }
  
  // Add a force to this planet. The force will affect the planet's
  // acceleration proportional to it's mass
  applyForce(force) {
    // Using the classic equation Force = Mass * Acceleration
    // Rewrite as Acceleration = Force / Mass
    // Add that acceleration to our planet's acceleration
    this.acceleration.add(force.div(this.mass));
  }
  
  render() {
    ellipse(this.location.x, this.location.y, this.mass);
    
    // Add acceleration to velocity, velocity to location
    this.velocity.add(this.acceleration);
    this.location.add(this.velocity);
    this.acceleration.mult(0);
  }
}

function setup() {
  createCanvas(800, 800);
  planetArray = [];
}

function draw() {
  background(255);
  for (let i = 0; i < planetArray.length; i++) {
    planetArray[i].render();
  }
}

function mousePressed() {
  let p = new Planet(mouseX, mouseY, random(50));
  planetArray.push(p);
}

gravity6.js

let planetArray;

class Planet {
  constructor(x, y, mass) {
    this.location = createVector(x, y);
    this.velocity = createVector(0, 0);
    this.acceleration = createVector(0, 0);
    this.mass = mass;
  }
  
  applyForce(force) {
    this.acceleration.add(force.div(this.mass));
  }
  
  // This function takes another planet and applies a force towards this planet
  attract(other) {
    // Create a vector from this planet to the other
    const attraction = p5.Vector.sub(this.location, other.location);
    
    // Only attract the other planet if it is not touching this planet
    if (attraction.mag() > this.mass + other.mass) {
      // Create a force according to Newton's Law of Gravitation: F = (G*m*M) / (r*r)
      const force = (this.mass * other.mass) / attraction.magSq();
      
      // Create a normalized vector towards the other planet
      attraction.normalize();
      
      // Multiply it by the force
      attraction.mult(force);
      
      // Apply the gravitational force
      other.applyForce(attraction);
    }
  }
  
  render() {
    ellipse(this.location.x, this.location.y, this.mass);
    this.velocity.add(this.acceleration);
    this.location.add(this.velocity);
    this.acceleration.mult(0);
  }
}

function setup() {
  createCanvas(800, 800);
  planetArray = [];
}

function draw() {
  background(255);
  for (let i = 0; i < planetArray.length; i++) {
    planetArray[i].render();
    
    // Each planet loops over all the other planets and attracts them
    for (let j = 0; j < planetArray.length; j++) {
      if (i !== j) {
        planetArray[i].attract(planetArray[j]);
      }
    }
  }
}

function mousePressed() {
  let p = new Planet(mouseX, mouseY, random(50));
  planetArray.push(p);
}