planet1.js

"use strict";

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

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

    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);

  }
  attract(other) {
    var attraction = p5.Vector.sub(other.pos, this.pos);
    var distance = dist(other.pos, this.pos);
    attraction.normalize();
    force.mult((this.mass * other.mass) / (distance * distance));
    this.applyForce(attraction);
  }

  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(this.strokeWeight);
    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 = [];
var centerBall;

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], 350 + 70 * i + random(20)));
    } else {
      springs.push(new Spring(balls[i], balls[0], 350 + 70 * i + random(20)));
    }
  }

  centerBall = new Ball(random(30), random(30), 255);

}

function draw() {
  background(0);

  push();
  translate(width / 2, height / 2);
  rotate(frameCount * 0.01);
  centerBall.strokeColor = color(255, 50);
  centerBall.strokeWeight = 30;
  centerBall.fillColor = color(0, 20, 255);
  centerBall.rad = 60;

  centerBall.update();
  centerBall.display();


  for (var i = 0; i < springs.length; i++) {
    springs[i].update();
    if (params.debugMode) {
      springs[i].display();
    }
  }

  for (var i = 0; i < balls.length; i++) {

    var force = p5.Vector.sub(centerBall.pos, balls[i].pos);
    force.mult(random(0.01, 0.03) * balls[i].mass);
    balls[i].applyForce(force);

    balls[i].update();
    balls[i].display();
  }
  pop();
}



//