NOCassignment4.js

var planets = [];
var particles = [];


function setup() {
  createCanvas(1200, 800);
  for (var i = 0; i < 7; i++) {
    planets.push(new Planet(-500 + 130 * i, -400 + 130 * i, random(80, 120))); // x,y,radius
  }

  for (var i = 0; i < 30; i++) {
    particles.push(new Particle(-width / 2, -height / 2));
  }
}


function draw() {
  background(0);

  push();
  translate(width / 2, height / 2);
  // create zoom-in & out
  var s = map(mouseY, 0, height, 0.5, 1.5);
  scale(s);
  for (var j = 0; j < planets.length; j++) {

    var tPlanet = planets[j];
    // tPlanet.r = 40 * j;
    // tPlanet.g = 40 * j;
    // tPlanet.b = 40 * j;

    for (var i = 0; i < particles.length; i++) {
      var p = particles[i];

      // how to create a gravity
      var gravity = p5.Vector.sub(tPlanet.pos, p.pos);
      gravity.normalize();
      gravity.mult(tPlanet.cGravity * p.mass);
      p.applyForce(gravity);

      var distance = p.pos.dist(tPlanet.pos);

      // core area
      if (distance < tPlanet.coreRad) {
        tPlanet.coreRad++;
        p.vel.mult(tPlanet.cCoreRestitution);
        if (tPlanet.coreRad > tPlanet.rad) {
          tPlanet.rad = 0;
          tPlanet.coreRad = 0;
          tPlanet.waterRad = 0;
        }
      }
      // water area
      else if (distance < tPlanet.waterRad) {
        // water resistance
        var resistance = p5.Vector.mult(p.vel, -1);
        resistance.normalize();
        var speed = p.vel.mag();
        resistance.mult(speed * speed * tPlanet.cWaterResistance);
        resistance.limit(speed); // ***
        p.applyForce(resistance);

      }
      // air area
      else if (distance < tPlanet.rad) {
        // air resistance
        var resistance = p5.Vector.mult(p.vel, -1);
        resistance.normalize();
        var speed = p.vel.mag();
        resistance.mult(speed * speed * tPlanet.cAirResistance);
        resistance.limit(speed); // ***
        p.applyForce(resistance);
        // wind
        var wind = p.vel.copy();
        wind.normalize();
        wind.rotate(radians(60)); // ***
        wind.mult(tPlanet.cWindMagnitude);
        p.applyForce(wind);
      }
      if (tPlanet.waterRad = 0) {
        p.r = 0;
        p.g = 0;
        p.b = 255;
      }


      p.update();
      p.display();
    }
    tPlanet.update();
    tPlanet.display();
  }

  pop();
}
"use strict";

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(random(1, 7), random(-1, 3)); // ***
    this.acc = createVector();
    this.dia = 2;
    this.mass = random(1, 10);
    this.r = 255;
    this.g = 255;
    this.b = 255;
  }
  applyForce(f) {
    f.div(this.mass);
    this.acc.add(f);
  }
  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }
  display() {
    push();
    translate(this.pos.x, this.pos.y);
    noStroke();
    fill(this.r, this.g, this.b);
    ellipse(0, 0, this.dia * this.mass, this.dia * this.mass);
    pop();
  }
}
"use strict";

class Planet {
  constructor(x, y, radius) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.rad = radius;
    this.waterRad = this.rad * random(0.4, 0.9);
    this.coreRad = this.rad * random(0.2, 0.3);
    this.cGravity = radius * 0.0005;
    this.cWindMagnitude = 2;
    this.cAirResistance = 0.05;
    this.cWaterResistance = 0.9;
    this.cCoreRestitution = 1.25;
    this.r = 255;
    this.g = 255;
    this.b = 255;
  }
  update() {
    // this.vel.x = 2*PI%(frameCount * 0.0001)*random(100,500) ;
    // this.vel.y = 2*PI%(frameCount * 0.0001)*random(100,500) ;
    // this.pos.add(this.vel);
    //this.pos.x = cos(frameCount * 0.0001) * 80;
    //this.pos.y = sin(frameCount * 0.0001) * 80;
  }
  display() {
    push();

    // Air
    fill(this.r, this.g, this.b, 50);
    stroke(255, 100);
    ellipse(this.pos.x, this.pos.y, this.rad * 2, this.rad * 2);
    // Water
    fill(0, 0, this.b, 120);
    stroke(0, 0, this.b);
    ellipse(this.pos.x, this.pos.y, this.waterRad * 2, this.waterRad * 2);
    // core
    fill(this.r, 0, 0, 80);
    stroke(this.r, 0, 0);
    ellipse(this.pos.x, this.pos.y, this.coreRad * 2, this.coreRad * 2);

    pop();
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>in-class-exercise-planet-multiple</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>
    <script src="Planet.js" type="text/javascript"></script>
    <script src="Particle.js" type="text/javascript"></script>

    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
  </head>
  <body>
  </body>
</html>