planet2.js

"use strict";

class Ball {
  constructor(x, y, c) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector();

    this.mass = random(5, 30);
    this.rad = this.mass;

    this.strokeColor = color(255, c);
    this.fillColor = color(random(255), random(255), random(0, 20));
    this.cDampling = 0.9;
  }
  applyForce(force) {
    force.div(this.mass);
    this.acc.add(force);

  }
  drag() {
    var distance = dist(mouseX, mouseY, this.pos.x, this.pos.y);
    if (mouseIsPressed && distance < this.rad + 50) {
      this.pos.x = mouseX;
      this.pos.y = mouseY;

    }
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);

    this.vel.mult(this.cDampling);
  }

  display() {
    push();
    stroke(this.strokeColor);
    strokeWeight(5);
    fill(this.fillColor);
    ellipse(this.pos.x, this.pos.y, this.rad * 2, this.rad * 2);
    pop();
  }

}
"use strict";

class Spring {
  constructor(ballA, ballB, len) {
    this.ballA = ballA;
    this.ballB = ballB;
    this.len = len;

    this.k = 0.2;
  }
  display() {
    push();
    stroke(255);
    strokeWeight(2);
    line(this.ballA.pos.x, this.ballA.pos.y, this.ballB.pos.x, this.ballB.pos.y);
    pop();
  }

  update() {
    //vector
    var vector = p5.Vector.sub(this.ballA.pos, this.ballB.pos);
    var distance = vector.mag();
    var direction = vector.copy().normalize();

    //force
    var stretch = distance - this.len;
    var force = direction.copy();
    //hooke's law
    force.mult(-1 * this.k * stretch);
    this.ballA.applyForce(force);
    force.mult(-1);
    this.ballB.applyForce(force);
  }

}


//
//JSON
var params = {
  debugMode: false //it's ","
};

var gui = new dat.gui.GUI();
gui.add(params, "debugMode");



//
var numOfBalls = 3;
var balls = [];
var springs = [];

function setup() {
  createCanvas(500, 600);
  for (var i = 0; i < numOfBalls; i++) {
    balls.push(new Ball(random(width), random(height), 180 - i * 50));
  }
  for (var i = 0; i < balls.length; i++) {
    if (i < balls.length - 1) {
      springs.push(new Spring(balls[i], balls[i + 1], random(300, 400)));
    } else {
      springs.push(new Spring(balls[i], balls[0], random(220, 400)));

    }
  }
}

function draw() {
  background(0);


  for (var i = 0; i < springs.length; i++) {
    springs[i].update();
    if (params.debugMode) {
      springs[i].display();
    }
  }
  if (keyIsPressed) {
    //for (var i = 0; i < 100; i++) {
    balls.push(new Ball(random(width), random(height), random(255)));
    //}

    for (var i = 0; i < balls.length; i++) {
      if (i < balls.length - 1) {
        springs.push(new Spring(balls[i], balls[i + 1], 100 + 50 * i));
      } else {
        springs.push(new Spring(balls[i], balls[0], 100 + 50 * i));

      }
    }

  }
  for (var i = 0; i < balls.length; i++) {
    var centerVec = createVector(width / 2, height / 2);
    var force = p5.Vector.sub(centerVec, balls[i].pos);
    force.normalize();
    balls[i].vel = createVector(-5 * force.y, 5 * force.x);
    force.mult(1.98 * balls[i].mass);
    balls[i].applyForce(force);
    balls[i].drag();
    balls[i].update();
    balls[i].display();
  }
  push();
  translate(width / 2, height / 2);
  rotate(frameCount * 0.1);
  stroke(255, 50);
  strokeWeight(30);
  fill(0, 20, 255);
  ellipse(0, 0, 80, 78);
  pop();



}



//