const REST_LENGTH = 0;

const SPRING_CONST = 0.2;

const GRAVITY = 0.00;

const DRAG = 0.95;

let rope;

​

function addVec(v1, v2) {

  return v1.map((coord, i) => coord + v2[i]);

}

​

function subVec(v1, v2) {

  return v1.map((coord, i) => coord - v2[i]);

}

​

function scaleVec(v, multiplier) {

  return v.map(coord => coord * multiplier);

}

​

function setup() {

  createCanvas(800, 400);

  const segmentLength = width / ROPE_SEGMENTS;

  rope = Array(ROPE_SEGMENTS + 1).fill()

    .map((_, i) => new Particle([

    segmentLength*i, 

    200 //+ 40*Math.sin(10/ROPE_SEGMENTS*i)

  ]));

  const middle = Math.floor(rope.length/6);

  rope[middle].applyForce([0, 40]);

  //rope[middle] = new Particle([segmentLength*middle, 280])

}

​

function drawPoint([x, y]) {

    fill(0, 0, 0);

    noStroke();

    circle(x, y, 3);

}

​

function drawLine(p1, p2) {

  strokeWeight(1)

  stroke(0, 200, 255);

  line(...p1, ...p2);

}

​

function distance([x1, y1], [x2, y2]) {

  const [dx, dy] = [x2 - x1, y2 - y1];

  return Math.sqrt(dx*dx + dy*dy);

}

​

function springForce(p1, p2) {

  const force = (distance(p1, p2) - REST_LENGTH) * SPRING_CONST;

  const forceDir = scaleVec(subVec(p1, p2), 1/distance(p1, p2));

  const result = scaleVec(forceDir, force);

  //console.log({p1, p2, force, forceDir, result})

  return result;

  //const [dx, dy] = [x2 - x1, y2 - y1].map(Math.abs);

  //const [fx, fy] = [dx - REST_LENGTH, dy - REST_LENGTH]

  //return [-SPRING_CONST * fx, -SPRING_CONST * fy];

}

​

function draw() {

  // UPDATE

  let oldRope = rope.map(particle => particle.clone());

  for(let i = 1; i < rope.length - 1; i++) {

    rope[i].applyDrag(DRAG);

    const f1 = springForce(oldRope[i - 1].position, rope[i].position);

    const f2 = springForce(oldRope[i + 1].position, rope[i].position);

    //const totalForce = scaleVec(addVec(f1, f2), 0.5);

    rope[i].applyForce(scaleVec(addVec(f1, f2), 0.5));

    //rope[i].applyForce(f2.map(c => c));

    rope[i].applyForce([0, GRAVITY]);

    rope[i].update();

    //const [x1, y1] = rope[i - 1];

    //const [x2, y2] = rope[i];

    //const [x3, y3] = rope[i + 1];

    //const [fx1, fy1] = springForce([x1, y1], [x2, y2]);

    //const [fx2, fy2] = springForce([x2, y2], [x3, y3]);

    //const [fx, fy] = [fx1 - fx2, fy1 - fy2 + GRAVITY];

        //console.log({fx1, fy1, fx2, fy2, fx, fy});

    //newRope.push([x2 + fx, y2 + fy]);

  }

  //newRope.push(rope[rope.length - 1]);

  //rope = newRope;

  // DRAW

  background(220, 220, 220);

  let lastPos = rope[0].position;

  //drawPoint(lastPos);

  fill(0, 150, 215);

  noStroke();

  beginShape();

  curveVertex(0, height);

  curveVertex(...lastPos);

  for(let i = 1; i < rope.length; i++) {

    const [x, y] = rope[i].position;

    //drawPoint([x, y]);

    //drawLine(lastPos, [x, y]);

    curveVertex(x, y);

    lastPos = [x, y];

  }

  curveVertex(width, height)

  endShape(CLOSE);

  for(let i = 1; i < rope.length; i++) {

    const [x, y] = rope[i].position;

    //drawPoint([x, y]);

    lastPos = [x, y];

  }

}