let vec = p5.Vector

class ConstraintPoint {
  constructor(x, y, size) {
    this.size = size;
    this.pos = new vec(x, y);
    this.forward = new vec(0, 0);
  }

  follow(targetX, targetY) {
    let target = new vec(targetX, targetY);
    let targetForward = vec.sub(target, this.pos);
    let targetAngle = targetForward.heading();

    this.forward = p5.Vector.fromAngle(targetAngle);

    let dir = p5.Vector.mult(this.forward, -this.size);
    this.pos = vec.add(target, dir);
    
    
  }
}

let points = []
function setup() {
  createCanvas(400, 400);
  
  for (let i = 0;i < 10;i++) {
    points.push(new ConstraintPoint(0, 0, 20));
  }
}


function draw() {
  background(220);
  
  points[0].follow(mouseX, mouseY)
  for (let i = 1;i < 10;i++) {
    let prev = points[i - 1];
    points[i].follow(prev.pos.x, prev.pos.y);
  }
  for (let i = 1;i < 10;i++) {
    let pos = points[i].pos;
    noFill();
    circle(pos.x, pos.y, 40);
  }
}