// [l] to draw links

// [d] to drag points

// [m] to turn links into muscles (or back)

​

// based on https://natureofcode.com/oscillation/#spring-forces

​

let mode = 'p';

let points = [];

let links = [];

let selectedPoint;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(255);

  for (let link of links) {

    link.update();

  }

  for (let point of points) {

    point.update();

  }

  for (let link of links) {

    link.display();

  }

  for (let point of points) {

    point.display();

  }

​

  if (mode == 'l' && selectedPoint) {

    line(selectedPoint.pos.x, selectedPoint.pos.y, mouseX, mouseY);

  }

}

​

function keyPressed() {

  mode = key;

}

​

function mousePressed() {

  if (mode == 'p') {

    points.push(new Point(mouseX, mouseY));

  } else if (mode == 'l') {

    for (let point of points) {

      if (point.close()) {

        if (selectedPoint && point != selectedPoint) {

          links.push(new Link(selectedPoint, point));

          selectedPoint = null; 

        } else {

          selectedPoint = point;

        }

        break;

      }

    }

  } else if (mode == 'd') {

    for (let point of points) {

      if (point.close()) {

        selectedPoint = point;

        break;

      }

    }

  } else if (mode == 'm') {

    for (let link of links) {

      if (link.close()) {

        link.toggleMuscle();

      }

    }

  }

}

​

function mouseDragged() {

  if (mode == 'd' && selectedPoint) {

    selectedPoint.pos = createVector(mouseX, mouseY);

  }

}

​

function mouseReleased() {

  if (mode == 'd') {

    selectedPoint = null;

  }

}

​

class Point {

  constructor(x, y) {

    this.pos = createVector(x, y);

    this.vel = createVector();

    this.acc = createVector();

    this.mass = 24;

    this.damping = 0.98;

  }

  display() {

    push();

    if (mode == 'l' && this.close() || this == selectedPoint) {

      fill(255, 0, 0);

    } else {

      fill(0);

    }

    noStroke();

    ellipse(this.pos.x, this.pos.y, 5, 5);

    pop();

  }

  close() {

    return this.dist() < 10;

  }

  dist() {

    return dist(mouseX, mouseY, this.pos.x, this.pos.y);

  }

  update() {

    this.vel.add(this.acc);

    this.vel.mult(this.damping);

    this.pos.add(this.vel);

    this.acc.mult(0); 

  }

  applyForce(force) {

    let f = force.copy();

    f.div(this.mass);

    this.acc.add(f);

  }

}

​

class Link {

  constructor(from, to) {

    this.from = from;

    this.to = to;

    this.restLength = dist(from.pos.x, from.pos.y, to.pos.x, to.pos.y);

    this.k = 0.2;

    this.muscle = false;

    this.muscleOffset = 0;

    this.muscleFreq = 1;

    this.muscleAmp = 1;

  }

  update() {

    let force = p5.Vector.sub(this.from.pos, this.to.pos);

    let currentLength = force.mag();

    let stretch = currentLength - this.restLength;

    if (this.muscle) {

      stretch = sin(radians(this.muscleOffset + frameCount * this.muscleFreq)) * this.muscleAmp;

    }

    force.setMag(-1 * this.k * stretch);

    if (mode != 'd' || selectedPoint != this.from) {

      this.from.applyForce(force.mult(0.5));

    }

    if (mode != 'd' || selectedPoint != this.to) {

      this.to.applyForce(force.mult(-1));

    }

  }

  display() {

    push();

    if (mode == 'm' && this.close()) {

      stroke(255, 0, 0);

    } else if (this.muscle) {

      stroke(0, 255, 0);

    } else {

      stroke(0);

    }

    line(this.from.pos.x, this.from.pos.y, this.to.pos.x, this.to.pos.y);

    pop();

  }

  close() {

    let P = createVector(mouseX, mouseY);

    let AB = p5.Vector.sub(this.to.pos, this.from.pos);

    let AP = p5.Vector.sub(P, this.from.pos);

    let t = AP.dot(AB) / AB.magSq();

    t = constrain(t, 0, 1);

    let d = p5.Vector.add(this.from.pos, AB.mult(t)).dist(P);

    return d < 10;

  }

  toggleMuscle() {

    this.muscle = !this.muscle;

    if (this.muscle) {

      this.muscleOffset = random(60);

      this.muscleFreq = random(0.1, 1.9);

      this.muscleAmp = random(0.5, 1.5);

      console.log('Created new muscle with freq ' + this.muscleFreq + ', amplitude ' + this.muscleAmp);

    }

  }

}

​