lots of small changes

p5/mover.js

@@ -0,0 +1,63 @@
+// Gravitational Attraction
+// The Nature of Code
+// The Coding Train / Daniel Shiffman
+// https://youtu.be/EpgB3cNhKPM
+// https://thecodingtrain.com/learning/nature-of-code/2.5-gravitational-attraction.html
+// https://editor.p5js.org/codingtrain/sketches/MkLraatd
+
+class Mover {
+    constructor(x, y, vx, vy, m) {
+      this.pos = createVector(x, y);
+      this.maxSpeed = 10;
+      this.vel = createVector(vx, vy);
+      this.acc = createVector(0, 0);
+      this.mass = m;
+      this.r = sqrt(this.mass) * 0.75;
+      this.col = color(255);
+    }
+    
+    attract(other) {
+      let force = p5.Vector.sub(this.pos, other.pos);
+      let distanceSq = constrain(force.magSq(), 10, 1000);
+      let G = 3;
+      let strength = (G * this.mass * other.mass) / distanceSq;
+      force.setMag(strength);
+      other.applyForce(force);
+    }
+  
+    applyForce(force) {
+      let f = p5.Vector.div(force, this.mass);
+      this.acc.add(f);
+    }
+    
+    edges() {
+      if (this.pos.y >= height - this.r) {
+        this.pos.y = height - this.r;
+        this.vel.y *= -1;
+      } else if (this.pos.y <= this.r) {
+        this.pos.y = this.r;
+        this.vel.y *= -1;
+      }
+  
+      if (this.pos.x >= width - this.r) {
+        this.pos.x = width - this.r;
+        this.vel.x *= -1;
+      } else if (this.pos.x <= this.r) {
+        this.pos.x = this.r;
+        this.vel.x *= -1;
+      }
+    }
+  
+    update() {
+      this.vel.add(this.acc);
+      this.vel.limit(this.maxSpeed);
+      this.pos.add(this.vel);
+      this.acc.set(0, 0);
+    }
+  
+    show() {
+      noStroke();
+      fill(this.col);
+      ellipse(this.pos.x, this.pos.y, this.r * 2);
+    }
+  }

p5/sketch.js

@@ -0,0 +1,44 @@
+// Gravitational Attraction
+// The Nature of Code
+// The Coding Train / Daniel Shiffman
+// https://youtu.be/EpgB3cNhKPM
+// https://thecodingtrain.com/learning/nature-of-code/2.5-gravitational-attraction.html
+// https://editor.p5js.org/codingtrain/sketches/MkLraatd
+
+let movers = [];
+let attractor;
+var canvas;
+
+function windowResized(){
+    resizeCanvas(windowWidth, windowHeight);
+}
+
+function setup() {
+  canvas = createCanvas(windowWidth, windowHeight);
+  canvas.position(0, 0);
+  canvas.style("z-index", "-1")
+
+  movers[0] = new Mover(width/4, height, 5, -5, 55);
+  movers[0].col = color('red');
+  movers[1] = new Mover(3*width/4, height, -5, -5, 50);
+  movers[1].col = color('white');
+  movers[2] = new Mover(2*width/4, height, -5, -5, 45);
+  movers[2].col = color('blue');
+  background(0);
+}
+
+function draw() {
+  background(0, 75);
+  for (let mover of movers) {
+    for (let other of movers) {
+      if (mover !== other) {
+        mover.attract(other);
+      }
+    }
+  }
+  for (let mover of movers) {
+    mover.update();
+    mover.edges();
+    mover.show();
+  }
+}